Clear the directions in google map v3

Question

We have two textboxes, in two text boxes giving the location names and converting in to latitude and longitude values. And pass the values to the below function. First time Direction loaded successfully, second time modify the text box value, It will overwriting the direction, of the previous. Its not clearing the previous loaded directions. I want to clear the direction and load the new direction. Please help.

var directionsService = new google.maps.DirectionsService();  
var directionsDisplay;

function loadDirections(start,end)
{
    directionsDisplay = new google.maps.DirectionsRenderer();
    if (start && end) 
    {
        resultsDiv.update(''); // So we clear the div out ourselves
        var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL 
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
            }
        }); 
        directionsDisplay.setMap(map.map);
        directionsDisplay.setPanel(resultsDiv);
    }
}

score 3 · Accepted Answer · answered May 31 '13 at 07:57

Move this line:

directionsDisplay = new google.maps.DirectionsRenderer();

... out of loadDirections().

Otherwise you will use a new instance of the DirectionsRenderer at each function-call, what will not overwrite the route created by an instance used in a previous call.

Clear the directions in google map v3

1 Answers1