Question

32

Removing routes rendered on a Google Map

rated 0 times [ 34] [ 2] / answers: 1 / hits: 30235 / 13 Years ago, tue, october 25, 2011, 12:00:00

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.

Two

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramiro

Add To Favorites

Follow

Total Points: 431

Total Questions: 96

Total Answers: 105

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 13 Years ago pranavrorys · Accepted Answer

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.