Removing Directions from Google Maps

Question

I'm displaying a list of places on a map using the google places api. Users can get directions to each of those places individually. The directions appear on the map fine and everything works, but each time they get directions to a different place it adds it to the map along with the old one(s). I want to overwrite the existing directions on the map when a new place is selected. So only one set of directions appear at anyone time. Ideally, I only want one route marked on the map and the one list of directions displayed.

I've tried adding the the following to clear all directions before I set the new ones:

directionDisplay = new google.maps.DirectionsRenderer();
directionDisplay.suppressMarkers = true;
directionDisplay.setMap(null);

As suggested here: Google Maps Version 3 Remove directions markers but to no avail.

No matter how much googling and search through the documentation I just can't seem to get it.

Any help would be greatly appreciated.

JA

score 7 · Accepted Answer · answered Apr 16 '12 at 22:20

7

There is no need to clear the directions before rendering new ones.

Use 1 global variable for directionDisplay, the current directions will be removed as soon as you call setDirections() to render new directions.

answered Apr 16 '12 at 22:20

Dr.Molle

116,463
16
195
201

how can this be done, if i plot alternative routes based on this solution: http://stackoverflow.com/questions/18974512/how-to-display-alternative-route-using-google-map-api this solution creates a new `DirectionsRenderer` every time in the loop for each route, so i cannot use above solution. – beta Oct 28 '15 at 10:41

score 0 · Answer 2 · answered Apr 21 '16 at 03:58

// in the global scope
var directions = [];

document.getElementById('submit').addEventListener('click', function () {
if (directions && directions.length > 0) {
  for (var i=0; i<directions.length; i++)
     directions[i].setMap(null);
  }
  directions = [];
  calculateAndDisplayRoute(directionsService, markerArray, stepDisplay, map, true, "SUBWAY");
});


function calculateAndDisplayRoute(directionsService,markerArray, stepDisplay, map, is_transit, transit_mode) {
            //var selectedMode = "TRANSIT";
            // First, remove any existing markers from the map.
            for (var i = 0; i < markerArray.length; i++) {
                markerArray[i].setMap(null);
            }

            if (is_transit == true){
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode.TRANSIT,
                    transitOptions: {
                        modes: [google.maps.TransitMode[transit_mode]],
                    },
                    provideRouteAlternatives: true
                };
            }else{
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode[transit_mode],
                    provideRouteAlternatives: true
                };
            }


            // Retrieve the start and end locations and create a DirectionsRequest using

            directionsService.route(request, function(response, status) {
                // Route the directions and pass the response to a function to create
                console.log(response)
                console.log(response.routes[0])

                var polyline = new google.maps.Polyline({
                    strokeColor: '#6855C9',
                    strokeOpacity: 1,
                    strokeWeight: 7
                });

                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = response.routes.length; i < len; i++) {

                        directions.push(new google.maps.DirectionsRenderer({
                            map: map,
                            directions: response,
                            routeIndex: i  ,
                            suppressMarkers: true
                        }));

                        //showSteps(response, markerArray, stepDisplay, map);
                    }
                } else {
                    window.alert('Directions request failed due to ' + status);
                }



            });
        }

Removing Directions from Google Maps

2 Answers2