Estrai disegno Percorso poligono manager Google Maps al click

Question

Ho una mappa di Google con il gestore disegni abilitato dove un utente può disegnare un poligono e salvarlo sul mio db. Ho aggiunto un listener di eventi all'oggetto drawingManager per l'evento overlaycomplete. Quando l'evento viene attivato, le coordinate del poligono vengono scritte in un campo nascosto. Funziona alla grande - l'unico problema è che se i singoli vertici vengono trascinati/modificati dopo quel punto l'evento non viene attivato. Ho bisogno di aggiornare il campo su (qualsiasi) modifica o iterare attraverso i vertici del poligono quando l'utente preme invia e li scrive nel campo nascosto. Non riesco a capire come farlo funzionare, ma si può vedere quello che ho finora qui: http://jsfiddle.net/5Y4WT/21/

HTML:

<div id="map_canvas" style="width:500px; height:450px;"></div> 
<form method="post" accept-charset="utf-8" id="map_form"> 
    <input type="text" name="vertices" value="" id="vertices" /> 
    <input type="button" name="save" value="Save!" id="save" /> 
</form> 

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) { 
       $('#vertices').val(event.overlay.getPath().getArray()); 
      }); 
     } 
initialize(); 

$(function(){ 
    $('#save').click(function(){ 
     //iterate polygon vertices? 
    }); 
}); 

Answer 1

Capito !!

ho aggiunto la funzione overlayClickListener:

function overlayClickListener(overlay) { 
    google.maps.event.addListener(overlay, "mouseup", function(event){ 
     $('#vertices').val(overlay.getPath().getArray()); 
    }); 
} 

e attaccato alla sovrapposizione sulla overlaycomplete:

google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){ 
       overlayClickListener(event.overlay); 
       $('#vertices').val(event.overlay.getPath().getArray()); 
      }); 

Per la soluzione in azione, vedere qui: http://jsfiddle.net/rvsMH/1/