I use the AngularUI Google Maps directive as follows:
UpdateData.html
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"></div>
<div class="control-group">
<label class="control-label">Situación</label>
<div class="controls">
<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>
</div>
</div>
Updatecontroller
if (!$scope.myMarkers) {
$scope.myMarkers = [];
}
if (!$scope.myMap) {
$scope.model = {
myMap: undefined
};
}
$scope.mapOptions = {
center : new google.maps.LatLng(35.784, -78.670),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function($event) {
$scope.myMarkers.push(new google.maps.Marker({
map : $scope.model.myMap,
position : $event.latLng
}));
$scope.event.lat = $event.latLng.lat();
$scope.event.lng = $event.latLng.lng();
};
I can add new markers, and the map is updated successfully, I cannot delete them. I do the following:
$scope.myMarkers.splice(0, $scope.myMarkers.length);
myMarkersthe array becomes empty, but the map still contains deleted markers. It seems that the array and the map are myMarkerssynchronized when new markers are clicked on the array myMarkers, but not when the array is cleared myMarkers.
source
share