I'm currently developing a geolocation app and encountering an issue with loading a Google map. The native geolocation is functioning properly, but incorporating the map has been challenging, similar to the example shown in Simple Markers here.
After discovering that external domains need to be whitelisted, I added specific access origins to my config.xml within the root of the PhoneGap application:
<access origin="*" />
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
Even after applying these changes under <platform name="android"> and later removing them, the map still fails to load.
In an attempt to troubleshoot, I substituted the map with a simple image. The HTML component now looks like this:
<body>
<span><img src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png" alt="" /></span>
<div id="map"></div>
</body>
The image displays correctly when opened in a browser:
https://i.sstatic.net/hI5XM.png
However, upon compiling and running the app on my tablet, the image fails to render as seen here:
https://i.sstatic.net/gcnLy.png
This suggests that there may be issues with the access permissions not being configured correctly. The image is broken, googleapis.com doesn't load, and the map remains inaccessible.
If needed, you can view my complete config.xml file on Pastebin here.
I am seeking assistance in resolving why the Android app is rejecting external URLs within the context of PhoneGap/Cordova.
I suspect it could be related to some obscure permission setting that I'm unaware of. Any help would be greatly appreciated as I've hit a roadblock. Thank you in advance.