How to delete polygon coordinate/vertex/node (Google Maps V3)

Question

How to use the insert_at, remove_at & set_at events of the polygon.

Can someone provide some sample on how to use them and what is the event argument.

What i want to do now is when user draw the polygon, and double-click the node of the polygon, i want the node to be deleted from the polygon.

can it be done ?

Answer 1

If your Polygon is editable, you can add an event listener to the Polygon and then handle click or right clicks. For example:

poly = new google.maps.Polygon({
  editable: true
});
poly.setMap(map);
google.maps.event.addListener(poly, 'rightclick', function(event) {
  if (event.vertex == undefined) {
    return;
  } else {
    removeVertex(event.vertex);
  }
});

Above code would create a polygon and attach a event listener that catches right clicks on vertices (nodes) of the polygon and then call removeVertex function.

function removeVertex(vertex) {
  var path = poly.getPath();
  path.removeAt(vertex);
}

Similar solution can be applied for Polylines as well.

Answer 2

here are 2 links that might help:

For Events: https://developers.google.com/maps/documentation/javascript/events

The Events Your Asking: https://developers.google.com/maps/documentation/javascript/overlays#PolygonArrays

I just ended up using the remove_at event. Here is how I used it:

google.maps.event.addListener(this, 'click', function(event) {                   
        path = this.getPath();
        for(i=0;i<path.length;i++){
            if( event.latLng == path.getAt(i)){
                 path.removeAt(i);
            }
        }
 });

make sure you use them on the polygons actual path, not the polygon object.