White Map with Ionic 4

[petinho]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [X] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly) "@ionic-native/core": "5.0.0-beta.21" "@ionic-native/google-maps": "^5.0.0-beta.23"

Current behavior:

The map is showed as a white screen on an Ionic 4 Tab template. There's no errors in the console, and if I run it with ionic cordova run browser the maps shows. On the phone it seems to work, and if I press the Demo button the marker is created and I can even click on it, and the toast is also shown. But the screen remains white.

Expected behavior:

The map should appear. Screen capture or video record:

Related code, data or error log (please format your code or data):

I have currently no log, as no errors are shown. The repo of the complete project is:

https://github.com/petinho/ionic_ticketer_client

[BrunoGustavoChagas]

similar problem here! on browser works but on my phone... white map!

[wf9a5m75]

@BrunoGustavoChagas Make sure your API key.

[BrunoGustavoChagas]

@wf9a5m75 At first, I thought the problem was the API KEY. To test I removed it and test again on the browser, then the map was marked with a watermark (with the key, there wasn't watermark)! This means that KEY was working before... so, I guess the Key is not the problem

[wf9a5m75]

API key for browser, and API keys for Android/iOS are different. This plugin does not use Google Maps JavaScript v3 on Android and iOS. You must be enable Google Maps SDK for Android/iOS "BEFORE" key generate, then you need to generate different keys for each platforms.

[wf9a5m75]

@BrunoGustavoChagas Even then if you can't solve the problem by yourself, please share your project files on github.

[petinho]

I use here the same key as for a Ionic 3 project that works. On the browse I see the gray map with the error on the console (at least I see the map). But on the mobile I see nothing.

[BrunoGustavoChagas]

@wf9a5m75 didn't work! I'm sorry, I forgot to mention that I'm developing in Ionic 3! I noticed now that even if I choose "Maps SDK for Android" on Google Cloud Platforms... the Key is the same as "Maps JavaScript API".

[wf9a5m75]

@petinho During the development, you can use the same key for all platforms because you don't set any restriction. Without restriction, other people can be able to your api key for another project, but you need to pay for that.

[petinho]

Yes, I mean that the key is from one of my ionic projects that works. Anyway I will generate a new key and try again...

[wf9a5m75]

@petinho It seems ionic4 introduce another DOM, and it is blocked because of background-color.

[wf9a5m75]

Ok, I solved this problem. You need to reinstall the maps plugin from the multiple_maps branch.

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps/#quick-install

[petinho]

I've tested right now and seems to work! Is this branch going to be integrated in the plugin?

[wf9a5m75]

The multiple_maps branch is the next version.