Phonegap unable to read/render Google Maps API - "Can't find variable Google" error

Question

Basic info and error...

I'm attempting to use Google Maps API v3, Phonegap 2.9.0 and Xcode 4.6.3 to create an app that gets the users current location and then returns them a list of a set of closest locations to them (using Fusion Tables). This is all working in any browser on my desktop, but once "ported" to Phonegap, I am getting an error.

The error I am receiving is:

ReferenceError: Can't find variable: google in (/somepath/)

when I run the app in the iPhone simulator in Xcode.

What I have tried

I have read countless docs about this issue and attempted most all of the fixes recommended. I have tried to whitelist of API url that I call (although I feel as if this might possibly be my issue, see image below). Or maybe it is my code (see also below).

So basically, is there anything I'm missing or doing wrong that is blatantly obvious? I have been researching this for quite a while and have run out of resources to read. Any help would be greatly appreciated.

My code

Whitelist/ExternalHosts?

bigger image

I have outline where I have "whitelisted" the Google domains, but for some reason I am a bit wary about whether or not I have done this correctly. I constantly read about where to find the ExternalHosts.plist file, but didn't have that folder structure when I created my Phonegap directory. So instead I made the edits to the .plist file above and also the config.xml file

The code

My index.html page is pretty basic. It contains the usual header stuff (CSS file includes, doctype, etc.). The body has

<div id="map" class="google-map-canvas"></div>

<table class="table table-condensed table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
            <th>Distance</th>
        </tr>
    </thead>
    <tbody id="sidebar-data">
                <!--data gets put into here-->
    </tbody>
</table>

The footer has this...

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="cordova.js"></script>
<script src="js/map.js"></script>

Lastly, my map.js file (and everything else you saw above) is in my Github repo (https://github.com/jamez14/TrailFinder/blob/master/TrailFinder/www/js/map.js) - Sorry about the poor naming convention (i.e. calling my Phonegap folder "TrailFinder" in the repo). Either way, you'll see the my map.js file contains the usual "Phonegap geolocation stuff".

I also tried this recommendation about adding the Maps API call (Google Maps API v3 not working in mobile browsers or PhoneGap) with no luck.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    alert('onDeviceReady');
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

window.onerror = function(message, url, lineNumber) {
    alert("Error: "+message+" in "+url+" at line "+lineNumber);
}

var map;

function onSuccess(position) {
//lots of stuff below this in the actual file

Once again, any help/tips would be greatly appreciated on how to get my Google Map to show up on the iOS simulator in Xcode.

Answer 1

Solved it!

On my index.html file when I was including the Maps API and jQuery URLs, I had

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

when I should have been putting...

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

and

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

If you're just running the application locally, not over https, then use http as the protocol. Otherwise if you are serving the application over https then of course use the https instead.

Hopefully this helps someone else in the future. All of this work is up on my Github in a project I've been working on called TrailFinder. Just check out the Trailfinder/www for the Phonegap stuff.