Google Map Api V3 Cannot Clear The Previous Mutiple Routes History

This is the alternative route function, while when I redirect with other direction. It can not clear the previous route. function initialize() { // Create a new map with some defa

Solution 1:

If you need to change/remove the rendered directions, you need to keep references to the google.maps.DirectionsRenderer objects that you use to display directions on the map and remove them from the map before losing that reference.

proof of concept fiddle

// in the global scope
 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, map);
});

code snippet:

var directions = [];

functioninitialize() {

  // Create a new map with some default settingsvar myLatlng = new google.maps.LatLng(-37.8602828, 145.079616);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  //click function call calculateAndDisplayRoute to ge the alternative routesvar directionsService = new google.maps.DirectionsService;



  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, map);

  });


  //this function used to calculate the alternative route.functioncalculateAndDisplayRoute(directionsService, map) {

    //get the value from start and end input box var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;

    //property when dran on the mapvar directionsRequest = {
      //starting pointorigin: start,
      //destinationdestination: end,
      //multiple routeprovideRouteAlternatives: true,
      travelMode: google.maps.TravelMode.DRIVING

    };

    directionsService.route(directionsRequest, function(response, status) {

      if (status === google.maps.DirectionsStatus.OK) {
        //store the multiple routes in respones and display one by onefor (var i = 0, len = response.routes.length; i < len; i++) {
          directions.push(new google.maps.DirectionsRenderer({
            map: map,
            directions: response,
            routeIndex: i
          }));
        }

      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><inputtype="button"value="get directions"id="submit" /><inputvalue="New York, NY"id="start" /><inputvalue="Newark, NJ"id="end" /><divid="map_canvas"></div>