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:
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?
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?
How do I attach an event to the polygon being pulled from the database so I can capture its vertices coordinates?
You can see my current code here: http://jsfiddle.net/FUUxz/ or below:
JS:
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,