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

Ionic Framework
1

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?

2

I believe that you are looking for watchPosition instead of getCurrentPosition.

3

Thanks for your response, I’ll try this out.
Thanks for your response.

However, when I replaced getCurrentPositon() with watchPosition() in my code above, I got the follow error message:

Plugins.Geolocation.watchPosition(…).then is not a function

4

Checkout the documentation here. You’ll need to use a callback function.

1 Like
5

Thanks for your help, I managed to get it working with the below code:

Plugins.Geolocation.watchPosition({}, (position, err) => {
      if (position) {
        this.coordinates = {
          lat: position.coords.latitude,
          lng: position.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,
            map,
          });

          googleMaps.event.addListenerOnce(map, "idle", () => {
            this.renderer.addClass(mapEl, "visible");
          });
        });
      }
    });
1 Like