Set Google Maps bounds with angular-google-maps

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.

Take look at [this](https://github.com/angular-ui/angular-google-maps/blob/master/example/example.html) github, and try to search `bounds`, there is lots of piece of code related to it. — bjiang, Apr 07 '15 at 16:34
I read this file, no success yet. This gist contains the new approach (based on the suggested file) https://gist.github.com/vitorcarvalhoml/62f804cd197572f28079 How can I set the map.center and the map.zoom based on bounds? — Vitor Carvalho, Apr 13 '15 at 18:25

score 9 · Answer 1 · edited May 23 '17 at 11:54

9

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

edited May 23 '17 at 11:54

Community

1
1

answered Mar 16 '16 at 12:01

Alan

1,510
1
18
35

score 3 · Answer 2 · answered Sep 11 '15 at 08:57

3

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

answered Sep 11 '15 at 08:57

Mehraban

3,164
4
37
60

And place this values for example in Angular's constants - cause inside controller it stops working after the first use. – Arif Dewi Jun 14 '16 at 13:04
I 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? – Nexus Jan 20 '19 at 11:57

Set Google Maps bounds with angular-google-maps

2 Answers2