Measurement Tool for Google Maps JS API V3

A mobile friendly measure tool for Google Maps JS API v3.

Features

• Mobile friendly with native browser touch events support.
• Measure length and area with segment details.
• Support imperial, metric and nautical units.
• Support multiple languages (PR is welcome for more languages).
• color inversion for the dark/light background
• Built-in UI for measurement for convenience.
• API for more customizations.

Demo

Visit demo page

User usage

1. To start measuring, right click the map and choose Measure distance.
2. Left click the map, and the measurement between the two locations will display. Keep clicking to add more measurement waypoints.
3. To remove a waypoint, left click on the waypoint (the first point cannot be removed).
4. To insert a waypoint on the measurement line, click the line. Waypoints can be moved by clicking and dragging them.
5. When the first point and the last point are close enough, the area will display.
6. To end measuring, right click the map and choose Clear measurement.

Browser Compatibility

• Support various latest versions of modern browsers and IE 11.
  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE11
  • iOS Chrome
  • iOS Safari

Documentations

• Change List
• Developer Guide
• API Reference