title: Extract drawingManager polygon path Google Maps on click
body: <p>I have a Google map with drawing manager enabled where a user can draw a polygon and save it to my db. I added an event listener to the drawingManager object for the overlaycomplete event. When the event is fired, the coordinates of the polygon are written to a hidden field. This works great - the only problem being that if the individual vertices are dragged/changed after that point the event isn't fired. I need to either update the field on(any)change or iterate through the polygon vertices when the user hits submit and write them to the hidden field. I can't quite figure out how to get this to work, but you can see what I have so far here: <a href="http://jsfiddle.net/5Y4WT/21/" rel="noreferrer">http://jsfiddle.net/5Y4WT/21/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="map_canvas" style="width:500px; height:450px;"&gt;&lt;/div&gt;
  &lt;form method="post" accept-charset="utf-8" id="map_form"&gt;
    &lt;input type="text" name="vertices" value="" id="vertices"  /&gt;
    &lt;input type="button" name="save" value="Save!" id="save"  /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>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) {
                  $('#vertices').val(event.overlay.getPath().getArray());
              });
          }
   initialize();
  
  $(function(){
      $('#save').click(function(){
          //iterate polygon vertices?
      });
  });
  </code></pre>