How can I delete previous route on google maps?

Question

Currently I can draw alternative routes by using Google Maps API. But I've a little problem after drawing first route. For example the first route below(Winters-New Mexico Center)

After drawing the first, I want to draw Midland - Albuquerque. But first route still appears on the map

I've tried to add a code block to renderDirections() to solve it but I think that code block works only for single routes:

if(directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;

}

How can I delete the first route before drawing the second ? Here are all of the JS code:

    function renderDirections(result, rendererOptions, routeToDisplay)
{

    if(routeToDisplay==0)
    {
        var _colour = '#008bff';
        var _strokeWeight = 4;
        var _strokeOpacity = 1.0;
        var _suppressMarkers = false;
    }
    else
    {
        var _colour = '#444753';
        var _strokeWeight = 4;
        var _strokeOpacity = 0.7;
        var _suppressMarkers = false;
    }
        directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: false, 
            suppressMarkers: _suppressMarkers, 
            polylineOptions: { 
                strokeColor: _colour, 
                strokeWeight: _strokeWeight, 
                strokeOpacity: _strokeOpacity  
                }
            });
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(result);
        directionsDisplay.setRouteIndex(routeToDisplay);

}

function requestDirections(start, end, travel_mode, directionsService,directionsDisplay, routeToDisplay, main_route) {

    directionsService.route({
      origin: {'placeId': start},
      destination: {'placeId': end},
      travelMode: travel_mode,
      provideRouteAlternatives: main_route
    }, function(result, status) {

      if (status === google.maps.DirectionsStatus.OK)
    {

            if(main_route)
            {
                var rendererOptions = getRendererOptions(true);
                for (var i = 0; i < result.routes.length; i++)
                {
                        renderDirections(result, rendererOptions, i);
                }


            }
            else
            {
                var rendererOptions = getRendererOptions(false);
                renderDirections(result, rendererOptions, routeToDisplay);

            }



        }
        else{
            window.alert('Şu nedenden dolayı herhangi bir yol bulunamadı: ' + status);
        }

    });
}

Answer 1

I had the same problem and I solved this by reinitialize the google map before every draw.

       map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: { lat: 24.549798, lng: 46.5473599 }
        });

Answer 2

Keep references to all the DirectionsRenderer objects and set all of their map properties to null.

function requestDirections(start, end, routeToDisplay, main_route) {
    // remove any old renderers from the map
    for (var i = 0; i < directionsRenderers.length; i++) {
        directionsRenderers[i].setMap(null);
    }
    // clear out the directionsRenderers array
    directionsRenderers = [];

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        provideRouteAlternatives: main_route
    };

    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            if (main_route) {
                var rendererOptions = getRendererOptions(true);
                for (var i = 0; i < result.routes.length; i++) {
                    renderDirections(result, rendererOptions, i);
                }
            } else {
                var rendererOptions = getRendererOptions(false);
                renderDirections(result, rendererOptions, routeToDisplay);
            }
        }
    });
}

function renderDirections(result, rendererOptions, routeToDisplay) {

    if (routeToDisplay == 0) {
        var _colour = '#00458E';
        var _strokeWeight = 4;
        var _strokeOpacity = 1.0;
        var _suppressMarkers = false;
    } else {
        var _colour = '#ED1C24';
        var _strokeWeight = 4;
        var _strokeOpacity = 0.7;
        var _suppressMarkers = false;
    }

    // create new renderer object
    var directionsRenderer = new google.maps.DirectionsRenderer({
        draggable: false,
        suppressMarkers: _suppressMarkers,
        polylineOptions: {
            strokeColor: _colour,
            strokeWeight: _strokeWeight,
            strokeOpacity: _strokeOpacity
        }
    })
    directionsRenderer.setMap(map);
    directionsRenderer.setDirections(result);
    directionsRenderer.setRouteIndex(routeToDisplay);

    // push new renderer onto directionsRenderers array;
    directionsRenderers.push(directionsRenderer);
}

proof of concept fiddle

Answer 3

Try this :

directionsDisplay.setMap(null);

You can see the example code here http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html