Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers - Stack Overflow

IT技术

更新时间：2025-04-221

admin管理员组
文章数量:1417665

I'm using ngMap in an angularjs app.
I'm displaying google-map with multiple markers onclick of Open map! button and first address present in the addresses array im taking as map center.

Here is The Plunk

example.js:

angular.module('plunker', ['ui.bootstrap', 'ngMap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.displayMap = function () {

        $scope.addresses = [{ "address": "Hyderabad" },
        { "address": "Chennai" },
        { "address": "Bangalore" },
        { "address": "Kolkata" },];

        $scope.latlng = [];
        $scope.loop(0, $scope.addresses)
    }

    $scope.loop = function (id, addressesresult) {
        if (id < addressesresult.length) {
            var address = addressesresult[id].address;
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $scope.latlng.push({
                        "lat": results[0].geometry.location.lat(),
                        "lng": results[0].geometry.location.lng(),
                        "title": results[0].formatted_address
                    });

                    if (id == ((addressesresult.length) - 1)) {
                        $scope.openPopup();

                    }
                } else {
                    console.log('Geocode was not successful for the following reason:' + status);
                }
                id = id + 1;
                $scope.loop(id, addressesresult);
            });
        }
    }

    $scope.openPopup = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal1',
            controller: ModalInstanceCtrl,
            scope: $scope,
            resolve: {
                lat: function () {
                    return $scope.latlng[0].lat;
                },
                lng: function () {
                    return $scope.latlng[0].lng;
                },
                latlng: function () {
                    return $scope.latlng;

                }
            }
        });

    };

};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {

    $scope.lat = lat;
    $scope.lng = lng;

    $scope.render = true;

    $scope.close = function () {
        $modalInstance.close();
    };
};

index.html:

<!doctype html>
<html ng-app="plunker">

<head>
    <script src=""></script>
    <script src="//ajax.googleapis/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src=".min.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

        <button class="btn btn-default" ng-click="displayMap()">Open map!</button>

        <script type="text/ng-template" id="modal1">
        <div class="modal-header googlemodal-header">
<button type="button" ng-click="close()" style="opacity:1" class="close" data-dismiss="modal" aria-hidden="true"> <span style="color:red; ">x</span> </button>
            <div align="center"><h3 class="modal-title">Addresses pointing in Google Map  </h3></div>
        </div>
        <div class="modal-body">
            <map ng-if="$parent.render" center="[{{lat}}, {{lng}}]"  zoom="15" zoom-control="true"  style="display:block; width:auto; height:auto;"> 
                <marker ng-repeat="item in latlng" 
            position="{{item.lat}}, {{item.lng}}" 
            title="{{item.title}}"></marker>
            </map>
        </div>
        <div class="modal-footer googlemodal-header">
            <button class="btn btn-primary btn-sm" ng-click="close()">CLOSE</button>
        </div>
    </script>

    </div>
</body>

</html>

All address related markers are displaying fine.

But how to set best zoom automatically for array of addresses, here these addresses i'm fetching from database, so these addresses changes for each request based on some condition.

I'm using ngMap in an angularjs app.
I'm displaying google-map with multiple markers onclick of Open map! button and first address present in the addresses array im taking as map center.

Here is The Plunk

example.js:

angular.module('plunker', ['ui.bootstrap', 'ngMap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.displayMap = function () {

        $scope.addresses = [{ "address": "Hyderabad" },
        { "address": "Chennai" },
        { "address": "Bangalore" },
        { "address": "Kolkata" },];

        $scope.latlng = [];
        $scope.loop(0, $scope.addresses)
    }

    $scope.loop = function (id, addressesresult) {
        if (id < addressesresult.length) {
            var address = addressesresult[id].address;
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $scope.latlng.push({
                        "lat": results[0].geometry.location.lat(),
                        "lng": results[0].geometry.location.lng(),
                        "title": results[0].formatted_address
                    });

                    if (id == ((addressesresult.length) - 1)) {
                        $scope.openPopup();

                    }
                } else {
                    console.log('Geocode was not successful for the following reason:' + status);
                }
                id = id + 1;
                $scope.loop(id, addressesresult);
            });
        }
    }

    $scope.openPopup = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal1',
            controller: ModalInstanceCtrl,
            scope: $scope,
            resolve: {
                lat: function () {
                    return $scope.latlng[0].lat;
                },
                lng: function () {
                    return $scope.latlng[0].lng;
                },
                latlng: function () {
                    return $scope.latlng;

                }
            }
        });

    };

};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {

    $scope.lat = lat;
    $scope.lng = lng;

    $scope.render = true;

    $scope.close = function () {
        $modalInstance.close();
    };
};

index.html:

<!doctype html>
<html ng-app="plunker">

<head>
    <script src="http://maps.google./maps/api/js?sensor=false"></script>
    <script src="//ajax.googleapis./ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="http://rawgit./allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

        <button class="btn btn-default" ng-click="displayMap()">Open map!</button>

        <script type="text/ng-template" id="modal1">
        <div class="modal-header googlemodal-header">
<button type="button" ng-click="close()" style="opacity:1" class="close" data-dismiss="modal" aria-hidden="true"> <span style="color:red; ">x</span> </button>
            <div align="center"><h3 class="modal-title">Addresses pointing in Google Map  </h3></div>
        </div>
        <div class="modal-body">
            <map ng-if="$parent.render" center="[{{lat}}, {{lng}}]"  zoom="15" zoom-control="true"  style="display:block; width:auto; height:auto;"> 
                <marker ng-repeat="item in latlng" 
            position="{{item.lat}}, {{item.lng}}" 
            title="{{item.title}}"></marker>
            </map>
        </div>
        <div class="modal-footer googlemodal-header">
            <button class="btn btn-primary btn-sm" ng-click="close()">CLOSE</button>
        </div>
    </script>

    </div>
</body>

</html>

All address related markers are displaying fine.

But how to set best zoom automatically for array of addresses, here these addresses i'm fetching from database, so these addresses changes for each request based on some condition.

Share Improve this question edited May 9, 2020 at 21:22 Littm 4,9474 gold badges33 silver badges39 bronze badges asked May 5, 2015 at 10:23 java developer 4232 gold badges8 silver badges20 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

ngMap recently(1.10.0) included a map attribute 'zoom-to-include-markers'. You can find an example here, https://rawgit./allenhwkim/angularjs-google-maps/master/testapp/map_zoom_to_include_markers.html

So the ideal zoom level depends on particular use cases. You can pick and choose the same accordingly. In depth explanations can be found in the documentation.

Although, I would suggest to have viewport biasing for zoomChanged events. The snippet shows how to implement it for angular (as suggested here).
This will ensure that the map is centered on the desired marker and you can fit all the markers in the panned area with it as well.

<div ng-controller="RectangleZoomCtrl" class="ng-scope">
      <map zoom="11" center="33.6803003, -116.173894" map-type-id="TERRAIN" on-zoom_changed="zoomChanged()">
        <shape name="rectangle" id="foo" stroke-color="#FF0000" stroke-opacity="0.8" stroke-weight="2" fill-color="#FF0000" fill-opacity="0.35">
        </shape>
      </map>
    </div>

本文标签： AngularjsngmapGoogle Maps Javascript API v3how to Set best Zoom for Multiple markersStack Overflow

版权声明：本文标题：Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745278755a2651322.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers - Stack Overflow

2 Answers 2

更多相关文章