Google Maps API how to get the click listener to recognize drags

Question

I'm trying to create an editable polygon in google maps that on change, returns the Geo Coordinates of the polygon. At the following JS Fiddle, you'll notice if you create a triangle, and then drag one of the points, the event listener doesn't pick up the click; but of course, if you click the point again it will recognize it.

Is there any way to add an event listener to google maps for "drag" events of the polygon?

http://jsfiddle.net/mclean25/pnc4ttb0/5/

HTML

<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea height="100" wid name="vertices" value="" id="vertices"  ></textarea>

Javascript

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
     var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP}
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
            polygonOptions: {
                editable: true
            }

    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
        var newShape = event.overlay;
        newShape.type = event.type;
    });

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
        overlayClickListener(event.overlay);
        var values = event.overlay.getPath().getArray();
        for (var i = 0; i < values.length; i++){
            //console.log("lat:", values[i].lat());
            //console.log("lng:", values[i].lng());
        }
        $('#vertices').val(event.overlay.getPath().getArray());
    });
}

function overlayClickListener(overlay) {
  google.maps.event.addDomListener(overlay, "click", function(event){
        console.log("Changing this guy!");
    $('#vertices').val(overlay.getPath().getArray());
  });

}
initialize();

$(function(){
    $('#save').click(function(){

        //iterate polygon vertices?
    });
});

What do you want exactly, do you want to drag polygons? or click on its markers? or drag on its makers? — Parag Bhayani, May 22 '16 at 07:49
Yes, drag the polygon and for the listener to recognize the change. From there I was going to record the new lat/lng of each point. — Alex McLean, May 22 '16 at 07:55

score 2 · Accepted Answer · edited May 23 '17 at 10:28

If you want to capture changes in the vertices of the polygon, you need to set event listeners on the path of the polygon. For simple polygons (with only one path, no holes, the only ones that are easy to create with the drawing manager), this will work:

var overlay;
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
  $('#vertices').val(event.overlay.getPath().getArray());
  overlay = event.overlay;  // save a reference to the polygon
  // new vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates); 
  // move vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates); 
});
function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

Related question: Event handler for editing a Google Maps Polyline?

code snippet:

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
var overlay;


function initialize() {
  var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    polygonOptions: {
      editable: true
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
  });

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    google.maps.event.addListener(event.overlay, 'click', function(evt) {
      overlay = this;
      getCoordinates();
    })

    $('#vertices').val(event.overlay.getPath().getArray());
    overlay = event.overlay;
    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'remove_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates);
  });
}

function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

function overlayClickListener(overlay) {
  google.maps.event.addListener(overlay, "click", function(event) {
    console.log("Changing this guy!");
    overlay = this;
    $('#vertices').val(overlay.getPath().getArray());
  });
}
initialize();

$(function() {
  $('#save').click(function() {

    //iterate polygon vertices?
  });
});

#vertices {
  height: 100px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea name="vertices" value="" id="vertices"></textarea>

Matej P. · Answer 2 · 2016-05-22T10:23:16.637

1

There is a drag event on polygon. It should be attached using google.maps.event.addListener not google.maps.event.addDomListener. More about polygon events here in the docs (scroll lower to Events).

This works:

function overlayClickListener(overlay) {
    google.maps.event.addListener(overlay, "drag", function(event){
        console.log("Changing this guy!");
        $('#vertices').val(overlay.getPath().getArray());
    });
}

edited May 22 '16 at 10:23

answered May 22 '16 at 10:17

Matej P.

5,303
1
28
44

Are you sure? I added it to the fiddle and it doesn't do anything. – Alex McLean May 22 '16 at 16:55
Sorry, your sentence confused me "Is there any way to add an event listener to google maps for "drag" events of the polygon?". I thought you meant dragging of the whole polygon, not the points. My event get's fired if you draw a polygon with `draggable: true` attribute and then you start dragging it. – Matej P. May 22 '16 at 19:23

Google Maps API how to get the click listener to recognize drags

2 Answers2

Linked