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:

  1. 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?

  2. 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?

  3. 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,
             
Edit
Report