title: Pre-loading an editable drawingmanager polygon in Google Maps
body: <p>I'm writing an application that will allow users to draw geographical polygon "zones" using the Google Maps API and save them in a database. There can only be one zone per user so I'm limiting this by switching to the hand and hiding drawing tools on overlaycomplete. After overlaycomplete, I am able to hit save and it saves in my database just fine - so this bit works. Further, I am able to retrieve the polygon from the database and display it as an editable polygon on the map. The issues I am having though are:</p>
  
  <ol>
  <li><p>When trying to drag the points of the inserted polygon, they get "stuck" to the mouse and never release. My guess is some sort of mouseup issue?</p></li>
  <li><p>Despite a polygon already existing, I'm still able to draw another one. Should I just hide the drawing tools in the beginning if a polygon is being loaded from the db?</p></li>
  <li><p>How do I attach an event to the polygon being pulled from the database so I can capture its vertices coordinates?</p></li>
  </ol>
  
  <p>You can see my current code here: <a href="http://jsfiddle.net/FUUxz/" rel="noreferrer">http://jsfiddle.net/FUUxz/</a> or below:</p>
  
  <p>JS:</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,fillColor:'#ff0000',strokeColor:'#ff0000',strokeWeight:2}
              });
              drawingManager.setMap(map);
  
              google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
                  var newShape = event.overlay;
                  newShape.type = event.type;
                  if (event.type==google.maps.drawing.OverlayType.POLYGON) {
                          overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
                      }
  
              });
                  var polygon_plan_0 = [
                      new google.maps.LatLng(40.9534555976547, -74.0871620178223)
                      ,
                      new google.maps.LatLng(40.9410084152192, -74.0948867797852)
                      ,
                      new google.maps.LatLng(40.9411380854622, -74.1165161132812)
                      ,
                      new google.maps.LatLng(40.9490474888751, -74.1221809387207)
                      ,
                      new google.maps.LatLng(40.955140973234, -74.124584197998)
                      ,
                      new google.maps.LatLng(40.9604561066844, -74.1153144836426)
                      ,
                      new google.maps.LatLng(40.9534555976547, -74.0871620178223)
                      ];
                      lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));
  
                      lat_longs.push(new google.maps.LatLng(40.9410084152192, -74.0948867797852));
  
                      lat_longs.push(new google.maps.LatLng(40.9411380854622, -74.1165161132812));
  
                      lat_longs.push(new google.maps.LatLng(40.9490474888751, -74.1221809387207));
  
                      lat_longs.push(new google.maps.LatLng(40.955140973234, -74.124584197998));
  
                      lat_longs.push(new google.maps.LatLng(40.9604561066844, -74.1153144836426));
  
                      lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));
  
              var polygon_0 = new google.maps.Polygon({
                  path: polygon_plan_0,
  
                  strokeColor: "#ff0000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#ff0000",
                  fillOpacity: 0.3,
                  editable: true
              });
  
              polygon_0.setMap(map);
  
  
              google.maps.event.addListener(polygon_0, "mouseup", function(event) {
                  overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
              });
  
  
              }
  
  
          function createMarker(markerOptions) {
              var marker = new google.maps.Marker(markerOptions);
              markers.push(marker);
              lat_longs.push(marker.getPosition());
              return marker;
          }
  
  initialize();
  
  function overlayClickListener(overlay) {
      google.maps.event.addListener(overlay, "mouseup", function(event){
          $('#polygon').val(overlay.getPath().getArray());
      });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map_canvas" style="width:100%; height:450px;"&gt;&lt;/div&gt;
  &lt;form action="http://garbagedayreminder.com/test/save" method="post" accept-charset="utf-8" id="map_form"&gt;
  &lt;input type="text" name="polygon" value="" id="polygon"  /&gt;
  &lt;input type="submit" name="save" value="Save!" id="save"  /&gt;
  &lt;/form&gt;
  </code></pre>