I’ve made a ruler to measure distances on a Google Map V3. The file Ruler.js contains a two function: one to calculate the distance between two points on the map with their position expressed in decimal degrees, and one function that add the ruler. Ther “ruler” is composed with two markers, a poly and two labels which show the distance. The labels are placed on the map with the Labels.js class from Marc Ridley, downloaded from his blog.
Here is the link to the demo and here is the link for download it.
Here is the code for ruler.js addruler function:
function addruler() {
ruler1 = new google.maps.Marker({
position: map.getCenter() ,
map: map,
draggable: true
});
ruler2 = new google.maps.Marker({
position: map.getCenter() ,
map: map,
draggable: true
});
var ruler1label = new Label({ map: map });
var ruler2label = new Label({ map: map });
ruler1label.bindTo('position', ruler1, 'position');
ruler2label.bindTo('position', ruler2, 'position');
rulerpoly = new google.maps.Polyline({
path: [ruler1.position, ruler2.position] ,
strokeColor: "#FFFF00",
strokeOpacity: .7,
strokeWeight: 8
});
rulerpoly.setMap(map);
ruler1label.set('text',"0m");
ruler2label.set('text',"0m");
google.maps.event.addListener(ruler1, 'drag', function() {
rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
google.maps.event.addListener(ruler2, 'drag', function() {
rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
}
And this is the function to calculate distances:
function distance(lat1,lon1,lat2,lon2) {
var R = 6371; // km (change this constant to get miles)
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
if (d>1) return Math.round(d)+"km";
else if (d<=1) return Math.round(d*1000)+"m";
return d;
}
Related posts:
April 18th, 2010 8:56 am
“var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));” can be simplified to “var c = 2 * Math.asin(Math.sqrt(a));”
June 2nd, 2010 3:58 pm
True – what Bob says
July 11th, 2010 6:34 am
Thanks a lot man! You saved my life.
Just one little thing, there is a very little bug in labels.js (I know you didn’t write it)
On line 44:
maps.google.event.removeListener(this.listeners_[i]);
this should be:
google.maps.event.removeListener(this.listeners_[i]);
Regards
Adnan
July 14th, 2010 8:59 pm
thanks. will visit again
on a learning curve.
July 14th, 2010 10:31 pm
Right. I’ve fixed it. Thank you.
February 5th, 2011 3:14 pm
Excellent. Good job: my congratulation.
It would useful also to have a couple of additional features:
1)replace the couple of labels with a single label placed in the middle of the ruler line, alway on top (I tried using zIndex with no success? any idea ?)
2)the rule line binded to the objects you’re measuring the distance. Suppose we would like to continously track the distance changes among a couple of moving markers (i.e. vehicles).
PG Ornolio
May 24th, 2011 1:10 pm
Hello,
If I attribute an icon to the rulers then the behaviour changes !
How to change the standard icons ?
Thank you.
July 15th, 2011 10:35 am
Really good and handy code.
If i wanted to change the distance to miles would this be correct?
function distance(lat1,lon1,lat2,lon2) {
var R = 3959; // km (change this constant to get miles. 3959 for m, 6371 for km also change 1000 to 1760)
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
if (d>1) return Math.round(d)+”miles”;
else if (d<=1) return Math.round(d*1760)+"yards";
return d;
Regards
Pani
August 16th, 2011 2:30 pm
How do you remove a ruler?
September 5th, 2011 8:04 pm
how do you remove a ruler,,, can you helps us
September 27th, 2011 8:33 pm
Very nice, i also though want to know how to remove the ruler ?
September 29th, 2011 1:01 pm
I changed the script a bit, and now you can remove the ruler. Simply pass a ‘true’ or ‘false’ to the addruler call
var ruler1;
var ruler2;
var ruler1label;
var ruler2label;
var rulerpoly;
function addruler(remove) {
if (remove) {
google.maps.event.clearListeners(ruler1, ‘drag’);
ruler1.setMap(null);
google.maps.event.clearListeners(ruler2, ‘drag’);
ruler2.setMap(null);
ruler1label.setMap(null);
ruler2label.setMap(null);
rulerpoly.setMap(null);
}
else {
ruler1 = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: ‘Starting Point’,
draggable: true
});
ruler2 = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: ‘End Point’,
draggable: true
});
ruler1label = new Label({ map: map });
ruler2label = new Label({ map: map });
ruler1label.bindTo(‘position’, ruler1, ‘position’);
ruler2label.bindTo(‘position’, ruler2, ‘position’);
rulerpoly = new google.maps.Polyline({
path: [ruler1.position, ruler2.position],
strokeColor: “#FFFF00″,
strokeOpacity: .7,
strokeWeight: 7
});
rulerpoly.setMap(map);
ruler1label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
google.maps.event.addListener(ruler1, ‘drag’, function() {
rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
ruler1label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
google.maps.event.addListener(ruler2, ‘drag’, function() {
rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
ruler1label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
ruler2label.set(‘text’, distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
});
}
}
function distance(lat1,lon1,lat2,lon2) {
var R = 6371; // km (change this constant to get miles)
var dLat = (lat2-lat1) * Math.PI / 180;
var dLon = (lon2-lon1) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
if (d>1) return Math.round(d)+”km”;
else if (d<=1) return Math.round(d*1000)+"m";
return d;
}
September 29th, 2011 1:08 pm
Sorry, I lied. It works when i test it locally, but does not work when i put it on the live server :(
September 29th, 2011 1:11 pm
I am a dumb ass – It still had the old version in cache, so make sure you clear the cache so it gets the new js file, then it works :)
November 4th, 2011 11:28 pm
thanks a lot