Posted By

ginoplusio on 12/19/09


Tagged

google GoogleMap distance googlemaps v3 ruler


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

ginoplusio


Calculate distance on Google Map v3 with a ruler


 / Published in: JavaScript
 

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

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.

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

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: the_coder on April 18, 2010

"var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));" can be simplified to "var c = 2 * Math.asin(Math.sqrt(a));"

You need to login to post a comment.