Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate the area of a polygon

I need to get the area of a polygon in my map. I looked for an example of new google.maps.geometry.spherical.computeArea, but I can't make it work, and I don't know why.

function dibuV(area){
  var i;
  var a = new Array();
  for(i=0; i<area.length; i++){
    var uno = area[i].split(",");
    a[i] = new google.maps.LatLng(uno[0],uno[1]);
  }
  poligon = new google.maps.Polygon({
    paths: a,
    strokeColor: "#22B14C",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#22B14C",  
    fillOpacity: 0.35  
  })  
  poligon.setMap(map);//until here is ok 
  var z = new google.maps.geometry.spherical.computeArea(poligon.getPath());
  alert(z); //this is not working
}
like image 583
Hyper Avatar asked May 26 '12 11:05

Hyper


2 Answers

The error that your code is giving you: google.maps.geometry is undefined

From the Google Maps v3 API documentation, the geometry functions are part of a library that is not loaded by default:

The concepts within this document refer to features only available within the google.maps.geometry library. This library is not loaded by default when you load the Maps Javascript API but must be explicitly specified through use of a libraries bootstrap parameter.

In order to load and use the geometry funcitons within your page, you need to inform Google that you will be using the geometry library, by adding it to your initial Google API call by including libraries=geometry:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

This will then load the geometry library and your z variable will contain an object.

Test page with working code:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
    var map;
    function initialize()
    {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<script>
function test()
{
var arr = new Array()
arr.push('51.5001524,-0.1262362');
arr.push('52.5001524,-1.1262362');
arr.push('53.5001524,-2.1262362');
arr.push('54.5001524,-3.1262362');
dibuV(arr);
}
function dibuV(area)
{
var a = new Array();

for(var i=0; i<area.length; i++)
{
    var uno = area[i].split(",");
    a[i] = new google.maps.LatLng(uno[0],uno[1]);
}

poligon = new google.maps.Polygon({
    paths: a,
    strokeColor: "#22B14C",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#22B14C",   
    fillOpacity: 0.35   
})  

poligon.setMap(map);//until here is ok 
var z = new google.maps.geometry.spherical.computeArea(poligon.getPath());
alert(z); //this is not working
}
</script>
</head>
<body onload="test();">
    <div id="map_canvas"></div>
</body>
</html>
like image 158
staticbeast Avatar answered Oct 05 '22 06:10

staticbeast


This is not working because you are using "new" for use the computeArea method. Use "google.maps.geometry.spherical.computeArea" without "new". Example:

var z = google.maps.geometry.spherical.computeArea(myPolyline.getPath().getArray());
alert(z);

This will work.

like image 32
Leonardo Augusto Balzaretti Avatar answered Oct 05 '22 05:10

Leonardo Augusto Balzaretti