How to update your marker "live" in Ionic app using Google Apps

@Sweg wrote:

I am trying to add a “live” marker to my ionic app using Google Maps & Geolocation.

With the below code, I’m able to add markers to my app when my location changes.

But instead of add a new marker, I want to “update” the original marker, & make it look like the marker is moving around (like it does on Google maps if you move around with your phone).

How can this be done?

Here is the code I currently have:

ionViewWillEnter() {
    this.anonLogin();
    this.loadMap();
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(res => {
      this.user = res.user;

      this.watch = Geolocation.watchPosition({}, (position, err) => {
        if (position) {
          let marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            animation: google.maps.Animation.DROP,
            map: this.map
          });
        }
      });
    });
  }

  loadMap() {
    Geolocation.getCurrentPosition().then((resp) => {
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
    }).then(() => {
      let mapOptions = {
        center: this.latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var marker = new google.maps.Marker({
        position: this.latLng,
        title: "Hello World!"
      });
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      marker.setMap(this.map);
    }).catch((err) => {
      console.log(err);
    });
  }

Here is what is currently being outputted:

Screenshot_20200325-213929_google-maps1080×2220 199 KB

But instead of multiple markers like above, I just want to update one marker that shows my live location, & make it appear as if the marker is moving with me.

Thanks a lot!

Posts: 1

Participants: 1

Read full topic