How To Remove All Routes In Google Map?

I am using renderDirections and requestDirections methods to create multiple routes called in a loop, now i want to clear them before calling that loop because even when there is n

Solution 1:

You can simply put your routes in an array, when you initialize it, like this: routes.push (myRoute) and next use the method route.setMap () with the argument null to disappear them of the map. You can also remove them if you reset the array like this: routes = []; or routes[2]=null for one element. I give you some methods to remove or just disappear all routes.

// Sets the map on all routes in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        routes[i].setMap(map);
    }
}

// Removes the routes from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}

// Shows any routes currently in the array.
function showMarkers() {
    setMapOnAll(map);
}

// Deletes all routes in the array by removing references to them.
function clearAllMarkers() {
    clearMarkers();
    routes = [];
}

Solution 2:

This worked for me: declaring directionsRender[] globally and setting up a counter to loop on old routes to clear it `

    function renderDirections(result, Driver) {
         directionsRenderer[cnt] = new google.maps.DirectionsRenderer();
         directionsRenderer[cnt].setMap(map);
         directionsRenderer[cnt].setDirections(result);
         cnt++;
    }`
      function clearRoutes() {  
        for (var i = 0; i < cnt; i++) {
            directionsRenderer[i].setMap(null);
        }
    }