Google Maps with directions recharging whole map


#1

Hello, I’m doing an app for android and I’m trying to caluclate routes while watching a position, the problem is that when it recalculates the route it refreshes the whole map. I’d like to just move the markers recalculating the distances and the route map without recharging it. Is there any way?
Here is the .ts:

options = {
      enableHighAccuracy: true,
      timeout: 10000
    };    
    bool: boolean=false;
   map: any;
   directionsService: any = null;
   directionsDisplay: any = null;
   bounds: any = null;
   myLatLng: any;
   waypoints = [];
   desti;
   ruta;
  constructor(public navCtrl: NavController, public navParams: NavParams,
   public geolocation: Geolocation) {
      this.directionsService = new google.maps.DirectionsService();
      this.directionsDisplay = new google.maps.DirectionsRenderer();
      this.bounds = new google.maps.LatLngBounds();
      this.ruta=navParams.data;
   
   }

  ionViewDidLoad() {
      this.cargaPuntos();
  }
  cargaPuntos(){
   for (let i = 0; i < this.ruta.length-2; i++) {
      let lati=this.ruta[i].lat;
      let longi=this.ruta[i].long;
      this.waypoints.push( {location:{lat:lati,lng:longi}, stopover: true});
      
   }
   this.getPosition();
  }
  getPosition():any{
      let lati=this.ruta[this.ruta.length-1].lat;
      let longi=this.ruta[this.ruta.length-1].long;
      this.desti={ lat:lati , lng:longi };
      let watch = this.geolocation.watchPosition();
      watch.subscribe((data) => {
        
            this.loadMap(data);
            
      });

}

loadMap(position: Geoposition){
   let latitude = position.coords.latitude;
   let longitude = position.coords.longitude;
   // create a new map by passing HTMLElement
   let mapEle: HTMLElement = document.getElementById('map');
   document.getElementById('borrar').innerHTML="";
   document.getElementById('borrar').innerHTML="<div padding-horizontal id='panel'></div>";
   let panelEle: HTMLElement = document.getElementById('panel');
   // create LatLng object
   this.myLatLng = {lat: latitude, lng: longitude};

   // create map
   this.map = new google.maps.Map(mapEle, {
      center: this.myLatLng,
      zoom: 14
   });
   this.directionsDisplay.setMap(this.map);
   
      
   this.directionsDisplay.setPanel(panelEle);
   
   google.maps.event.addListenerOnce(this.map, 'idle', () => {
      mapEle.classList.add('show-map');
      this.calculateRoute();
   });
}


   private calculateRoute(){
   
      
      this.bounds.extend(this.myLatLng);

      this.waypoints.forEach(waypoint => {
         var point = new google.maps.LatLng(waypoint.location.lat, waypoint.location.lng);
         this.bounds.extend(point);
      });

      this.map.fitBounds(this.bounds);

      this.directionsService.route({
         origin: new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng),
         destination: new google.maps.LatLng(this.desti),
         //  destination: new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng),
         waypoints: this.waypoints,
         optimizeWaypoints: true,
         travelMode: google.maps.TravelMode.WALKING,
         avoidTolls: true
      }, (response, status)=> {
         if(status === google.maps.DirectionsStatus.OK) {
            this.directionsDisplay.setDirections(response);
         }else{
            alert('Could not display directions due to: ' + status);
         }
      });  

   }