Phonegap Build: Whitelisting Google Map Domains for API v3

Question

I have been having some issues with getting maps to display correctly on two real Android phones - one running 2.2.2 and one running 4.2.2. The latter has always given me some grief when it comes to maps. I have put this in another thread here as I have partially solved it.

Note: I am using Phonegap Build with Dreamweaver CS6. Just a config.xml with no manifest xml file.

Now I have another issue in that I have to whitelist all domains in order for the map to function correctly on 4.2.2 and I dont know why. Initially I had this in my config.xml:

<access origin="*.googleapis.com" />
<access origin="*.gstatic.com" />
<access origin="*.google.com" />
<access origin="maps.googleapis.com" />
<access origin="maps.gstatic.com" />
<access origin="mt0.googleapis.com" />
<access origin="mt1.googleapis.com" />
<access origin="csi.gstatic.com" />

While this worked perfectly for Android 2.2.2 I would get the following issues on 4.2.2:

• Bottom of map missing the last row of tiles (if I use HTTPS for the google maps src)
• Markers would not display at all

By just whitelisting everything, all of these issues disappeared. However I do not want to whitelist everything so does anyone know if I'm missing something here?

Any help much appreciated.

EDIT: I understand that by using *.googleapis.com I would also encompass the remaining whitelist domains that are similar. However I have noticed a couple of times in my searches that iOS requires the domains to be listed explicitly. Although this may not be applicable here at the moment, I do intend this app to be used on iOS so I left it in (unless someone can tell me its completely useless and not needed ;-).

//////// UPDATE 1 ////////

After pouring through the network tab on chrome developer tools, I extracted all the URLs that are accessed by google maps. By explicitly stating each one of them, everything works OK like so:

    <access origin="https://mts.googleapis.com" subdomains="true"/>
    <access origin="https://mts0.googleapis.com" subdomains="true"/>
    <access origin="https://mts1.googleapis.com" subdomains="true"/>
    <access origin="https://maps.googleapis.com" subdomains="true"/>
    <access origin="https://fonts.googleapis.com" subdomains="true"/>
    <access origin="https://maps.gstatic.com" subdomains="true"/>
    <access origin="https://csi.gstatic.com" subdomains="true"/>
    <access origin="https://themes.googleusercontent.com" subdomains="true"/>

These are probably subject to change so it would be good if I could just use a wildcard * in front of each of the domains but this does not work. I have tried both of the following with no success:

    <access origin="*.googleapis.com" subdomains="true"/>
    <access origin="*.gstatic.com" subdomains="true"/>
    <access origin="*.googleusercontent.com" subdomains="true"/>


    <access origin="https://*.googleapis.com" subdomains="true"/>
    <access origin="https://*.gstatic.com" subdomains="true"/>
    <access origin="https://*.googleusercontent.com" subdomains="true"/>

Anyone have any ideas as to why I am unable to use the wildcard in these cases? Cheers.

//////// UPDATE 2 / ANSWER ////////

After much experimentation I have found the answer. Looks like you have to be very specific in how you write the tags in config.xml especially when it comes to allowing subdomains - apparently specifying subdomains does not work with wildcards so you need two blocks of tags. I finally have both devices working correctly using https using the following:

    <access origin="*.google.com" />
    <access origin="*.googleapis.com" />
    <access origin="*.gstatic.com" />
    <access origin="*.googleusercontent.com" />
    <access origin="google.com" subdomains="true"/>
    <access origin="googleapis.com" subdomains="true"/>
    <access origin="gstatic.com" subdomains="true"/>
    <access origin="googleusercontent.com" subdomains="true"/>

Hopefully this will be of use to someone. I still dont understand why it worked fine on the older version of Android. Maybe someone can help enlighten me if they so feel?

Answer 1

The syntax for whitelisting domains has changed with versions of PhoneGap. If you are on version 3.1 or greater, see this documentation for the syntax: http://docs.phonegap.com/en/3.1.0/guide_appdev_whitelist_index.md.html. I am thinking that may be why your wildcards was not working for you.

I am using the following and it works to show my Google Maps in my PhoneGap App:

<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />