https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3

A mobile friendly measure tool for Google Maps JS API v3.
https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3

google-maps google-maps-api measure measure-area measure-distance measurement

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3
• Owner: zhenyanghua
• License: apache-2.0
• Created: 2017-03-05T14:32:32.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-08-31T13:41:27.000Z (over 1 year ago)
• Last Synced: 2025-04-17T13:31:15.127Z (18 days ago)
• Topics: google-maps, google-maps-api, measure, measure-area, measure-distance, measurement
• Language: JavaScript
• Homepage: https://zhenyanghua.github.io/MeasureTool-GoogleMaps-V3/
• Size: 1.53 MB
• Stars: 131
• Watchers: 8
• Forks: 80
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - zhenyanghua/MeasureTool-GoogleMaps-V3 - A mobile friendly measure tool for Google Maps JS API v3. (JavaScript)

README

        
# 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](https://zhenyanghua.github.com/MeasureTool-GoogleMaps-V3)

![demo screen shot](https://raw.githubusercontent.com/zhenyanghua/MeasureTool-GoogleMaps-V3/master/demo.jpg)

## User usage

1. To **start** measuring, *right click* the map and choose **Measure distance**.

1. *Left click* the map, and the measurement between the two locations will display. Keep clicking to **add** more measurement waypoints.

1. To **remove** a waypoint, *left click* on the waypoint *(the first point cannot be removed)*.

1. To **insert** a waypoint on the measurement line, click the line. Waypoints can be moved by *clicking and dragging* them.

1. When the *first* point and the *last* point are close enough, the **area** will display.

1. 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](https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3/blob/master/docs/CHANGES.md)

- [Developer Guide](https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3/blob/master/docs/GUIDE.md)

- [API Reference](https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3/blob/master/docs/REFERENCE.md)