Set Google Maps bounds with angular-google-maps
Solution 1
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
Solution 2
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()
}
};
Vitor Carvalho
Updated on June 11, 2022Comments
-
Vitor Carvalho almost 2 years
I'm trying to set bounds into Google Maps instance but with no success. I'm using AngularJS and
angular-google-maps
module. My last try was:<div id="map_canvas"> <ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds" options="options"> <div ng-repeat="d in devicesMarkers track by d.id"> <ui-gmap-marker idkey="d.id" coords="d.center" options="d.options"> </ui-gmap-marker> <ui-gmap-circle center="d.center" stroke="d.circle.stroke" fill="d.circle.fill" radius="d.circle.radius" visible="d.options.visible"> </ui-gmap-circle> </div> </ui-gmap-google-map> </div>
In my
app.js
I wrote:(...) .controller('TaihMapController', ['$scope', '$log', 'uiGmapGoogleMapApi', function($scope, $log, GoogleMapApi) { $scope.devicesMarkers = devices; $scope.map = { center: { latitude: devices[0].center.latitude, longitude: devices[0].center.longitude }, zoom: 12, bounds: {} // fit: true, }; GoogleMapApi.then(function(maps) { $log.debug(maps); var myBounds = new maps.LatLngBounds(); for (var k = 0; k < devices.length; k++) { var _tmp_position = new maps.LatLng( devices[k].center.latitude, devices[k].center.longitude); myBounds.extend(_tmp_position); } $scope.map.bounds = myBounds; $scope.googleVersion = maps.version; // $scope.bounds = myBounds; // $scope.zoom = maps.getZoom(); // maps.fitBounds(myBounds); // $scope.bounds = maps.getBounds(); });
The function
maps.fitBounds()
doesn't exist. I try the$scope.map.bounds
approach, but didn't respond the way I think. -
Arif Dewi almost 8 yearsAnd place this values for example in Angular's constants - cause inside controller it stops working after the first use.
-
Nexus over 5 yearsI generate the bounds based on my markers collection, and north-east/south-west values are correct. however when I set the map.bounds expression, nothing happens. the map doesn't refresh to update its view. any ideas?