title: How to track event changes to a polygon with Google Maps API
body: <p>I'm currently building a 'search an area' feature for a site we're working on. A bit like the one on <a href="http://www.rightmove.co.uk/draw-a-search.html" rel="nofollow noreferrer">Rightmove</a>.</p>
  <p>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.</p>
  <p>I've tried the Google Code docs for <a href="https://developers.google.com/maps/documentation/javascript/overlays#user_editable_shapes_events" rel="nofollow noreferrer">editing events</a>. And every time I try it out, I either get a message about 'set_at' not being possible or my object not being defined.</p>
  <p>I suppose the bit I know is wrong is <code>thePolygon</code> variable not being passed through to the new</p>
  <pre><code>google.maps.event.addListener(thePolygon, 'set_at', function() {
        // grab paths for infoWindow 
        grabPaths(thePath);
      });
  </code></pre>
  <p>But I don't know why. It's a global variable. Or is not?</p>
  <p><strong>So, the question is, how can I track the changes to the polygon to pass the updated coordinates through to my form?</strong></p>
  <p>All help is greatly appreciated.</p>
  <p>Here is the code I currently have:</p>
  <pre><code>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
  });
  </code></pre>