Marker does not update coordinates in Google Maps for AngularJS
I am using Google Maps for AngularJS and have the following Jade code:
#map_canvas
google-map(center='map.center', zoom='map.zoom', draggable='true', options='options', events='map.events')
marker(coords='marker.coords', options='marker.options', idkey='marker.id')
In my angular controller, I have:
$scope.map = {center: {latitude: 42.2405, longitude: -8.7207 }, zoom: 12, events: {
click: function (map, eventName, args) {
$scope.marker.coords.latitude = args[0].latLng.lat();
$scope.marker.coords.longitude = args[0].latLng.lng();
console.log($scope.marker);
}
}
}
$scope.marker = {
id: 0,
coords: {
latitude: 42.2405, longitude: -8.7207
},
options: { draggable: true }
}
I am trying to update the location of the marker on every click. In console.log($scope.marker);
I can see that my marker is printing the updated coordinate value, but the red pin is not moving around the map.
I cannot figure out what I am doing wrong.
EDIT:
The marker moves to a new location after the map is resized, so I figured it was a matter of the map not updating when the marker location changed. Should this be reported as a bug? Anything I can do to fix this problem?
source to share
At last! After reading a bit on $ apply () here and here and finding solutions like this one where it mentions:
wrap your callback body in
$scope.$apply(function () { ... });
. Remember that your event comes from a non-Angular world.
I found this other post where it just adds $scope.$apply();
to the end of the click function.
This last solution was the only one for me. I posted the whole process because I am curious about $ apply ().
source to share