Capture Google Maps Polyline On Click (Per Start/End)

Question

Description

I am currently working with Google Maps V3 for our client and they've asked us to implement a drawing tool that will allow them to create connected stream of lines and calculate the distance. However, it seems the Google Maps V3 Drawing Manager library is very limited in how it allows us to capture the click events for a polyline.

Our Code

        google.maps.event.addListener(map, 'click', function(event){
            //TODO: Store lat/long of click for distance calculation later
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            //TODO: Display the total distance of the line
        });

The Goal

        google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
            //TODO: Store lat/long of line for distance calculation and display updated distance.
        });

As you can see, we want to capture the lat/long as the user is creating the polyline and display the distance as each line is created, not once the entire polyline is completed.

Also, I know we can imitate this by creating custom handlers and doing some magic with the map's click method and drawing lines manually between lat/longs, but it seems weird that the Google Maps API wouldn't have a click method for their Drawing Manager.

Clarification

The end goal is to have functionality so while drawing a polyline, we can display the total length of the polyline dynamically. I.E. I begin by drawing a line, a section appears that says "Total Line is X", I click a second spot to create a second line and the text updates to "x" + "y", I click a third and it updates to "x" + "y" + "z", etc. This is why we were hoping there is an event to handle "lineDrawn" or "polylineClick" to store these lat/longs to we can calculate the length for dynamically created lines without having the user stop drawing lines to see the total length.

Edit: Updated addListener in Our Goal to use drawingManager, not map.

Edit: Addition of Clarification section.

We are currently letting the Google Maps V3 do it for us. We don't create it manually yet, I would like to avoid creating a Polyline using Lat/Long from scratch, and instead let Google Maps do the work for us. — DasianSensation, May 27 '14 at 15:19
Unfortunately, the markercomplete event is only triggered at the completion of markers, not a polyline. The alternative is polylinecomplete, but it doesn't let us display the distance dynamically per line as the user adds it. — DasianSensation, May 27 '14 at 15:25
Not necessarily, while drawing the polyline, after each section is drawn, I want that to trigger automatically update the total distance of the line. I.E. I draw one line, it would update to "x" length, I click again and it updates to "x" + "y" length, I click again and it updates to "x" + "y" + "z" length, etc. All of this without having to stop drawing. That PolylineComplete handler triggers at the end of the drawing, not per line. — DasianSensation, May 27 '14 at 16:36

Sean Kendle · Accepted Answer · 2014-12-01T17:50:37.993

6

Basically you want to chain the two together like this:

var thePolyLine = new google.maps.Polyline({ 
       polyLineOptions 
}).setMap(map).addListener("click", function(event){

    //click event

});

============= EDIT =============

Ok, I clearly didn't read the OP's question entirely.

Looks like the markercomplete event returns a marker. I'd create a global Array of marker objects, then you can run a distance check between each on catching that event.

var markers = new Array();

google.maps.event.addListener(theDrawingManager, "markercomplete", function (marker) {
    markers.push(marker);
});

Then, you can loop through them, and computeDistanceBetween any or all points.

============= EDIT #2 =============

My Fiddle of the solution! (I updated the code with more comments and fixed an error, made it obvious that distance is in meters):

http://jsfiddle.net/8Xqaw/12/

Right-click the map to add points to measure. Distance is in meters, btw. It will update distance when you drag points, too. And there is a click function for the polyLine itself.

Clicking the first point again will allow you to connect the final point with the first point to create a polygon, then you can click and drag to move the polygon around (which moves the points as well)...

edited Dec 01 '14 at 17:50

answered May 27 '14 at 15:18

Sean Kendle

3,538
1
27
34

Where would this go though? I see what your doing, but when the user is creating the polyline, how would we capture that event to add the listener? – DasianSensation May 27 '14 at 15:21
If you listen for the DrawingManager's `markercomplete` function, does that work? Check my edit. – Sean Kendle May 27 '14 at 15:29
It's a tiny bit more work, but you could add markers for each point on the polyline. Then, make the markers draggable, and when you drop them, update the corresponding polyline point. This way it's editable, and you get a "markercomplete" method that fires each time you add one. – Sean Kendle May 27 '14 at 15:31
I don't understand why you don't just create the polyline manually... let me make a fiddle. – Sean Kendle May 27 '14 at 15:32
I've updated my fiddle. Right-click the map to add points to measure. Take a look! Distance is in meters, btw. Actually, now it will update distance when you drag points, too. And there is a click function for the polyLine itself: http://jsfiddle.net/SeanKendle/8Xqaw/6/ – Sean Kendle May 28 '14 at 14:05
1

Oh wow... this is actually perfect. I'll take a closer look at what you did, but this will work. – DasianSensation May 28 '14 at 15:36
Glad it works! I have functions written that delete points, etc. Let me know if you need more help. – Sean Kendle May 28 '14 at 16:43

score 0 · Answer 2 · answered May 27 '14 at 20:06

Try this :3

var PolylineOption = {
        strokeColor : "blue",
        strokeOpacity : 0.5,
        strokeWeight : 5
};
var Display;
var rendererOptions = {
    draggable : true,
    suppressMarkers : true,
    polylineOptions : PolylineOption
};
var Service = new google.maps.DirectionsService();
Display = new google.maps.DirectionsRenderer(this.rendererOptions);
Display.setMap(map);
Service.route(this.request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        Display.setDirections(response);                
    }
});

google.maps.event.addListener(PolylineOption, 'click', function() {
    alert(this.strokeColor);
});

Capture Google Maps Polyline On Click (Per Start/End)

2 Answers2

Linked