Apply event listener to an editable polygon

Question

How to add a event listener to a google maps editable Polygon when the user changes its boundary?

I tried the code below. Here is a Fiddle example

google         


        

Answer 1

You need to add the event listener to the Polygon's path:

google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) {
  document.getElementById('info').innerHTML = PolygonPath.getPath().getAt(evt).toUrlValue(6);
});

There are three interesting events on an MVCArray (as they apply to a Polygon path):

• insert_at - add a vertex
• remove_at - delete a vertex
• set_at - change a vertex

code snippet implementing insert_at and set_at listeners on the Polygon path:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}