Ionic-native-google-maps: Google maps shows blank on iOS?

[jamesharvey2]

Hello guys,

Google maps native is working fine on production build of android.
However, on iOS, it's showing only beige color blank?
It's not white blank. It shows markers correctly but the map isn't loading.

How can I fix this error?

Thanks

[wf9a5m75]

Gray map means your api key doesn't allow to use ios map.

Make sure you enabled iOS Google map BEFORE generate api key.

[jamesharvey2]

Thanks, you're right.

I just enabled Google Maps for iOS and it gave me two API keys: server and browser.
Which one should I use on ionic iOS app?

[wf9a5m75]

Why do you think server or browser?

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/api_key/README.md

[wf9a5m75]

https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/api_key/generate_api_key.md

[jamesharvey2]

It generated two APIs.. I wonder what this means...

developer console page no longer works like in documentation.

[jamesharvey2]

Cordova is web app so I guess it's relevant to use browser key API?
https://stackoverflow.com/questions/17715572/google-api-keys-what-is-server-key-and-browser-key

[wf9a5m75]

No. This plugin DOES NOT use google maps JavaScript api v3. It's native google maps api.

[jamesharvey2]

Yes, I understand and the image on my comment is about native map SDK being enabled.
I think the developer console page has changed now. It generates two APIs automatically.

[wf9a5m75]

Both api keys should work.

[jamesharvey2]

I will test with both keys. Browser key has the same length as their previous API key. server key is a little bit longer. Thanks

[wf9a5m75]

You need to generate api key for application, not for browser or server.

[jamesharvey2]

Yes, I can generate a new API on top of automatically generated two apis.
Is it possible to use the same API for both iOS and Android? because this new one is generated after iOS and android are enabled. I can see the new API show up on both iOS and Android SDK pages.

It looks like now google allow you to use one API key for all of their libraries? I'm not sure but console page doesn't seem to generate a unique API per each library. then maybe cordova pluigin installation command can change. It asks for separate APIs for android and iOS.

If I remember correctly, cordova installation command throws an error if I put same API key for both android and iOS.

[wf9a5m75]

Is it possible to use the same API for both iOS and Android?

yes.

[jamesharvey2]

Thanks, please update installation command for us so it will ask only one API key.

[Madhulika08]

Hi @jamesharvey2 ,

Did you find the solution for the maps? I am having the same trouble as you. My maps only show markers and beige background but the actual map doesn't load up.

[Madhulika08]

Hi,

There was an issue with API key in 'project'-info.plist file under Resouces folder.
Open the xcworspace file in xcode. Project -> Resources-> 'project'-info.plist and check if the API key is correct.

Also check under Cordova->Info.plist.

Delete the app from the device. Clean and build it again and then run on your device.
Also, check the network connectivity is proper.

[faizy-ahmed]

Gray map means your api key doesn't allow to use ios map.

Make sure you enabled iOS Google map BEFORE generate api key.

It helped me right away, thanks alot.