Geodesic Draggable Onclick Polygon

by Alex Azuero

HTML

<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>

JavaScript

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());
    });
}