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

Ionic Framework ionic-v3
1

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.

1 Like
2

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

3
  • 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.

4

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.

5

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.
6

Please share your project files on GitHub repository.

7

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

8

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

9

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

10

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 :thinking:

11

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

12

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

13

How can I strip map component from it?

14

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

15

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.

16

@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.

17

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

18

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.

19

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

20

@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?