Angular 2 google maps , change polygon color on polygon click

Question

I am using angular 2 google maps https://angular-maps.com/docs/api/latest/ts/core/index/SebmGoogleMap-directive.html

       <sebm-map-polygon #polygon *ngFor="let Rpolygon of polygonPathDatas" 
        [paths]="Rpolygon.path"
        [clickable] = "true"
        strokeColor ="#00000"
        [strokeWeight]=".6"      
        [editable]="false"
        [draggable]="false" 
        (polyClick)="click($event,polygon)" 
        (polyDblClick)="delete($event)">
      </sebm-map-polygon>

How can i change color of polygon on polygon click

score 1 · Answer 1 · answered Apr 26 '19 at 00:26

There is property called PolygonOptions that you can use. For example


//create new options
var newOptions: PolygonOptions = {};

newOptions.fillColor = #223366;
newOptions.fillOpacity = 0.8;


//update polygon options
polygon.setOptions(newOptions);

score 0 · Answer 2 · answered Mar 11 '17 at 17:16

I had take a look at the documentation and it seems like that you need to change the "fillColor" attribute on the polygon.

So you need a function in your class like:

click(event,polygon) {
    polygon.fillColor = "#9c9c9c"
}

When the click event:

(polyClick)="click($event, Rpolygon)"

is triggert it calls the click function and the polygon will change its color. Thats the theory, make it real!

Ps.: You have a typo in your code. In the function call click it must be "Rpolygon" not "polygon" because its the reference to your polygon from the iteration.

 *ngFor="let Rpolygon of polygonPathDatas"

Happy coding!

Angular 2 google maps , change polygon color on polygon click

2 Answers2