Page with native Google Maps are values not displayed as expected

Ionic Native
1

Hello,

I’m using @ionic-native/google-maps/ngx in one of my pages, where I aim for showing the distance between two markers. Calculation is done perfectly and shown in both console.log + toast, but for some strange reason is the distance on my page only updated correctly first time!? I can change location of my markers and both console.log + toast will show me the new distance, but my page retain the previous value and not the current value shown in console.log + toast. Tested in browser + android with same result.

Can I somehow ‘refresh’ the page so the correct value will be shown?

Here is my map.page.html where distance is (or should be) displayed:

<ion-content>
  <h5>{{distance}} meter</h5>

  <div #map id="map"></div>
</ion-content>

In map.page.ts is distance declared and updated in calcDistance() function:

  public distance: Number = 0;

  private calcDistance(): void {
    this.distance = Math.trunc(Spherical.computeDistanceBetween(this.mapMarkerA.getPosition(), this.mapMarkerB.getPosition()));
    console.log(`Distance approx. ${this.distance} meters`);
    this.showToast(`Distance approx. ${this.distance} meters`);    
  }

Hope someone have a solution for this. Thanks in advance.

2

Found a workaround for my issue, but not sure this is the only way to do it? Please feel free to comment, if you would have done it differently.

In map.page.ts have I added following:

import { NgZone } from '@angular/core';

// declared zone
constructor(
  private platform: Platform,
  private zone: NgZone,
  private toastCtrl: ToastController
) { }

// added function to refresh the screen
 private forceScreenRefresh(): void {
    this.zone.run(() => {
      // console.log('force screen update!');
    });
  }

In map.page.ts have I updated my calcDistance() function:

  private calcDistance(): void {
    this.distance = Math.trunc(Spherical.computeDistanceBetween(this.mapMarkerA.getPosition(), this.mapMarkerB.getPosition())); 
    this.forceScreenRefresh();
  }