var poly, map; var markers = []; var path = new google.maps.MVCArray; function initialize() { var india = new google.maps.LatLng(22.7964,79.5410); map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: india, mapTypeId: google.maps.MapTypeId.ROADMAP }); poly = new google.maps.Polygon( { strokeWeight: 1, fillColor: '#3B00FF', strokeColor: '#3B00FF', geodesic: true }); poly.setMap(map); poly.setPaths(new google.maps.MVCArray([path])); google.maps.event.addListener(map, 'click', addPoint); } function addPoint(event) { path.insertAt(path.length, event.latLng); var marker = new google.maps.Marker( { position: event.latLng, map: map, draggable: true }); markers.push(marker); marker.setTitle("#" + path.length); google.maps.event.addListener(marker, 'click', function() { marker.setMap(null); for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i); markers.splice(i, 1); path.removeAt(i); }); google.maps.event.addListener(marker, 'dragend', function() { for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i); path.setAt(i, marker.getPosition()); }); }
<html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> </script> </head> <body onload="initialize()"> <div id="map" style="width: 530px; height: 230px;"></div> </body> </html>