Set the boundaries of Google Maps using angular -google-maps

Question

I am trying to set boundaries in an instance of Google Maps, but have not succeeded. I am using AngularJS module and angular-google-maps . My last attempt:

 <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 maps.fitBounds() function does not exist. I tried the $scope.map.bounds approach, but didn't answer as I think.

Answer 1

If you use the angular-google-map "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: fooobar.com/questions/414399 / ...

Answer 2

According to docs , the boundaries of directives are slightly different from the borders of Google maps. You must explicitly specify the northeast and southwest attributes with your own latitude and longitude .

The following should work:

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