Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )

Question

Update

Thanks for the answer of wf9a5m75. I had a concept misunderststand on the API Keys. The Android and IOS API Key are generated from Google Cloud Platform Console (https://cloud.google.com/maps-platform/). I was using https://console.developers.google.com/ which is for Google Maps Javascript and that's why when I test the API Key on web application it works but not for mobiles.

For anyone who follows the Ionic native google maps guide, use https://cloud.google.com/maps-platform to generate your key

Original Question:

Ionic native google maps don't show map properly. I followed Ionic native google maps guide I have installed latest ionic native google maps using:

npm install @ionic-native/google-maps

Added API key by

ionic cordova plugin add cordova-plugin-googlemaps \
  --variable API_KEY_FOR_ANDROID="..." \
  --variable API_KEY_FOR_IOS="..."

Enabled Maps SDK for both Android and IOS.

I tested with ionic cordova run ios -l -c --target="iPhone-7"

Have spend a couple of hours removing all packages and platforms and re-add them, nothing works

I searched online it says the incorrect API KEY causes this issue but I tried the same key on a web application which can show map correctly.

Can anyone help? Thanks!

Answer 1

Gray map is always api key problem. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/api_key/README.md