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.

Answer 1

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)...

Answer 2

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);
});