zhenyanghua / measuretool-googlemaps-v3

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

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

measuretool-googlemaps-v3's Issues

Multilanguage support

Multilanguage support or possibilities to translate expressions to custom language would be great!

I am using it in a project which language is German or French.

Context menu isn't visible when map is in full screen mode

This can be reproduced on the example page:

1. Remove the instructions div since it blocks the full screen button
2. Click the full screen button
3. Right-click on the map - context menu will not be visible
4. Exit full screen - context menu will be visible

I tried setting the z-index on .measure-tool-context-menu to a high value but that doesn't seem to solve the issue.

measure_end Listener

Im not sure if this is an issue or the intended use.

The measure_end listener is only trigged when you clear measurements. I expected it to trigger when you complete a drawing area.

Currently when you finish drawing an area on the map the calculated area is written on the map. At this same point I need to trigger it to populate a text input with the calculated area?

is this an issue? if so is it possible to add another listener? there is obviously a trigger which writes the calculated area on the map.

Demo does not work

Hi there, it seems something is wrong with the demo. It worked last week, but now right-clicking appears to do nothing.

Thanks!

Need a new unit - Acre

Hi,
Is it possible to display area in "Acre" unit?

User should be able to use custom ui to bind the start and stop measurement methods

• Refactor start and stop measuring methods to public methods so that users can bind widget tasks to their own UI.

• Extract the current context menu as a default option for users to use without a UI.

I have a question, how can i open info window like google map normal when i use this API?

I have a question, how can i open info window like google map normal when i use this API ? When i use your API, the mouse always hover and can't open info window anywhere, like bus stop, shop,..

zIndex

The best option is to specify zIndex of the entire ruler when defining, like this:

measureTool = new MeasureTool(map, {
        //contextMenu: false,
        showSegmentLength: true,
        tooltip: false,
        unit: MeasureTool.UnitTypeId.METRIC,
        zIndex: 100,
});

IE 11 slide map bug

Hello again.

I found a bug in IE11 : when you measure some length, then try to slide the map to the east (seeing more west) ; the more you slide, the more the east side of the map disappears.

I made you a plnkr with support for IE11 : https://plnkr.co/PtjERAwbFRU5B1g2RsAY

I had to use some Object.assign() polyfill :

if (typeof Object.assign != 'function') {
      Object.assign = function(target) {
        'use strict';
        if (target == null) {
          throw new TypeError('Cannot convert undefined or null to object');
        }
    
        target = Object(target);
        for (var index = 1; index < arguments.length; index++) {
          var source = arguments[index];
          if (source != null) {
            for (var key in source) {
              if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
              }
            }
          }
        }
        return target;
      };
}

(sorry for the big copypaste of Measuretool.js, the <script src=""> inclusion did not seem to work in plnkr)

Implement getters for all options.

getters for the available options.

Measure Tool does not work after Clear Measurement

I can duplicate this at http://zhenyanghua.github.io/google-maps/measure-tool/

• Create a distance measurement
• Right click and clear measurement
• Try to measure distance again - the tool does not respond.

Any way to work around?

Implement getters for segments and points

let measureTool = new MeasureTool(..);

// user draw ...

measureTool.getPoints(); // return [{lat: 10, lng: 10}, {lat: 20, lng : 20} ...];

There are 3 reasons for this:

1. Using this method I don't have to get the MeasureResult only when user trigger events (measure_start, measure_end, measure_change).

2. Even though I've got the MeasureResult, using MeasureResult I have to parse the start_location and end_location of every segments to get the points. And If I simply push them (start_location and end_location) into an array, I would have to do the deduplication work (as every two adjacent segments will have at least one same point ), which is kind of annoying.

3. The new feature in v0.3.0 allow user to pass an array of points to start(), like

`measureTool.start([{lat: 47.94796, lng: -116.70797}, {lat: 47.95028, lng: -116.69907}])`

Originally posted by @profileCaren in #31 (comment)

Create Tooltip

• Create a tooltip with instructions on how to use the widget.

Fix unit change caused multiple times of trigger of `measure_change` event

currently, measure_change event is triggered three times when the unit is changed, this should not happen.

How to change the color and make it bold by default of the measurement text

Hi,

How to customize the distance text color and make it by default bold in all measurement. is there any settings available.?

thanks
nishar

An asynchronous start() problem

I notice that measureTool.start(initialPoints) method is asynchronous, which means that If I write code like this:

// say, there are 10 points in array `initialPoints`, with total length 1000m
measureTool.start(initialPoints);
console.log(measureTool.length);  // 0

I will not get what I want.

Can you make start() return a promise ?
like this:

measureTool.start(initialPoints).then ((tool)=>{ console.log(tool.length) })

Zoom control

When I drag the "white circle" then the +- zoom control of the map disappear. You can reproduce this problem with your demo.

http://zhenyanghua.github.io/google-maps/measure-tool/

example - right click event failling

1-) To start measuring, right click the map and choose “Measure distance”.
MeasureTool.min.js:1 Uncaught TypeError: Cannot read property 'fromLatLngToContainerPixel' of undefined
at Hg. (MeasureTool.min.js:1)
at Object.trigger (js?key=AIzaSyBTdH3AFSWLD3SrgbNqTGoRsg3U6W0qAAg&libraries=geometry&callback=initMap:118)
at fy (map.js:31)
at cy (map.js:29)
at Object.jb (map.js:28)
at Nn..m.Ka (common.js:177)
at In..m.Ka (common.js:176)
at HTMLDocument.D._.Un.Oa (common.js:76)

Nautical Miles

Hi.

I've added a NAUTICAL type locally, that extends the IMPERIAL and METRIC types, so that nautical miles can be used measurement units.

I need this to be able to use your tool. Can I create a branch to push this to for you to pull? Or is it something you could add quickly. It's just a few lines of code.

Thanks, Steve.

After close a Area in drawing the tool of zoom less and more are being disabled

Start map..

• Start drawing

• See a tool of zoom now is enabled
  

• Close a area
  

• See a tool of zoom now is disabled

How i fix this?

the webAPP is slow after installing the package (caused by CSS BLOB files)

I noticed that after installing the package the webAPP slows down at startup.
Analyzing the behavior through the tools provided by the browser I noticed that 3 BLOB files are created. They are 3 CSS files (adding up the CSS classes are about 10). The problem is that it takes 5 to 7 seconds to process these files. Is it possible to disable the creation of these 3 BLOB files ?

[Question] How can I fill the polygon shapes with a color?

When a polygon is drawn, I'd like to have its content of a certain color, instead of transparent.

Is this something doable?

MeasureTool disappears after zooming

• Go to http://zhenyanghua.github.io/google-maps/measure-tool/
• Add measurement line
• Zoom
• Measurement line is gone

Also, I can't add a measurement line after clearing a previous measurement line. I assume these are probably two manifestations of the same bug.

Prevent new points change the end of route

When you pass in an array of points when starting measurement, it would be great to have an option to prevent changing the last point of the route.

I initializate the component with 2 points, start and end of route. It would be great if the user could add new points by clicking on the segments, to adjust to route to streets or whatever, but prevent the map's click to mantain the end of route.

How to draw segments to the map using js code ? (instead of clicking the map)

Say, I have an array of segments like below, how can I draw it to the map ?

let segments = [{lat: 1, lng: 1}, {lat: 10, lng: 10}, {lat: 7, lng: 7}, {lat: 1, lng:1}];

Double click is required after measureTool end

I need dbl click to start again after disabled measure tool.

<button onclick="measureTool.start()">start</button>
<button onclick="measureTool.end()">end</button>

• Start drawing
• Drawing in map
• Disable tool
• Start drawing again and here is the bug...

How i fix this?

Issue with duplication of line after zoom

I'm seeing an issue where if you draw a line and then zoom in and out a bit (using the zoom buttons- mouse wheel doesn't seem to do it) the line can get duplicated. It takes quite a bit of zooming in and out to do this, but if you rapidly zoom in and out it will duplicate.

I see this in Chrome 66.0.3359.170 (Official Build) (64-bit) on Windows. Also in Opera 52.0.2871.99 and Firefox 59.0.2.

This seems related, but was fixed in a newer version of Chrome, while I am still seeing this issue in Chrome 66.

https://stackoverflow.com/questions/45406218/google-maps-api-issue-broken-duplication-of-shapes-after-zooming

Add the number of points (count), and optionally a points array, to the measure result

Currently only the length, lengthText, area and areaText are added to the measure-result. It would be very useful if the measure-result could be expanded with the number of points (pointsCount) and optionally an array of all points (points).

Option to display total area in Acres rather than miles squared

It would be awesome to be able to convert miles squared to acres

MeasureTool click event on marker and polygon

My map using many marker and polygon. When I start measure tool I can not start or click on polygon or marker.

I can not publish my app.

this is my map option

var myOptions = {
                    zoom:zoom,
                    minZoom: wpgmza_max_zoom,
                    maxZoom: wpgmza_min_zoom,
                    center: latLng,
                    draggable: wpgmza_settings_map_draggable,
                    disableDoubleClickZoom: wpgmza_settings_map_clickzoom,
                    scrollwheel: wpgmza_settings_map_scroll,
                    zoomControl: wpgmza_settings_map_zoom,
                    panControl: wpgmza_settings_map_pan,
                    mapTypeControl: wpgmza_settings_map_type,
                    streetViewControl: wpgmza_settings_map_streetview,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scaleControl: true,
                    
                  };

this is callback

measureTool = new MeasureTool(this.map, {
            unit: MeasureTool.UnitTypeId.METRIC,
            contextMenu: false,
        });
        measureTool.addListener('measure_change',(e)=>{
            var typeMea = jQuery('#measure_tool_type').val();
            var result = e.result;
            console.log(result);
            if(typeMea == 'distance' && result.length > 0){
                jQuery('.current-measurement').empty();
                jQuery('.current-measurement').append('<p>'+result.lengthText+'</p>');
            }
            if(typeMea == 'area' && result.area > 0){
                jQuery('.current-measurement').empty();
                var areaConver = result.area*0.000247105;
                jQuery('.current-measurement').append('<p>'+result.areaText+'</p><p>'+areaConver.toFixed(2)+' acre</p>');
            }
            
        });

Please help #me.

Can you toggle the unit property after init?

I can't seem to figure out how to do it. Can you change the unit after the instance has been initialized? I want to add a toggle in my UI for switching the units on the fly.

Disable and Enable rigth click menu

Hi, im used your tool in my project, but i have a conflict in right click event (show a menu). I have an event in the map and create my custom menu. My suggest is in your tool options, enable and disable that event.

Ex: measureTool = new MeasureTool(mapRef, {
tooltip: false,
dropdownMenu: false
});

And thankyou of this project.

Invert drawing color when MapType is switched to darker map type such as satellite

• The drawing color should be changeable when MapType is changed. In a lighter theme, it should use default color, and in a darker theme, it should use an inverted color theme.

Display measurements as feet/meters instead of fractional km/mi

It makes sense to show the small units instead of decimal format when < a full unit. Or at least provide an option to do so.

Add setters for the rest options

wiring setters for the rest options (may need a more sophisticated way to delegate through the helper, may need to decouple from the helper, the current way I am using helper will increase the maintenance as more options get into play e.g. localization..).

draggable: true properties from map.data.setStyle not working

if we use this library, draggable: true properties from map.data.setStyle not working.

right-click replacement for mobile?

Hi, great tool -- thanks for sharing!

Unfortunately, on multi-touch devices you don't have a way to right-click. Maybe it would make sense to add some kind of substitute?

See https://stackoverflow.com/a/30895557 and https://api.jquerymobile.com/taphold/

measure_end -> listener -> function doesn't receive the full result (segments omitted)

measure_change: segments are in the result;
measure_end: segments are not in the result.

How to use it in vue ?

Hi,
It's can use it in vue project?
I have a project base on vue. and use vue-google-maps. i have no idea how to use it.

[feature] connect the first and the last point

As the title suggests, it would be perfect if the first and the last point are connected.

Change color and background MeasureTool GoogleMaps

Hi,

¿How can I change the color of the rectangle and the background?

Thanks.

Integration problem : lib/index.js file does not exist

As the title says. package.json's main parameter value is a file name that does not exist, which can break integration in frameworks or build tools (it does in Angular + Webpack). Could you change the value or add a symlink from lib/MeasureTool.min.js ?

Thanks for your cool plugin.

Introduce setOptions({...}) method

Need an alternative to bulk set options.

On end

Is there a way of listening for the end method to start another event?

Basically when the area is calculated I need it to insert that numerical value in a text box.

Zoom Control Issue

If the default "zoom control" is set to hidden (zoomControl: false) on map, it will show up right away after pressing the first point again to close the area (i.e. after the "Total Distance" message).

Markers and shapes misbehaving

After instantiating MeasureTool, markers and shapes misbehave.
Examples:

• Rectangle cannot be moved by drag&drop.
• Markers placed outside initially visible part of the map cannot be moved by drag&drop and mouseover and mouseout events are not fired.

In attachment is sample code that reproduces the issue.

1. Load index.html in browser.
2. Move mouse over map and press key s to add rectangle.
3. Try moving the rectangle by drag&drop (this should work, but it's not).
4. Move mouse over map and press key t to add marker.
5. Try moving the marker by drag&drop (this works).
6. Pan the map to the north (across the river).
7. Once the map is panned across river, press key t to add marker.
8. Try moving the marker by drag&drop (this should work, but it's not).
9. Open main.js file in editor and change first line to const USE_MEASURE_TOOL = false;
10. Repeat steps 1 through 8. In this case everything works fine.

Tested in Firefox 57 and Chrome 62.

measuretool-drag-and-drop-bug.zip

Support custom unit system and language as localization add-on

Originally posted by @zhenyanghua in https://github.com/zhenyanghua/MeasureTool-GoogleMaps-V3/issue_comments#issuecomment-437616858

Click event on markers not firing

When the MeasureTool is instantiated, click events on markers added through angular-google-maps stop working. It works some times though, but then reload the same page and it's not working again. Shapes are not affected, also are not added through angular-google-maps. I don't know if it's an issue with angular-google-maps or MeasureTool.

Maybe there's a way to disable functionalities and keep the basic needed ones to see if the problem is avoided this way? I just need to be able to start the tool through my own menu (no context menu needed) and click to get the distances between the successive points then stop the tool altogether with my own menu again, so no need to drag or click point to remove.

Thank you.

how to integrate with angularjs 1.x

how ca i integrate this great tool with angularjs?

A default cursor after clearing measurement

Hi ! In MeasureTool, the cursor goes back to 'dragging' style. In our app, the style 'default' is relevant for its precision (you see exactly where you click). Hence I suggest to add that as an option. I made a commit :

d-damien@30eba3e

Would you accept it in a PR ?