Removing routes rendered on a Google Map

Question

I'm trying to do something that I gather has been done quite a few times before, although I'm having some difficulty accomplishing it.

I have a webpage that displays three Google Maps.

For each of these google maps, I have a text box that accepts a post code / zip code, and a "get directions" button.

Clicking on each of these buttons uses the google.maps.DirectionsService object to display ONE set of directions in ONE panel centered at the bottom of the page.

My issue arises when I try to find a new route by searching again. As you can see in the image below, both routes are rendered.

I have one marker at the end which is in a markers collection.

I've read a few times now about how you can loop through this array and use marker.setMap(null) to clear this marker.

However, I can't seem to clear the actual routes after each specific search.

Has anybody had any problems with clearing markers from multiple maps?

Do you have to totally reset the map in some way?

If you have to clear markers, at what point in the lifecycle of the process should you do it so that your new journey appears after the search, but the old one is removed?

Answer 1

I use the same google.maps.DirectionsService object for all three Google maps, and they all call the same method to calculate directions, but passing in their own map object as a parameter.

function calcRoute(startPoint, location_arr) {
    // Create a renderer for directions and bind it to the map.
    var map = location_arr[LOCATION_ARR_MAP_OBJECT];
    var rendererOptions = {
    map: map
}

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

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById("directionsPanel"));

The gist being that if directionsDisplay != null, we not only pass null to setMap, we also nullify the whole object afterweards, and I found this fixed it.

Answer 2

I dont know the answer.... most likely all u need to do is depending on circumstances:

// put the codes after direction service is declared or run directionsService //

directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map          
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again