JavaScript To Measure Distance On Google Maps – Google Maps Ruler

Google Maps Ruler is a lightweight and UMD compatible JavaScript library which enables your users to draw a line on a map and measure the distance between two or more points using Google Maps JavaScript library API.

How to use it:

Load Google Maps JS API together with the google-maps-ruler.css and google-maps-ruler.js in the html page.

<link href="google-maps-ruler.css" rel="stylesheet">
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="dist/google-maps-ruler.js"></script>

Create a container to place the Google Map.

<div id="example">
</div>

Embed a Google map into the container and active the ruler.

function initialize() {
  var mapOptions = {
    center: { lat: 34.0522342, lng: -118.2436849},
    zoom: 8
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  gmruler.init(map);
  gmruler.add('default', {
    distanceUnit: 'mile'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

That’s it. Right click to add a new point. Double-click on a point to remove it. Drag the point label to change its position.

Available options.

gmruler.add('myruler', {
  // Unit for distance, can be mile or km
  distanceUnit: 'mile',
  // Color of the polyline connecting points
  strokeColor: '#ff0000',
  // Weight of the polyline connecting points
  strokeWeight: 2
  
})