Google Maps reset directionsRender.setPanel(this.directionsPanel.nativeElement);

Hi I am using directionsRender.setPanel(this.directionsPanel.nativeElement); to display directions from a to b. The directions information displays and works but whenever I enter a new route, the route updates correctly and displays new directions but also displays old directions in the ion card. How do I fix this

I have tried setting it to null does not seem to work What I want is every time enter new a and b location it resets the directions and displays nothing so it only displays ever one directions information.

DisplayAndAnimateRoute() {
let here = this;

let directionsProvider = new google.maps.DirectionsService;
let directionsRender = new google.maps.DirectionsRenderer;
// directionsRender.set('directions', null);

const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: {lat: number, lng: -number},
  // tilt:true,
  // scroll:true
console.log("From :",this.From);

if(this.From == null || this.From=='' ||this.From == isUndefined || this.From == 'My Location' || this.From == 'my location' || this.From == 'My location'){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      let pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      here.MyLocation = new google.maps.LatLng(pos);
      //alert(JSON.stringify(pos) );
    }, function() {

  } else {
    // Browser doesn't support Geolocation
    // Give Notifications or your actions
  here.MyLocation = this.From;