Comments on: Ruler for Google Maps v3 to measure distance on map

By: Francisco

Francisco — Fri, 04 Nov 2011 22:28:44 +0000

thanks a lot

By: Marius

Marius — Thu, 29 Sep 2011 12:11:17 +0000

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 :)

By: Marius

Marius — Thu, 29 Sep 2011 12:08:18 +0000

Sorry, I lied. It works when i test it locally, but does not work when i put it on the live server :(

By: Marius

Marius — Thu, 29 Sep 2011 12:01:34 +0000

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;
}

By: Marius

Marius — Tue, 27 Sep 2011 19:33:21 +0000

Very nice, i also though want to know how to remove the ruler ?

By: Francisco

Francisco — Mon, 05 Sep 2011 19:04:37 +0000

how do you remove a ruler,,, can you helps us

By: Web Design Huntersville

Web Design Huntersville — Tue, 16 Aug 2011 13:30:53 +0000

How do you remove a ruler?

By: pani100

pani100 — Fri, 15 Jul 2011 09:35:10 +0000

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

By: phicarre

phicarre — Tue, 24 May 2011 12:10:42 +0000

Hello,
If I attribute an icon to the rulers then the behaviour changes !
How to change the standard icons ?

Thank you.

By: piero

piero — Sat, 05 Feb 2011 14:14:14 +0000

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