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, 'overlayplete', 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 pleted.

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.

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, 'overlayplete', 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 pleted.

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.

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers
• graph-drawing

• Can you provide the code for where you create the PolyLine? – Sean Kendle Commented May 27, 2014 at 15:16
• 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 Commented May 27, 2014 at 15:19
• Ah, what about the markerplete event? – Sean Kendle Commented May 27, 2014 at 15:21
• Unfortunately, the markerplete event is only triggered at the pletion of markers, not a polyline. The alternative is polylineplete, but it doesn't let us display the distance dynamically per line as the user adds it. – DasianSensation Commented May 27, 2014 at 15:25
• You mean something like this? – geocodezip Commented May 27, 2014 at 16:03

2 Answers 2

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 markerplete 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, "markerplete", function (marker) {
    markers.push(marker);
});

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

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

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

http://jsfiddle/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)...

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