How to update marker live on Google Map in Ionic app?

When my Ionic app loads I am displaying a Google map which currently centres on my current location & adds a marker to my current location.

When I move location, I want the marker on the map to update live.

So as I am walking with the app open on my mobile device, I should be able to see my marker move on the map with me.

Here is my code:

ngAfterViewInit() {
    this.locateUser();
  }

  private locateUser() {
    if (!Capacitor.isPluginAvailable('Geolocation')) {
      this.showErrorAlert();
      return;
    }
    Plugins.Geolocation.getCurrentPosition()
      .then(geoPosition => {
        this.coordinates = {
          lat: geoPosition.coords.latitude,
          lng: geoPosition.coords.longitude
        };
        this.getGoogleMaps().then(googleMaps => {
          const mapEl = this.mapElementRef.nativeElement;
          const map = new googleMaps.Map(mapEl, {
            center: this.coordinates,
            zoom: 16
          });

          const myPosition = new google.maps.Marker({
            position: this.coordinates,
            animation: google.maps.Animation.DROP,
            map
          });

          googleMaps.event.addListenerOnce(map, 'idle', () => {
            this.renderer.addClass(mapEl, 'visible');
          });
        }).catch(err => {
          console.log('Google Maps error:', err);
        });
      })
      .catch(err => {
        this.showErrorAlert();
      });
  }

  private getGoogleMaps() {

    const win = window as any;
    const googleModule = win.google;

    if (googleModule && googleModule.maps) {
      return Promise.resolve(googleModule.maps);
    }
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=myApiKey';
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
      script.onload = () => {
        const loadedGoogleModule = win.google;
        if (loadedGoogleModule && loadedGoogleModule.maps) {
          resolve(loadedGoogleModule.maps);
        } else {
          reject('Google Maps SDK not available.');
        }
      };
    });
  }

Can someone please tell me what changes I need to make for this?

1 post - 1 participant

Read full topic