Watch Position Google Maps Ionic 3 Firebase


#1

I have 2 characters, one is a driver and the other is pedestrian, the pedestrian need to see the driver in moviment in real time in the map, so data in Firebase
latilong
I need to insert lat and long ok ?

Code on the driver’s side

  positionDriver() {
    this.geolocation.getCurrentPosition().then((result) => {
      this.positionCitizen = new google.maps.LatLng(result.coords.latitude, result.coords.longitude);
      const mapOptions = {
        zoom: 18,
        center: this.positionCitizen,
        disableDefaultUI: true
      }

      this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
        this.configMarkerCitizen(this.positionCitizen);
        // this.configMarkerTruck();
    }).catch((error) => {
      console.log('Erro ao tentar pegar sua localização ', error);
    })
  }

such as listening in real time to the driver’s position so that the pedestrian can see him on the move?
In this case we need in services to use the method update ?


#2

I do this

  getMyPosition() {
    .........
    
    ...........
    }).catch((error) => {
      console.log('Erro ao tentar pegar sua localização ', error);
    })
    let watch = this.geolocation.watchPosition();
    watch.subscribe((data) => {
      let truck = { latitude: data.coords.latitude, longitude: data.coords.longitude };
      this.truckService.update(this.truck.key, truck);
    });
  }

but I do not know if this is right ? I tested this on the device but it keeps refreshing


#3

#4

When I use the watch position in constructor, ionViewDidLoad or in ionViewDidEnter, my map stay white, so, where I take the watch position to update in DB firebase ?

  // let watch = this.geolocation.watchPosition();
        // watch.subscribe((data) => {
        //   let truck = { latitude: data.coords.latitude, longitude: data.coords.longitude };
        //   this.truckService.update(this.truck.key, truck);
        //   console.log(this.truck.key)
        // });

I want to update if the user move us
if(latitude != latitude && longitude != longitude)
this.truckService.update(this.truck.key, truck);
something like this
somone ? @wf9a5m75


#5

I did’t in this way

  getMyPosition() {
    let watch = this.geolocation.watchPosition();
    watch.subscribe((result) => { 
      this.positionTruck = new google.maps.LatLng(result.coords.latitude, result.coords.longitude);
      const mapOptions = {
        zoom: 18,
        center: this.positionTruck,
        disableDefaultUI: true
      } 
      this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
      this.truckMarker(this.positionTruck);
      this.markerDumps();
      let truck = { latitude: result.coords.latitude, longitude: result.coords.longitude };
      this.truckService.update(this.truck.key, truck);
    }) 
  }

But I have some question:
1 - I call this method getMyPosition where, constructor, ionViewDidLoad or wich method ?
2 - Where I put the watch position in method, testing in my device, the app keep giving refresh in page, why ?
3 - And the markers leaves traces in the map as this, how to remove tha markers left behind


4 - Its okay to call the service of update and here ?

 this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    ...
      let truck = { latitude: result.coords.latitude, longitude: result.coords.longitude };
      **this.truckService.update(this.truck.key, truck);**
    })