Avoid google maps referesh

Hi All

I am using google maps on one of my pages. As you may be aware that google maps API accounts for how many types the API is called so that they can appropriately charge a user, even though do provide free credits.

This particular page is updated every 5 seconds, to display updated sensor data. Is there any way to stop google maps unnecessarily refreshing with the page rerfresh?



I think it might help anybody trying to help you to have a more detailed explanation of what you mean by “update” and “refresh”. These are terms that have intuitive meanings for humans, but can be implemented in subtly yet importantly different ways.

Ok. I am calling my API to get the updated sensor data. When the result are returned, Ionic updates my page. When it updates my page, google maps api is also called thepage is reloaded. Therefore for if I am calling my API every 5 seconds, this would mean google maps API is also invoked 5 times as Ionic is reloading the page.

What I was instead looking for was something like this:

I have a service that feeds new sensor information every 5 seconds. It looks like this:

class SensorService {
  watchSensors(): Observable<SensorMeasurement[]> {...}

I have a page that displays this information. It interacts with the sensor service like this:

class MapPage {
  sensorMeasurements: SensorMeasurement[] = [];
  constructor(private sensorer: SensorService) {...}
  ngOnInit() { 
    this.sensorer.watchSensors().subscribe(sms => this.sensorMeasurements = sms);
<div *ngFor="let sm of sensorMeasurements">{{sm.sensorName}} says {{sm.value}}</div>

When I say the page gets “updated”, I mean that a new value is emitted from the SensorService and Angular’s change detection kicks in when I assign to sensorMeasurements. This unfortunately causes Google Maps to hit its API because […].