Google Map Polygon Distance in Meters

Question

How can I achieve this using the google map api?

http://i59.tinypic.com/6dzb88.jpg

The meters on each side.

If I right click on google maps distance, I can make something like this: http://i57.tinypic.com/21e7w1.jpg

Basically, I want the polygons I am drawing to look like the first or second image. (I need the labels) Is this possible?

Answer 1

I am not sure if I understand your question correctly... But distance between two longitude/latitude points on a sphere can be calculated using http://en.wikipedia.org/wiki/Haversine_formula

Javascript implementation

rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) {
  var R = 6371; // earth's mean radius in km
  var dLat  = rad(p2.lat() - p1.lat());
  var dLong = rad(p2.lng() - p1.lng());

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;

  return d.toFixed(3);
}

I think there is also an implementation in the google maps api already though

google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);

If you are having trouble drawing the polygons take a look at this here google maps example https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

You would probably need to do some custom text overlays for the markers. Maybe using the the MapLabel class from: https://code.google.com/p/google-maps-utility-library-v3/ :

var mapLabel = new MapLabel({
           text: 'Test',
           position: new google.maps.LatLng(50,50),
           map: map,
           fontSize: 20,
           align: 'right'
         });

Or you could simply create some custom polygons and draw them. Might be a bit of work for all numbers.