Google Maps Polygon editing - get latlng position on mouseup

Question

I am trying to write a simple snapping function for editing a polygon in Google Maps v3.9

I have several polygons on the map, which can be made editable one at a time. When one is made editable, I also add a listener to it, to trigger when a vertex has been dragged.

As there is no drag event for google.maps.Polygon, I add a mousedown listener, which checks if a vertex is beneath the cursor, and if so adds a mouseup listener. The code within this mouseup listener checks against the vertices of all other polygons, and updates the dragging vertex if a close match is found.

This works well, except for one problem. The check is performed using the latLng property of the PolyMouseEvent returned by the mouseup listener. This property points to the location of the vertex before it was dragged, and I can't find a way to reference the vertex in its new position.

dragListener = google.maps.event.addListener( poly1, "mousedown", function( dragData ) {

    // if dragging a vertex
    if ( dragData.vertex != null ) {

        // perform snap on mouseup
        snapListener = google.maps.event.addListener( poly1, "mouseup", function( mouseData ) {
            var editingVertex = mouseData.vertex;
            var draggedLatLng = mouseData.latLng;

            // code here to compare draggedLatLng with latLng of editingVertex
            // and perform snap, which seems to work fine as is...
        }
    }
}

I am trying to achieve the same thing, and i could not find any solutions... — Catalin, Jan 26 '13 at 13:03
I wrote a library to solve this issue. Please see [my answer here](http://stackoverflow.com/a/33338065/568884) — Jordan Arsenault, Oct 30 '15 at 00:02

score 4 · Answer 1 · answered Jan 24 '14 at 16:52

Polygons are a collection of paths, and paths are MVCArrays of LatLng objects, so we can listen for the set_at event on each path in the polygon which tells us when a point has been moved.

poly1.getPaths().forEach(function(path, index){
  google.maps.event.addListener(path, 'set_at', function(index, oldLatLng){
    var newLatLng = path.getAt(index);
    // Now you have both the old and new position
  });
});

If you know that your polygons never have more then one path (inner rings) then you can just do this:

google.maps.event.addListener(poly1.getPath(), 'set_at', function(index, oldLatLng){
  var newLatLng = path.getAt(index);
});

Though I recommend the first one because you never know when a polygon with multiple paths might somehow sneak in.

What this doesn't seem to do is get you the position of the vertex as it's being dragged, the "set_at" event is only called when you drop the vertex in it's new position. Anyone find a way to get the position of the vertex while being dragged? — chrismarx, Mar 31 '17 at 18:20

Google Maps Polygon editing - get latlng position on mouseup

1 Answers1