Get events from polyline or marker from a DirectionsRenderer

Question

I\'m using the DirectionsService and the route method to generate a DirectionsResult. I\'m also using the DirectionsRenderer object to display results because it\'s very easy to

Answer 1

I'm also seeking answer for your question. Until then, I'll try to figure it out myself and I'll post back if I find something useful.

Update: after a few minutes in JavaScript, I found out that the DirectionsResult object holds an array of waypoints, including the ones created when the path is dragged with the cursor. If you completed the Draggable Directions tutorial you can access that object via directionsDisplay.directions, inside the callback method for the directions_changed event. That object holds a member named sf which holds a waypoints array if there are any, if not, it's null. Each member of this array contains a member named location, storing the coordinates under wa (latitude) and ya (longitude).

To demonstrate the waypoint handling, I wrote a little function which displays markers in the place of waypoints. In order to test it, add the following global variable to the script;

var markers = [];  

modify the directions_changed event callback function

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {  
    computeTotalDistance(directionsDisplay.directions);  
});

to the following;

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {  
    computeTotalDistance(directionsDisplay.directions);  
    displayWaypoints(directionsDisplay.directions);  
});

and add this function too

function displayWaypoints(result) {  
    for (var i = 0; i < markers.length; ++i) {  
        markers[i].setMap(null);  
    }  
    markers = [];  
    if (result.sf.waypoints) {  
            for (var i = 0; i < result.sf.waypoints.length; ++i) {  
                    var latitude = result.sf.waypoints[i].location.wa;  
                    var longitude = result.sf.waypoints[i].location.ya;    
                    markers.push(new google.maps.Marker({  
                            position: new google.maps.LatLng(latitude, longitude),  
                            map: map  
                    }));  
            }  
    }  
}  

You might also want to suppress the built-in marker drawing of DirectionsRenderer. Replace

var rendererOptions = {  
    draggable: true  
};  

with the following

var rendererOptions = {  
    draggable: true,  
    suppressMarkers: true  
};  

I couldn't find any official references to that sf member. Use it at your own risk, Google may modify the API without further notice. Until they make a public API for manipulating waypoints after the directions have been dragged, I can't think of a better solution.

This is my first Stack Overflow answer, I hope that I was helpful.

Kind regards, Johnny