Untitled

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true">
</script>
 <script type="text/javascript">
        // Permette di inserire i vertici di un poligono con dei click
        // Con un doppio click all'interno del poligono vengono visulizzate le coordinate
        // dei vertici e l'area della regione all'iterno del poligono.
        // Con un doppio click su i vertici questi vengono eliminati
  var map;
  var infoWindow;
  var poligono;
  var flag=0;
  function initialize() {
      var myLatLng = new google.maps.LatLng(45.77351, 8.828105);
    var myOptions = {
      zoom: 17,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var bermudaTriangle;

    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);


    google.maps.event.addListener(map, 'click', aggiungiPunto);

    infowindow = new google.maps.InfoWindow();
}

function aggiungiPunto(event) {
    var nmark = 0;
    if (flag == 0) {
        var pathCoordinates = new google.maps.MVCArray();
        pathCoordinates.push(event.latLng);
        poligono = new google.maps.Polygon({
            paths: pathCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });
        poligono.setMap(map);
        google.maps.event.addListener(poligono, 'dblclick', showArrays);
        flag = 1;
    }
    else {
        var path = poligono.getPath();

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear
        //path.push(event.latLng);
        nmark = maxArea(path, event.latLng);
        path.insertAt(nmark, event.latLng);
    }
      var marker = new google.maps.Marker({
          position: event.latLng,
          map: map
      });
      marker.setTitle(event.latLng.toString());
      //google.maps.event.addListener(marker, 'dblclick', showArrays);
      google.maps.event.addListener(marker, 'dblclick', function () {
          //alert(marker.getTitle());
          removeVertice(marker.getTitle());
          marker.setMap(null);
          //map.removeOverlay(marker);
      });

  }
  function removeVertice(vertice) {
      var path = poligono.getPath();
      path.forEach(function (latLng, index) {
        if(latLng==vertice)
        {
            path.removeAt(index);
            return;
        }
      })
  }
  function showArrays(event) {

    // Since this Polygon only has one path, we can call getPath()
    // to return the MVCArray of LatLngs
    var vertices = poligono.getPath();

    var contentString = "<b>Vertici del poligono</b><br />";
    contentString += "Punto cliccato: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    vertices.forEach(function (latLng, index) {
        contentString += "<br />" + " [" + index + "] => " + latLng;
    });
   var area = google.maps.geometry.spherical.computeArea(vertices);
    contentString += "<br />" + " area==> " + area;
  // Replace our Info Window's content and position
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);

    infowindow.open(map);
}

function maxArea(vettore, coord) {
    var lung = vettore.length;
    var max = 0;
    var maxii=0;
    var area;
    for (var ii = 0; ii < lung; ii++) {
        area = getArea(vettore, coord, ii);
        if (area > max) {
            max = area;
            maxii = ii;
        }
    }
    return maxii;
}
function getArea(vettore, coord, i) {
    var appoggio = new google.maps.MVCArray();
    vettore.forEach(function (latLng, index) {
        if (index == i)
            appoggio.push(coord);
        appoggio.push(latLng);
    } )
    return  google.maps.geometry.spherical.computeArea(appoggio);
 }

</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>