Event after modifying polygon in Google Maps API v3

Question

I made a mapping application that uses the drawing manager (and implements selectable shapes). The program works as follows: when finishing drawing the polygon after clicking a button a path, is mapped on the polygon.

When the polygon is edited after this process I want the mapping function to be called again. However I can't get this part working:

I tried using following code, but I always get an error because no shape is selected yet when this listener is added. What can I do?

google.maps.event.addListener(selectedShape, 'set_at', function() {     console.log("test"); });  google.maps.event.addListener(selectedShape, 'insert_at', function() {     console.log("test"); }); 

Important pieces of code:

function showDrawingManager(){     var managerOptions = {         drawingControl: true,         drawingControlOptions: {             position: google.maps.ControlPosition.TOP_CENTER,             drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.POLYGON]         },         markerOptions: {             editable: true,             icon: '/largeTDGreenIcons/blank.png'         },         polygonOptions: {             fillColor: "#1E90FF",             strokeColor: "#1E90FF",         },         polylineOptions: {             strokeColor: "#FF273A"         }     }      var drawingManager = new google.maps.drawing.DrawingManager(managerOptions);     drawingManager.setMap(map);     return drawingManager; }  function clearSelection() {     if (selectedShape) {         console.log("clearSelection");          selectedShape.setEditable(false);         selectedShape = null;         numberOfShapes--;     } }  function setSelection(shape) {     console.log("setSelection");     clearSelection();    selectedShape = shape;    shape.setEditable(true);    numberOfShapes++;    //getInformation(shape); }  function initialize(){      //....      var drawingManager = showDrawingManager();     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {         if (e.type != google.maps.drawing.OverlayType.MARKER) {             // Switch back to non-drawing mode after drawing a shape.             drawingManager.setDrawingMode(null);              // Add an event listener that selects the newly-drawn shape when the user             // mouses down on it.             var newShape = e.overlay;             newShape.type = e.type;             google.maps.event.addListener(newShape, 'click', function() {                 setSelection(newShape);             });             setSelection(newShape);         }     }); 

Answer 1

I solved it by calling .getPath() and putting the listener inside the listener which is called every time a shape is clicked. I think the Google API documentation is not very clear on how to use the set_at so it may be useful for other people too.

// Add an event listener that selects the newly-drawn shape when the user // mouses down on it. var newShape = e.overlay; newShape.type = e.type; google.maps.event.addListener(newShape, 'click', function() {     google.maps.event.addListener(newShape.getPath(), 'set_at', function() {         console.log("test");     });      google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {         console.log("test");     });     setSelection(newShape); });