Why have I got a blank map using cordova-plugin-googlemaps

Question

i'm develop an hybrid app with cordova framework and jquery mobile. I use cordova-plugin-googlemaps instead of google maps javascript api v3 to improve the performance of my app. When I run my app on android device it displays a blank map. I use this tutorial [Tutorial for Windows to add cordova-plugin-googlemaps][1]

[1]: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Windows to add cordova plugin and this [Blank Map][2]

[2]: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/TroubleShooting:-Blank-Map to resolve my problem but i haven't solved. Help me, please!

ps: i'm sorry for my english

Answer 1

When you access any resources or assets not on the webpage you need to use a whitelist .

The fix to many common white-list problems

The alternative is this quick fix – but know that this quick fix removes all needs for white-list . This creates a security issue which you may not want to by pass.

QUICK FIX Add this to your config.xml for PHONEGAP BUILD ONLY
<preference name="phonegap-version" value="3.7.0" />

The long answer is as such:

From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

• #6 Not setting the "phonegap version" for your compiler
• #7 Not setting "version" for you plugins
• #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

For #6 & #7

With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading errors.

Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

For #10

This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using cordova-android@4.0.0 or better; including cli-5.1.1 and cli-5.2.0. If however, your version is before 4.0.0, let's say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. The documentation is buried in the bottom of many of the latest documentation pages.

Lastly, Raymond Camden in his blog points to a LARGE change in policy starting with Cordova 5

Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist

• Cordova Whitelist Guide
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide

Answer 2

Although this is old question, but some people still access from this page. I update this answer.

JesseMonroy650's answer is mis-leading. Because the original questioner describes "he/she uses cordova-plugin-googlemaps instead of google maps javascript api v3" .

cordova-plugin-googlemaps is a wrapper plugin of "Google Maps SDK for Android" and "Google Maps SDK for iOS" at 2015.

"cordova-plugin-googlemaps" provides original JavaScript API of those native SDKs. But in the behind, the plugin manipulate native APIs, and those native APIs do not follow the white-list rules at all, because it's not JavaScript.

---

Many people ask me "Why I get blank map?"

There are two reasons:

1) If you mean "blank map" is "gray map", then it's your API key authentication problem. Most people are this case.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/troubleshootings/graymap/README.md

2) If you mean "white map" (you can not see the map at all), probably you hide the map with background-color or some another DOM.

Because the maps plugin displays native Google Maps View under browser view .

3) Even if you can't solve your problem, please ask me at https://github.com/mapsplugin/cordova-plugin-googlemaps/issues