For some reason, I´m unable to clear previous Routes when calling this function, even though I am calling setMap(null).DirectionsDisplay is declared in the render method of the component

 calculateAndDisplayRoute = (e)=> {
    let travelModeOption;
    {e !=undefined ? travelModeOption=e.currentTarget.id : null};
    {e !=undefined ? this.setState({activeIcon: travelModeOption}): this.setState({activeIcon: "DRIVING"})};
    let directionsService = new google.maps.DirectionsService;
    document.getElementById('directions').innerHTML = '';
    let start=this.state.start;
    let end = this.state.currentMarker[0].getPosition();
    directionsService.route({
      origin: start,
      destination: end,
      travelMode: travelModeOption || 'DRIVING'
    }, (response, status) =>{
      if (status === 'OK') {
        this.directionsDisplay.setMap(null);
        this.directionsDisplay.setPanel(document.getElementById('directions'));
        this.directionsDisplay.setMap(this.newMap);
        this.directionsDisplay.setDirections(response);
        this.setState({distance: response.routes[0].legs[0].distance.value, secondCalculation: true});
      } else {
        window.alert('La búsqueda ha fallado debido a' + status);
      }
    })
  }

0 Answers