javascript - How can I detect when an editable polygon is modified?

Question

How can I detect when an editable polygon is modified (point moved, point added, point removed) or dragged? The Google Maps API docs only list mouse events for Polygons.

Answer 1

Polygons are made of Paths which are just MVCArrays (in this case, they're a list of LatLng objects). MVCArrays have three events: insert_at, remove_at, and set_at. We can use those events to detect changes in the points of the Polygon.

There are also drag events for polygons: dragstart, drag, and dragend. It's best to listen for dragend if you want to know that a shape was just dragged.

All together, we can detect any changes to a polygon:

// Loop through all paths in the polygon and add listeners
// to them. If we just used `getPath()` then we wouldn't 
// detect all changes to shapes like donuts.
polygon.getPaths().forEach(function(path, index){

  google.maps.event.addListener(path, 'insert_at', function(){
    // New point
  });

  google.maps.event.addListener(path, 'remove_at', function(){
    // Point was removed
  });

  google.maps.event.addListener(path, 'set_at', function(){
    // Point was moved
  });

});

google.maps.event.addListener(polygon, 'dragend', function(){
  // Polygon was dragged
});