google-maps-ruler
is a small JavaScript library to allow users to measure distance between points on Google Maps.
Use bower install google-maps-ruler
to install this package.
Download from GitHub and include dist/google-maps-ruler.js
or dist/google-maps-ruler.min.js
in your app.
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()
.
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.
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 bemile
orkm
.km
is the default value.
Refer to sample
folder for some examples.
Update CSS style gmruler-label
.