GithubHelp home page GithubHelp logo

alexcheng1982 / google-maps-ruler Goto Github PK

View Code? Open in Web Editor NEW
4.0 4.0 5.0 27 KB

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

Home Page: http://alexcheng1982.github.io/google-maps-ruler/

License: MIT License

CSS 1.34% CoffeeScript 27.48% JavaScript 59.69% HTML 11.49%

google-maps-ruler's Introduction

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 People

Contributors

alexcheng1982 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

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

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.