agm-polygon not updating when additional points are added

Edit: I added a stackblitz for this. It is my first so I hope it works.

https://stackblitz.com/edit/angular-dlabgk

I've been using google maps for several years and recently migrating every to AgmMaps. Recently I've seen a few questions about polygon drawing on the map and wanted to create a very simple demo. I added this to a working map project:

<agm-polygon [strokeColor]="'red'" [strokeWeight]="4" [paths]="polygonPts">
</agm-polygon>


Declared my array like this:

polygonPts: Array<google.maps.LatLng>[] = [];


Then in my mapReady function I added some valid points:

this.polygonPts = [
new google.maps.LatLng(34.85052636946416, -117.40498588867183),
new google.maps.LatLng(36.28034702299417,-112.48311088867183),
new google.maps.LatLng(39.87662851819041, -114.76826713867183),
new google.maps.LatLng(38.03141086161898,-121.18428276367183)
];


All worked as expected as it drew a polygon in the SW part of the USA. Next step was to extend it a bit so I could click on the map and add points. I added a handler on the agm-map element for mapClick:

(mapClick)="mapClick($event)"


And then added points to the array:

mapClick(e) {
let latlng = new google.maps.LatLng(e.coords.lat, e.coords.lng);
this.polygonPts.push(latlng);
this.ptsString = JSON.stringify(this.polygonPts);
}


I add the ptsString to the template so I could visually see that my array was growing but can't seem to get the map to update. I checked NgZone to make sure I'm in zone and also tried this.zone.run to no avail. The docs seem very clear that you can do this stating in the paths section: "Inserting or removing LatLngs from the Array will automatically update the polygon on the map."

I went through the example on StackBlitz (https://stackblitz.com/edit/agm-polygon?file=app/app.component.html) but that seemed really complicated and was trying to do it with a lot less code. Is that the only way or am I missing something?

Continue reading...