Ionic 2 Google Maps blank on android

Ionic Framework ionic-v3
1

I am using the starter tabs template for ionic 2 and tried making a simple google maps. When I serve it to my Chrome browser in Windows 10, it works as expected. But when I add the platform, add the whitelist plugin and build on android to my real device; the map doesn’t load. Any ideas, please?

Also, when I added the whitelist plugin from cordova it broke ionic serve, so now the map isn’t loading in the browser with that plugin…

2

Have you added everything in a correct way?

First add platform then whitelist plugin. Also have you use a correct whitelist metatag?

Here’s a working example: http://www.gajotres.net/ionic-2-having-fun-with-cordova-geolocation-plugin/

In case provided link is missing this is a required metatag:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
1 Like
3

Yea I was missing the metatag. Thanks, your tutorials are very helpful!

4

You’re welcome :smile:

5

Hi @Gajotres,

I have added the meta tag and follow your tutorial but it still shows blank screen in Android. It is OK if i run it on browser. I updated the ionic2 to beta3. Any help would be appreciated.

Cordova CLI: 6.0.0
Ionic Version : 2.0.0-beta.3
Node Version: v5.5.0

Thanks

1 Like
6

Same problem. Cannot see the map in iOS emulator and on Android device… No errors, nothing that could point to the problem… HELP!!!

7

Hi, i have same problem, but my problem solved when i’m try to remove platform and then added again.

$ionic platform rm android
$ionic platform add android

it’s work for me!