Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers
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.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/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.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/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.
Answer
ngMap recently(1.10.0) included a map attribute 'zoom-to-include-markers'. You can find an example here, https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/map_zoom_to_include_markers.html