remove route with google map

I got a small app that use the Direction开发者_运维百科 Service feature of Google Map. It is working well, I can change routes, but I have a small problem, where a user could go back to a list of markers after tracing a route.

I can't find a way to delete routes with google map. For markers I store them and do setMap(null), do not see a way here...

You could also use:

directionsDisplay.setDirections({routes: []});

In this way, you can keep using one map with one renderer for all routes.

if you are using DirectionsRenderer to display the routes, you can call setMap(null) on it too. That way you delete the displayed route.

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

just call

directionsDisplay.setMap(null);

The other answers did not work for me. I found a solution from this question

define directionsDisplay only 1 time(outside of the click-handler)

This is the fix

// Clear past routes
if (directionsDisplay != null) {
    directionsDisplay.setMap(null);
    directionsDisplay = null;
}

Since on each call, new instance of DirectionRenderer created thats why each new instance is unaware of previous instance.

Move

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

to the global(at the top where all other Global variables have been initialized.)

By doing so, each time you would be using single instance of DirectionRenderer.

I had similar problem, I tried with directionsDisplay.setMap(null); but it didn’t work.

The problem was the directionsDisplay object which I created was declared locally.

I changed it to global and every time the function is called, it will use the same global directionsDisplay object and make changes to it. This will definitely remove the previous route displayed on same object.

set strokeWeight: 0 then polyline will hide

It's important - at least it was in my case - that while directionsDisplay can be declared globally the instance has to be created after the map object otherwise it gave a reference error

    var map;
    var directionsDisplay;

    function initMap() { 

        map = new google.maps.Map(...);

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

     }

     function yourFunction() {

        // your code

        directionsDisplay.addListener(...);

     }