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
Share Improve this question edited May 23, 2017 at 11:52 CommunityBot 11 silver badge asked Apr 16, 2012 at 20:28 JimJim 7433 gold badges12 silver badges28 bronze badges2 Answers
Reset to default 7There 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);
}
});
}