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

I know how to add a listener to a straight line but can't seem to find the object in the directionsRenderer.

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 doesn't:

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 directionsPath I've tried result, result.routes[0], and a few others.

So what object should I use?

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

I know how to add a listener to a straight line but can't seem to find the object in the directionsRenderer.

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 doesn't:

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 directionsPath I've tried result, result.routes[0], and a few others.

So what object should I use?

• javascript
• google-maps
• google-maps-api-3

2 Answers 2

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

If you don't, I think you can create a 'polyline' by yourself like this:

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 have solved the problem use the method like google.maps.DirectionsRenderer().setDirections(result)?

The reason the second example doesn't work, is because there are no events associated with the object that the DirectionsRenderer() class produces. It produces a DirectionsResult object.

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

Based on the docs:

http://code.google./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 route directionsPath.routes[0].

From there, you'll need to use the array of LatLngs in directionsPath.routes[0] to construct a polyline, with which then you can use the mouseover event.