Page with native Google Maps are values not displayed as expected

@Jagtlog wrote:

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.

Posts: 1

Participants: 1

Read full topic