Google maps not loading in device but works fine in browser - Ionic4

anujpunia · December 24, 2018, 4:25pm

I tried with ionic cordova run browser -l and maps loads just fine. When I tried to run the same using Ionic Dev App, it loads a white screen and no error is thrown in the console. Also, tried to build apk and white screen comes up on mobile device as well. I am using Ionic 4 and native google maps. How to debug it as what is the issue, I have no way to understand. APK was built without any errors.

Here is the code exactly as I am using - here

APK can also be found at the same link as above.

Any help is greatly appreciated.

Unkn0wn0x · December 27, 2018, 9:33pm

The problem can have several causes:

Maybe your Google Maps API Key is restricted that it only can be used under specific domains, etc., did you checked it?
Your Google Map is there but invisible / collapsed, did you checked your HTML-Tags, if there is a valid map anywhere inside?
If there is no error, maybe your Dev-Tools are attached a bit too late to show you the errors, try to hit the reload button inside the Dev-Tools to “refresh” your App with attached Dev-Tools.

Let me know if I could help you.

Cheers
Unkn0wn0x

anujpunia · December 28, 2018, 9:03am

API keys isn’t a problem and has not restrictions.
I don’t know how to check HTML-tags in device as browser works fine and shows the map and dev-app shows no error logs.
Reload isn’t working as well.

Very frustrating and disappointing experience. Seems using Ionic4 and native maps wasn’t a good idea.

wf9a5m75 · December 28, 2018, 5:43pm

I think you don’t enable Google Maps SDK for Android/iOS before API keys are generated.

And you should try the multiple_maps branch of the cordova-plugin-googlemaps.

anujpunia · December 29, 2018, 2:01pm

Google Maps SDK for Android/iOS is already enabled. Infact, I regenerated key today but it didn’t help either.

Added multiple_maps branch. Got the following logs and still the device doesn’t show up any maps but white screen.

Also updated the change on github.

Installing "cordova-plugin-googlemaps" for android
Android Studio project detected
Subproject Path: CordovaLib
Subproject Path: app

      Official document https://github.com/mapsplugin/cordova-plugin-googlemaps-
doc/blob/master/v2.3.0/README.md Please consider to buy a beer for us ? https://
github.com/mapsplugin/cordova-plugin-googlemaps#buy-us-a-beer

Installing "cordova-plugin-googlemaps" for browser

      Official document https://github.com/mapsplugin/cordova-plugin-googlemaps-
doc/blob/master/v2.3.0/README.md Please consider to buy a beer for us ? https://
github.com/mapsplugin/cordova-plugin-googlemaps#buy-us-a-beer

Adding cordova-plugin-googlemaps to package.json
Saved plugin info for "cordova-plugin-googlemaps" to config.xml
(node:13916) UnhandledPromiseRejectionWarning: CordovaError: Failed to get absol
ute path to installed module
    at C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node_modules\co
rdova-lib\src\plugman\fetch.js:112:45
    at _rejected (C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node
_modules\q\q.js:864:24)
    at C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node_modules\q\
q.js:890:30
    at Promise.when (C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\n
ode_modules\q\q.js:1142:31)
    at Promise.promise.promiseDispatch (C:\Users\ap\AppData\Roaming\npm\nod
e_modules\cordova\node_modules\q\q.js:808:41)
    at C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node_modules\q\
q.js:624:44
    at runSingle (C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node
_modules\q\q.js:137:13)
    at flush (C:\Users\ap\AppData\Roaming\npm\node_modules\cordova\node_mod
ules\q\q.js:125:13)
    at process._tickCallback (internal/process/next_tick.js:61:11)
(node:13916) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This
 error originated either by throwing inside of an async function without a catch
 block, or by rejecting a promise which was not handled with .catch(). (rejectio
n id: 1)
(node:13916) [DEP0018] DeprecationWarning: Unhandled promise rejections are depr
ecated. In the future, promise rejections that are not handled will terminate th
e Node.js process with a non-zero exit code.

wf9a5m75 · December 29, 2018, 4:23pm

Please share your project files on GitHub repository.

anujpunia · December 30, 2018, 5:37am

Please find it at https://github.com/edupeeth/googlemaps

wf9a5m75 · December 30, 2018, 8:43am

Free support is free support. Please wait until I’m available.

anujpunia · December 30, 2018, 11:03am

I surely understand. How about a beer for this friendly gesture Curious to know as what the heck am I doing wrong.

anujpunia · January 2, 2019, 10:20am

Hey @wf9a5m75, it got resolved mate. Thanks to another Samaritan who helped me resolve it Newbie012. Map was shadowed by DOM and silly me couldn’t find it. Doesn’t it sound like a bug by any chance

hrushikeshsalunkhe · January 22, 2019, 6:02pm

Hey @anujpunia , can you elaborate more on how you solved this issue. I am facing the same issue.

Eliya · January 23, 2019, 8:11pm

<ion-content> has a shadow DOM. therefore, you have to strip the map component from it and from any other shadow DOM element.

priyankaghosh123 · April 25, 2019, 5:32am

How can I strip map component from it?

ionicUser11 · August 10, 2019, 5:41pm

Hi, i’m facing same issue on ionic 4. can you please help me to fix this issue?

djks74 · September 21, 2019, 2:33pm

I don understand why there is no other replies when another person tell and asking same issue and how to fix it?
people should share when he got it working!

Hope Anujpunia can share how to fix it? or someone know how to fix it? with details please?

Thanks.

anujpunia · September 22, 2019, 6:04am

@djks74, I am sorry for my delayed response. I will be glad if I could help someone. Vagaries of life did keep me occupied and lost.

As @Eliya mentioned , <ion-content> shadows your map content and hence you don’t see it and neither see any error. Just try to put the map component outside of <ion-content> and it should work. Please try and keep us posted.

anujpunia · September 22, 2019, 6:06am

@priyankaghosh123, Just put the map html selector outside of <ion-content>

pjmolina · September 25, 2019, 12:21pm

Can you share your share a minimal reproduction HTML template @anujpunia ?
I tried to place it inside and outside <ion-content> with no luck. Works on browser, fails on Android and iOS.

Eliya · September 25, 2019, 1:10pm

@pjmolina Then it’s probably inside another shadow-dom component

anujpunia · September 25, 2019, 1:23pm

@pjmolina I don’t have access to that template now, mate. As @Eliya pointed out, may be its shadowed by some other element? Can you show how does your html template looks like?