Add mouseover event to directionRenderer Google Maps API v3

Question

How can I add a mouseover event listener to directionRenderer when using a DirectionsService?

I know how to add a listener to a straight line, but cannot find the object in directionRenderer.

For example, this works:

function getStraightLine(coordinates) { if (progress.length == 0) progress = coordinates; else progress.push(coordinates[1]); updateDistance(); var line = new google.maps.Polyline({ path: coordinates, strokeColor: "#FF0000", strokeOpacity: .5, strokeWeight: 2, map: map }); google.maps.event.addListener(line, 'mouseover', function(){ alert("moused over straight line!"); }); return line; } 

But this is not so:

 function getDirectionsPath(coordinates) { var directionsPath = new google.maps.DirectionsRenderer(); directionsPath.setMap(map); var request = { origin: coordinates[0], destination: coordinates[1], travelMode: google.maps.TravelMode.WALKING }; directionsService.route(request, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { var coordinates = result.routes[0].overview_path; if (progress.length == 0) progress = coordinates; else progress = progress.concat(coordinates); directionsPath.setDirections(result); google.maps.event.addListener(directionsPath, 'mouseover', function(){ alert("moused over straight line!"); }); } }); return directionsPath; } 

Instead of Path directions, I tried the result, result.routes [0] and several others.

So which object should I use?

Answer 1

Will you use the drag event on the polyline that is generated by the setDirections(directionsResult) method?

If you do not, I think you can create a "polyline" for yourself as follows:

 directionsService.route(request, function (result, status) { var myRoute = result.routes[0].legs[0]; if (status == google.maps.DirectionsStatus.OK) { for (var i = 0; i < myRoute.steps.length; i++) { for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { points.push(myRoute.steps[i].lat_lngs[j]); } } } drawRoute(); } function drawRoute() { var routLine = new google.maps.Polyline( { path: points, strokeColor: "Red", strokeOpacity: 0.5, strokeWeight: 10 } ); routLine.setMap(mapCanvas); // Add a listener for the rightclick event on the routLine *google.maps.event.addListener(routLine, 'mouseover', function(){ alert("moused over straight line!"); });* } 

If you solved the problem, use a method like google.maps.DirectionsRenderer().setDirections(result) ?

Answer 2

The reason the second example does not work is because there are no events related to the object created by the DirectionsRenderer() class. It creates a DirectionsResult object.

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRenderer

Based on documents:

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsResult

The DirectionsResult object contains an array of DirectionsRoutes . Using your code above, I would use the directionsPath object to get the routes: directionsPath.routes , and then get the first directionsPath.routes[0] route.

From there, you will need to use the LatLngs array in directionsPath.routes[0] to build the polyline with which you can use the mouseover event.