update google map route as user location change ionic 4

@Qodelogix wrote:

I am trying to build a live tracking with the route using Google Map JS version in ionic 4. What I am trying to achieve is to give the route to the user from source to destination and update the route if the user chooses a new path other than the google provided one. The source is the user and destination is some point in the map.

I am able to draw route and update it if the user change the provided path using

startNavigation(){
    this.geolocation.getCurrentPosition({ enableHighAccuracy: true })
      .then((position) => {
        this.userPosition = position;
        this.userVehicleMarker = new google.maps.Marker({
          map: this.map,
          position: { lat: position.coords.latitude, lng: position.coords.longitude },
          icon: this.vehicleIcon
        });
        this.addInfoWindow(this.userVehicleMarker, 'me')

        this.watchVehicle = this.geolocation.watchPosition({ enableHighAccuracy: true })
          .subscribe(async (pos) => 
                {
                    this.drawRouteFromVehicleToDestination(pos.coords.latitude, pos.coords.longitude)
            }
          }, (err: PositionError) => {
            // alert(err.message)
            console.log("error : " + err.message);
          });

      })
)



drawRouteFromVehicleToDestination(lat, lng) {
    let _self = this; 
    let directionsService = new google.maps.DirectionsService;
    let directionsRenderer = new google.maps.DirectionsRenderer({
      polylineOptions: {
        strokeColor: "#428BE8",
        strokeWeight: 2
      },
      suppressMarkers: true,
      preserveViewport: true
    });

    directionsRenderer.addListener('directions_changed', function () {
      let _data = directionsRenderer.getDirections();
      let _newData = _data['routes'][0]['legs'][0]
      console.log(_newData)
    });

    directionsService.route({
      origin: { lat: lat, lng: lng},
      destination: { lat: 27.673586, lng: 85.435131},
      travelMode: 'DRIVING',
      optimizeWaypoints: true,
      provideRouteAlternatives: false,
      avoidTolls: true,
    }, (res, status) => {
      if (status == 'OK') {
        directionsRenderer.setDirections(res);
        directionsRenderer.setMap(this.map);

      } else {
        console.warn(status);
      }
    });
  }

But the issue is, it is sending a lot of requests to google API and which does not look like a practical approach to follow.

Is there any other approach I should follow using which I could track the route and update it as per user location change and also minimize the google ping?

Thank you in advance for your help.

Posts: 1

Participants: 1

Read full topic