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 t

Answer 1

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;
}