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

Question

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.

Answer 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

Answer 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()
}
};