CODEWITHSUNDEEP
javascriptgoogle-mapsangularjs
Jakemmarsh
Jakemmarsh

Reputation: 4661

Google maps polygon not updating color after setOptions?

I'm using the Google Maps API alongside AngularJS. I have the following function to change a polygon's color using setOptions:

desk.modColor = function (color) {
     desk.setOptions({ fillColor: color });
}

I'm calling it from within angularJS with code like the following:

$scope.focusedDesk.modColor('#0592fa');

However, this is only working about 75% of the time. After enough scope manipulation in AngularJS, this stops working. If I console.log the desk object immediately after the modColor call, it has the correct fillColor, but the polygon on the map hasn't updated visually.

Any ideas why this is happening? Is there any way to ensure that setOptions updates the Map/Polygon visually? Thanks.

Upvotes: 3

Views: 1395

Answers (3)

Jakemmarsh
Jakemmarsh

Reputation: 4661

It turns out there was nothing wrong with the code I was using to change the polygon colors. Some of my other code was duplicating polygons, and so they would stack and the highlighted polygon would be hidden by the newer duplicates.

Upvotes: 1

user680786
user680786

Reputation:

Is there any way to ensure that setOptions updates the Map/Polygon visually?

Yes, call 

if (!$scope.$$phase) {$scope.$apply();}

Upvotes: 0

Kia Raad
Kia Raad

Reputation: 1335

condition 1

if you are manipulating you DOM in any form within angularJS you should probably use directives in this case you should write a directive to do that for you:

angular.module('myModule',[])
.directive('myDirective',function(){
   return {
      scope: { focusedDesk:'=' },
      link: function(scope, iElement, iAttrs){
               scope.$watch('your-whatever-object-or-property-you-want-to-watch-over', function(){
                                   //your desired action
                              })
            }
   }
})

and the usage would be something like this:

<div my-directive focusedDesk='focusedDesk'></div>


condition 2

if you are just concerned about the property's value you could $scope.$watch the same as above in your controller function

Upvotes: 2

Related Questions