Google Maps Javascript SDK Error on iOS

Hi,

I’m using the Google Maps Javascript SDK in an Ionic 3 + Capacitor application. It’s a totally blank application with a very ‘standard’ maps implementation.

The map is working perfectly when running in the browser via $ionic serve. No errors.

However, when built for iOS and running on an iOS device, there’s a problem. The map loads /displays perfectly fine. I can drag it anywhere once. No error. I can drag it again, no error. But every time I test this, on the 3rd drag, the map goes grey/blank and an error appears in the Xcode console:

[error] - InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value

This appears about 30 times in the console as soon as I start the 3rd drag on the map.

There’s also a memory warning:

Received memory pressure event 2 vm pressure 0

I’m not sure if these are linked.

I have no idea where to go next regarding troubleshooting this. Does anyone now how to debug this kind of issue?

Thanks!

How are you setting the center of the map and are you setting it based on the gelocation plugin using the watch position?

No. I intend to use Geolocation, but for testing the map I’m doing nothing more than initialising it at a fixed position with no markers or anything that might interfere with the testing of this error.

async loadMap(mapRef: ElementRef) {

    const location = new google.maps.LatLng(51.507351, -0.127758);

    const options: google.maps.MapOptions = {
      center: location,
      zoom: 10
    };

    this.map = new google.maps.Map(mapRef.nativeElement, options);

    this.map.addListener('dragend', () => {
      const newCenter = this.map.getCenter().toJSON();
      alert(newCenter.lat); // <-- Alerts lat as a number first 2 drags. Third drag alert is the same position as second drag alert and alerts after map error.
    });
  }

It seems like the initial setup of the map center is working fine (as the map always loads on the correct position). I just can’t even begin to figure out why this is only happening on the 3rd drag! Really weird!

Thanks

I’ve just had a response from the Google Cloud support team. My implementation of the maps API is verified correct with no errors on the Google side. They have suggested that for some reason, Ionic is failing to pass the lat co-ordinate as a floating point number. For whatever reason, on the 3rd map drag, Ionic is passing NaN in the lat param. So weird that this only happens on the 3rd drag every time. Also weird that I’ve got a totally identical implementation working in another Ionic 3 project with no problem!

Sooo, what could possibly be interfering with the way Ionic is providing the lat param on user drag of the loaded map?

Any help much appreciated!

In addition…

Just tested on a completely blank Ionic 3 project with Capacitor.

Google Maps Javascript SDK/API v3 errors on 3rd drag when running on iOS (tested on multiple versions of iOS).

It seems this is an Ionic bug.

Can anyone else reproduce?

Steps to reproduce:

$ ionic start maps blank --type=ionic-angular
$ cd maps
$ ionic integrations enable capacitor
$ npm install --save @types/googlemaps

index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=*yourOwnKEY*" async defer></script>

home.html:

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

home.scss:

#map {
height: 100%;
}

home.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

@ViewChild('map') mapRef: ElementRef;

private map: google.maps.Map;

constructor() {}

ionViewWillLoad() {
this.loadMap(this.mapRef);
}

async loadMap(mapRef: ElementRef) {
const options: google.maps.MapOptions = {
center: new google.maps.LatLng(51.507351, -0.127758),
zoom: 10
};
this.map = new google.maps.Map(mapRef.nativeElement, options);
}

}
$ npx cap add ios
$ ionic build
$ npx cap copy
$ npx cap open ios

Run from Xcode on an iOS device
Drag the map 3 times