JavaScript To Measure Distance On Google Maps – Google Maps Ruler

Category: Javascript | December 21, 2015
Views Total:3,803 views
Official Page:Go to website
Last Update:December 21, 2015


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="//"></script>
<script src="dist/google-maps-ruler.js"></script>

Create a container to place the Google Map.

<div id="example">

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

You Might Be Interested In:

3 thoughts on “JavaScript To Measure Distance On Google Maps – Google Maps Ruler

  1. robin

    thanks for your script, awesome.

    can i change the ‘start’ label to a pin marker?


Leave a Reply