alexcheng1982 / google-maps-ruler

A small JavaScript library to allow users to measure distance between multiple points on Google Maps.

Ruler of Google Maps

google-maps-ruler is a small JavaScript library to allow users to measure distance between points on Google Maps.

Install

Bower

Use bower install google-maps-ruler to install this package.

Download

Download from GitHub and include dist/google-maps-ruler.js or dist/google-maps-ruler.min.js in your app.

How to use

google-maps-ruler uses UMD, so it works in CommonJS, AMD and browser environments. For example, if the JavaScript file is included using <script> directly, it exposes a global object gmruler.

gmruler requires a google.maps.Map object to work with. After google.maps.Map is created, use gmruler.init() to initialize gmruler with the google.maps.Map object.

gmruler.init(map)

After gmruler is initialized with a google.maps.Map object, you can use add(name, options) method to add rulers to the map with name and options.

gmruler.add('myruler', {
  distanceUnit: 'mile'
})

You can add multiple rulers to the map by using add(name, options) method, but only one ruler is active at the same time. Newly added ruler is made active after creation. You can use getNames() to get a list of all rulers' names, then use activate(name) to activate a ruler.

Ruler can be removed by using remove(name) or removeAll().

User interactions

After a ruler is created, following user interactions are supported:

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

Configurations

The second argument of gmruler.bind function is an simple object for configuration. Configurations supported are:

• strokeColor - Color of the polyline connecting points, e.g. #ff0000.
• strokeWeight - Weight of the polyline connecting points, e.g. 2.
• distanceUnit - Unit for distance, can be mile or km. km is the default value.

Samples

Refer to sample folder for some examples.

Customisations

Style

Update CSS style gmruler-label.

google-maps-ruler's Issues

lines not visible

hi

first thanks for this module ;)

when i load my page the first time will all the scripts and init the ruler everything works fine, now i change page then return to the page where i draw my map (so i create a new map and reload the ruler too) i can add points, move them etc but polylines are not visibles :/ , an idear on why ?

no way to force redraw of the lines ? or how can i destroy the ruler objetc then reinit like if i was reloading the whole page ?

ps: possible to add a function to remove all lines and points at once ?

thanks

request: add the possibility to add more than 1 ruler to the map

hello

new request :) everything is in the title ...

think it s possible?

thanks

Issue: dragging label with IE 10

Thanks for this small util library, it really fit the need for my project well. However I found it had some issues with Internet Explorer. When I tried to move the start label in Internet Explorer 10, the whole map will be moving making it impossible to actually add another point. Is it possible to fix this issue? Thanks!