Closed Lelya closed 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.
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.
$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')?
$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.
I think this is resolved? Closing.
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/