dylanfprice / angular-gm

AngularJS Google Maps Directives
MIT License
198 stars 47 forks source link

Refresh marker, center map and zoom map #58

Closed Lelya closed 9 years ago

Lelya commented 10 years ago

Hello! When changing the marker coordinates to the event as it moved? How to change center map and zoom map? I do not understand how to use and where to call $scope.$broadcast ('gmMarkersRedraw', 'myObjects')

http://jsfiddle.net/qSVZ4/3/

PhilWritesCode commented 9 years ago

+1 -- I've been working with the bounds object, and I keep getting promising results, but I haven't been able to successfully center/zoom the map to fit all markers.

brocksamson commented 9 years ago

This is the code I use to set the initial center and bounds on my map:

$scope.$on('gmMapIdle', function(event, mapId){
    if(mapId === 'mainMap'){
        var bounds = new google.maps.LatLngBounds();
        var center = new google.maps.LatLng(30.275662, -97.81721});
        //repeat this line for each marker
        bounds.extend(new google.maps.LatLng(31.22, -96.91721}));
        center = bounds.getCenter();
        $scope.options.bounds = bounds;
        $scope.options.center = center;
        $scope.$digest();
    }
});

and in my template:

<gm-map
    gm-map-id="'mainMap'"
    gm-map-options="options.map"
    gm-center="options.center"
    gm-bounds="options.bounds"
    gm-zoom="options.zoom"
    class="map-canvas"
>
    <gm-markers gm-objects="locations"
        gm-id="object.id"
        gm-position="{ lat: object.latitude, lng: object.longitude }"
        gm-marker-options="getMarkerOptions(object, 'location')"
        gm-on-click="markerClicked(object, 'location')"
    />
</gm-map>

If you run the code before gmMapIdle, then some code in the angulargmMapController overrides it. The $scope.digest() is also required or the map pauses before updating.

The code above should work at any point after map idle has fired.

ppeer commented 9 years ago
$scope.$on('gmMapIdle', function(event, mapId){
    if(mapId === 'mainMap')

What/why are you using $on and can I do without mapid and it's condition if(mapid==='mainMap')?

brocksamson commented 9 years ago

$on is used to consume events within angular. You can read about it at https://docs.angularjs.org/api/ng/type/$rootScope.Scope. gmMapIdle is a global event, all map instances broadcast this event whenever they finish loading the map. The mapId check is unnecessary provided you only have a single map in your application. Its good practice to add it though, helps to avoid bugs in the future. If you add a second map your init code inside this function may run on that map in addition to this map.

dylanfprice commented 9 years ago

I think this is resolved? Closing.