How to track event changes to a polygon with Google Maps API

google-maps, google-maps-api-3, javascript, polygon

Solution

these events are defined for MVCArray, a polyline is not a MVCArray. You must observe the events for the `path` of the polyline(which is a MVCArray) instead. Furthermore you can't add a listener to an object that isn't created yet. The polygon is not available before `polygoncomplete`, so you must add the listeners inside the polygoncomplete-callback:

google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {

  // complete functions

  google.maps.event.addListener(thePath, 'set_at', function() {
    // complete functions
  });

  google.maps.event.addListener(thePath, 'insert_at', function() {
    // complete functions
  });

});

Problem

I'm currently building a 'search an area' feature for a site we're working on. A bit like the one on Rightmove. I've got everything up and running except the ability to track event changes to a polygon (the setting of new points and altering existing ones). I need to be able to post the coordinates to the form for submission. I've tried the Google Code docs for editing events. And every time I try it out, I either get a message about 'set_at' not being possible or my object not being defined. I suppose the bit I know is wrong is `thePolygon` variable not being passed through to the new ``` google.maps.event.addListener(thePolygon, 'set_at', function() { // grab paths for infoWindow grabPaths(thePath); }); ``` But I don't know why. It's a global variable. Or is not? So, the question is, how can I track the changes to the polygon to pass the updated coordinates through to my form? All help is greatly appreciated. Here is the code I currently have: ``` var mapOptions = { // options }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, drawingControl: false, polygonOptions: { // drawing options } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { // complete functions }); google.maps.event.addListener(thePolygon, 'set_at', function() { // complete functions }); google.maps.event.addListener(thePolygon, 'insert_at', function() { // complete functions }); ```

Original source

Related problems