Clear / Reset Direction Panel in Google Map API v3

Question

Every time we search the route by the direction service, the result will be append to the bottom of the direction panel. Some people recommend to reset the panel in div tab as null... Can anyone suggest how to do it...

function calcRoute() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    'map': map,
    'preserveViewport': false,
    'draggable': true
  });
  directionsDisplay.setPanel(
    document.getElementById("directions_panel")
  );

  // ... code to make Directions API request and display response ...
}

HTML part:

     <div id="directions_panel" style="width:90%"></div>

Answer 1

This should work:

  document.getElementById("directions_panel").innerHTML = "";

Answer 2

To clear the Directions Panel:

directionsDisplay.setPanel(null);

Initiate the directions panel with:

directionsDisplay.setPanel(document.getElementById('directions_panel'));

...where "directions_panel" is your DIV where you want the directions to load.

Same goes for markers:

marker.setMap(null);

From the Google Maps Javascript API Developer Guides

Answer 3

I think the problem with your code is that you define a new DirectionsRenderer service each time you call calcRoute.

Look at this code from the demo:

  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

    var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

In the initMap function, the directionsDisplay and directionsService services are created. Then, they are passed to the calculateAndDisplayRoute function:

var onChangeHandler = function() {
  calculateAndDisplayRoute(directionsService, directionsDisplay);
};

The calculateAndDisplayRoute then uses this existing instance of each service, rather than recreating the directionsDisplay service.

In your code, you have the following line in your calcRoute function:

directionsDisplay = new google.maps.DirectionsRenderer({
  ...
});

Then there are subsequent calls to setPanel and so on. Because you create a new instance of the DirectionsRenderer each time you call calcRoute, the previous instance(s) are not updated. You need to use the same instance each time, in order to have the route on the map redrawn (as opposed to overlaid over the route created by the previous instance) and the previous directions removed from the panel (as opposed to having the new ones simply appended after those inserted by the previous instance).