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

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

• javascript
• google-maps-api-3

2 Answers 2

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.

// 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);
                }



            });
        }