Advanced Search

Calculate distance on Google Map v3 with a ruler

/ Published in: JavaScript
Save to your folder(s)
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. Look the link for a working demo.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. 	javascript ruler for google maps V3
  3.  
  4. 	by Giulio Pons. http://www.barattalo.it
  5. 	this function uses the label class from Marc Ridley Blog
  6.  
  7. */
  8. function addruler() {
  9.  
  10. 	var ruler1 = new google.maps.Marker({
  11. 		position: map.getCenter() ,
  12. 		map: map,
  13. 		draggable: true
  14. 	});
  15.  
  16. 	var ruler2 = new google.maps.Marker({
  17. 		position: map.getCenter() ,
  18. 		map: map,
  19. 		draggable: true
  20. 	});
  21. 	var ruler1label = new Label({ map: map });
  22. 	var ruler2label = new Label({ map: map });
  23. 	ruler1label.bindTo('position', ruler1, 'position');
  24. 	ruler2label.bindTo('position', ruler2, 'position');
  25.  
  26. 	var rulerpoly = new google.maps.Polyline({
  27. 		path: [ruler1.position, ruler2.position] ,
  28. 		strokeColor: "#FFFF00",
  29. 		strokeOpacity: .7,
  30. 		strokeWeight: 7
  31. 	});
  32. 	rulerpoly.setMap(map);
  33.  
  34. 	ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  35. 	ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  36.  
  37.  
  38. 	google.maps.event.addListener(ruler1, 'drag', function() {
  39. 		rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
  40. 		ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  41. 		ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  42. 	});
  43.  
  44. 	google.maps.event.addListener(ruler2, 'drag', function() {
  45. 		rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
  46. 		ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  47. 		ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
  48. 	});
  49.  
  50. }
  51.  
  52.  
  53. function distance(lat1,lon1,lat2,lon2) {
  54. 	var R = 6371; // km (change this constant to get miles)
  55. 	var dLat = (lat2-lat1) * Math.PI / 180;
  56. 	var dLon = (lon2-lon1) * Math.PI / 180; 
  57. 	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  58. 		Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
  59. 		Math.sin(dLon/2) * Math.sin(dLon/2); 
  60. 	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  61. 	var d = R * c;
  62. 	if (d>1) return Math.round(d)+"km";
  63. 	else if (d<=1) return Math.round(d*1000)+"m";
  64. 	return d;
  65. }

URL: http://www.barattalo.it/2009/12/19/ruler-for-google-maps-v3-to-measure-distance-on-map/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.