White Screen when calling Google Maps Plugin after upgrading from Cordova-Android@9.1.0 to Cordova-Android@10.1.0

[jokerengine]

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

• any problem or bug report

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

• Android

cordova information:

cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-androidx-adapter 1.1.3 "cordova-plugin-androidx-adapter"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.5 "Whitelist"

package.json - file also in attached github project

"@ionic-native/core": "^5.35.0",
"@ionic-native/google-maps": "^5.5.0",
"@ionic/angular": "^5.5.2",

Current behavior:
Cordova has recently released cordova-android@10.1.0, which supports android 11 and targets API level 30. This is important, because by August 2021, all new Android apps must target at least Android 11 (API level 30). By November 2021, all apps that are being updated must target at least Android 11 (API level 30).
I wanted to upgrade the cordova-android version in my ionic app from v9.1.0 to v10.1.0 and most of it went smoothly. Unfortunately, the google maps plugin is not working. When I run it on my device I currently get a white screen. I'm using the multiple_maps branch to ensure that the AndroidX support libraries are used.

My app is huge, so I've created a new small ionic project, where I only am adding the cordova-plugin-googlemaps plugin. When I install it on my phone and use cordova-android@9.1.0 it works like a charm. When I then upgrade the cordova-android version to v10.1.0 and install it on my phone, I get a white screen in google maps.

To test the same behaviour, here's the link to my GitHub project.

Expected behavior:
I suspect that a fix needs to be made with the plugin, so that it is compatible with cordova-android@10.1.0

Any help would really be appreciated. Thanks so much!

Screenshot from my Github App

[lrobak0]

I have the same problem???

[benjamin-luescher]

Same problem here. @wf9a5m75: Is this plugin already tested with Cordova Android 10.1.0?

[jokerengine]

OK, found the problem. Instead of embarrassing myself explaining it, you can read up on the cause of it here: mapsplugin/cordova-plugin-googlemaps#2871

To solve the issue, use the google maps PR version, created by @ebhsgit

"cordova-plugin-googlemaps": "github:mapsplugin/cordova-plugin-googlemaps#918eb5a1bfce9595e922b3ad2442ff81cb9a0fa0",

Huge thanks goes to @ebhsgit for solving this problem and creating a PR to fix it.

Hopefully his branch will be merged into the main branch at some point. I'm updating my example branch, to help people using ionic find a working copy of the google-maps plugin on cordova-android@10.1.0

[lrobak0]

This solution did not help: "cordova-plugin-googlemaps": "github:mapsplugin/cordova-plugin-googlemaps#918eb5a1bfce9595e922b3ad2442ff81cb9a0fa0"

I still have a white screen...

[jokerengine]

@lrobak0 could you try setting up the example project I linked and see if that works for you? If it does then I would recommend comparing the differences between your project and my example one.

[IreneAviles]

I used this fix: "cordova-plugin-googlemaps": "github:mapsplugin/cordova-plugin-googlemaps#918eb5a1bfce9595e922b3ad2442ff81cb9a0fa0", and I got the map loaded, but I'm also using markers and they did not show.
I got error : "Cannot access the 'loadPlugin' method".

[msg10]

@IreneAviles Hey, had the same error. I was checking out the person who fixed the white-map issue (@ebhsgit), saw they've made more fixes for random issues and tried out their last commit (that contained previous fixes). Both white-map issue and 'loadPlugin' issue were gone.
So this is what I used:
"cordova-plugin-googlemaps": "git+https://github.com/ebhsgit/cordova-plugin-googlemaps.git#3762d1753233482b2f19f8277b0fdcd2ee543948",
Link to that commit if you want to check out all the changes.
No clue what exactly was the cause, but if it helps you too, the guy accepts donations according to the older posts, and I sure am in a very thankful mood after running in circles for couple of days haha
(+friendly reminder for anyone going through this to delete node_modules, plugins, platform, www directories and package-lock.json before re-building)

[Ederson01]

Same problem here

[jhonnathanH]

same problem, did someone fix it?

[IreneAviles]

@msg10 @Ederson01 @jhonnathanH

Using this:
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#0b8ea76ad34fb2a202a9de1b9d0e051a82ad9443"
is what made it work well again for me.

[vinithjsamuel]

OK, found the problem. Instead of embarrassing myself explaining it, you can read up on the cause of it here: mapsplugin/cordova-plugin-googlemaps#2871

To solve the issue, use the google maps PR version, created by @ebhsgit

"cordova-plugin-googlemaps": "github:mapsplugin/cordova-plugin-googlemaps#918eb5a1bfce9595e922b3ad2442ff81cb9a0fa0",

Huge thanks goes to @ebhsgit for solving this problem and creating a PR to fix it.

Hopefully his branch will be merged into the main branch at some point. I'm updating my example branch, to help people using ionic find a working copy of the google-maps plugin on cordova-android@10.1.0

Amazing @jokerengine this works!

[lrphael]

Its not work to me @vinithjsamuel

[RCasas20]

Its not work to me @vinithjsamuel

This is because androidx libraries, should work if you install the plugin for that by:
npm i cordova-plugin-androidx

Reference:
https://www.npmjs.com/package/cordova-plugin-androidx/v/2.0.0