Reputation: 179
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?
Upvotes: 0
Views: 2045
Reputation: 1096
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.
Upvotes: 2