Set Google Maps bounds with angular-google-maps Set Google Maps bounds with angular-google-maps angularjs angularjs

Set Google Maps bounds with angular-google-maps


If you're using angular-google-map's "markers" directive, just add the fit="true" attribute (ui-gmap-markers).

Example :

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"> <ui-gmap-markers fit="true" models="markers" coords="'self'"></ui-gmap-markers></ui-gmap-google-map>

Source:https://stackoverflow.com/a/29707965


According to docs, directives bounds is slightly different with google maps bounds. You should explicitly set northeast and southwest attributes with their own latitude and longitude.

Below should work:

$scope.map.bounds = {    northeast: {        latitude: myBounds.getNorthEast().lat(),        longitude: myBounds.getNorthEast().lng()    },    southwest: {        latitude: myBounds.getSouthWest().lat(),        longitude: myBounds.getSouthWest().lng()    }};