Thomas Thomas - 1 month ago 13
Javascript Question

event after modifying polygon in google maps api v3

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

I solved it by calling .getPath() and putting the listener inside the 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 maybe 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);
    });