Google Maps Javascript V3: remove a route, but keep other routes displayed - google-maps-api-3

Question

I've created the following testcase in JSFiddle: http://jsfiddle.net/4Wtb3/15/. When I check a checkbox for route A or route B, the routes are displayed. So far, so good ...
if (routes.length > 0) {
for (var i = 0; i < routes.length; i++) {
var route = routes[i];
var request = {
origin: route.origin,
destination: route.destination,
travelMode: google.maps.TravelMode.WALKING
};
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport: true,
polylineOptions: {
strokeColor: '#C6D300'
}
});
directionsDisplay.setMap(map);
directionsDisplays.push(directionsDisplay);
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
}
But when I uncheck them, I want to clear the selected route. I keep track of all directionDisplay's using an array (to put the map value to 'null'). First I clear everything, then I redraw every route which is still in the list.
The problem: routes are still in the map, even if I uncheck them ...
Any idea's what exactly is going wrong?

Answer 1

There is no length of array in for loop so setMap(null) is never called. Code should be changed from
if (directionsDisplays.length > 0) {
for(var i = 0; i < directionsDisplays; i++) {
directionsDisplays[i].setMap(null);
}
}
to
if (directionsDisplays.length > 0) {
for(var i = 0; i < directionsDisplays.length; i++) {
directionsDisplays[i].setMap(null);
}
}
...
And additional fix for closure problem:
// Draw all routes
if (routes.length > 0) {
for (var i = 0; i < routes.length; i++) {
(function(i){
var route = routes[i];
var request = {
origin: route.origin,
destination: route.destination,
travelMode: google.maps.TravelMode.WALKING
};
....
})(i);
}
}
Updated example at jsfiddle