7

I'm trying to implement "Measure Distance" in google maps v3, something like what we can do in Google Maps Web.

Measure Distance

I wonder if there is a library that implmente this as a drawingMode of DrawingManager.

José Ramírez
  • 369
  • 4
  • 15

2 Answers2

11

You can now use this MeasureTool library for Google Maps JavaScript API v3 to do similar to what Google Maps offers.

Measurement tool for Google Maps API - project page

Here is a live demo.

Downhillski
  • 2,555
  • 2
  • 27
  • 39
  • 2
    You should add a disclaimer telling that you're the author. Just to avoid someone saying you're self-promoting your tool. Beautiful code, by the way. Cleanest usage of ES6 I've seen in a while. – ffflabs Oct 01 '17 at 22:03
  • Are they the author? – ADJenks Jan 05 '22 at 00:11
2

Here's an example I found of a simple ruler that measures distance between two markers:

http://www.barattalo.it/measure-distance-google-maps

The source code is available via a link on that page.

I hope to use the same basic idea in my own Topographic Maps to drag out a series of markers, then use the resulting PolyLine to draw an elevation profile, etc. I'll post a reference to my code here if I'm successful.

That said, since this "Measure distance" UI has been part of the standard desktop Google Maps since July 2014, I would hope that the Google team might share it via the published Google Maps API soon, simplifying our work (not to mention standardizing the UI for such user drawn paths).

FYI,

Chris

Chris Schneider
  • 21
  • 1
  • Here's [another example](http://exploregooglemaps.blogspot.com.br/2012/02/measuring-distance-with-markers.html) by Heitor Chang supporting multiple points (essentially an attempt to reproduce the Distance Measurement tool after an early version was released by Google Labs). – Chris Schneider May 29 '15 at 17:01
  • You should probably also review [this post](http://stackoverflow.com/questions/23893027/capture-google-maps-polyline-on-click-per-start-end/23893147#23893147). – Chris Schneider May 29 '15 at 17:11
  • Sean Kendle's [fiddle](http://jsfiddle.net/8Xqaw/12/) provides a decent solution to your problem (including draggable markers), though (again) without the standard look & feel of Google's own Measure distance tool. – Chris Schneider May 29 '15 at 18:26