Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers angularjs angularjs

Angular Google Maps - automatically set 'center' and 'zoom' to fit in all markers


Use the LatLngBounds class in Google Maps API, like this:

var bounds = new google.maps.LatLngBounds();for (var i in markers) // your marker list here    bounds.extend(markers[i].position) // your marker position, must be a LatLng instancemap.fitBounds(bounds); // map should be your map class

It will nicely zoom and center the map to fit all your markers.

Of course, this is the pure javascript, not the angular version, so if you have problems implementing it in angular (or you don't have access to the map instance from where you get the markers), let me know.


angular-google-maps has taken care of this feature. All you need to do is add fit="true" attribute in your markers directive (ui-gmap-markers). Example : <ui-gmap-markers models="map.markers" fit="true" icon="'icon'">Please refer the document http://angular-ui.github.io/angular-google-maps/#!/api


The answer has been posted for another problem: https://stackoverflow.com/a/23690559/5095063After that you have just to add this line:

$scope.map.control.getGMap().fitBounds(bounds);