angular-google-maps updating marker model

Question

Im using the angular-google-maps library but I cannot seem to get the map to update when I dynamically add new markers to my model. Hardcoded markers in the model are correctly displayed.

HTML

<ui-gmap-markers models="map.placeMarkers" coords="'self'" icon="'icon'" options="'options'" click="'onClicked'" modelsbyref="true"></ui-gmap-markers>

JS

$scope.map.placeMarkers = [
            {
                id: 1,
                latitude: 45,
                longitude: -74,
                options: {},
                title: 'Test 123'
            },
            {
                id: 2,
                latitude: 15,
                longitude: 30,
                options: {},
                title: 'Test 1234'
            }
        ];

The above is working fine however when I do:

var place = {
   id: 3,
   latitude: 455,
   longitude: -574,
   options: {},
   title: 'Test 1233455'
};

$scope.map.placeMarkers.push(place);

The model is update but not the map. I have tried using $scope.$apply() but got an error since a digest cycle was already in progress.

Answer 1

you need to set modelsbyref to false in ui-gmap-markers directives

 <ui-gmap-markers models="places" coords="'self'" modelsbyref="false">  

   </ui-gmap-markers>

Answer 2

Same happened with me. Spent hours to find solutions.

It seemed like whenever we update markers angularjs doesn't update it immediately. just call $scope.$digest() after pushing new marker to the array.

Also check $scope.$apply() function, it calls $scope.$digest() automatically. Please refer to this tutorial which explain in detail: tutorial showing $scope.$digest(), $scope.$apply, $scope.watch

Its written in above tutorial:

You may encounter some corner cases where AngularJS does not call the $digest() function for you. You will usually detect that by noticing that the data bindings do not upate the displayed values. In that case, call $scope.$digest() and it should work. Or, you can perhaps use $scope.$apply()