CODEWITHSUNDEEP
angularangular2-google-maps
Kaxa Margalitadze
Kaxa Margalitadze

Reputation: 29

Angular 2 google maps , change polygon color on polygon click

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

Upvotes: 0

Views: 1628

Answers (2)

Radek
Radek

Reputation: 21

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);

Upvotes: 1

Parav01d
Parav01d

Reputation: 318

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!

Upvotes: 0

Related Questions