Telephony cannot read / display the Google Maps API - "Cannot find Google variable" error

Question

Basic information and errors ...

I am trying to use the Google Maps API v3, Phonegap 2.9.0 and Xcode 4.6.3 to create an application that gets the current location of users and then returns them a list of the places closest to them (using Fusion Tables). It all works in any browser on my desktop, but after "porting" to Phonegap I get an error message.

The error I am getting is:

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

when I run the application in iPhone simulator in Xcode.

What i tried

I read countless docs about this issue and tried most fixes. I tried the whitelist of the API URL that I call (although it seems to me that this may be my problem, see Image below). Or maybe this is my code (see also below).

So, basically, is there something I am missing or doing wrong that is clearly obvious? I studied this for quite some time, and I did not have enough resources to read. Any help would be greatly appreciated.

My code

Whitelist / ExternalHosts?

larger image

I have a scheme where I have whitelisted Google domains, but for some reason I am a little worried if I did it right. I constantly read about where to find the ExternalHosts.plist file , but did not create this folder structure when I created my Phonegap directory. So instead, I made changes to the .plist file above, as well as the config.xml file

The code

My index.html page is pretty simple. It contains the usual header (CSS file includes, doctype, etc.). 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 ...

 <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> 

Finally, my map.js file (and everything else that you saw above) is in my Github registry ( https://github.com/jamez14/TrailFinder/blob/master/TrailFinder/www/js/map.js ) - Sorry for the bad naming convention (for example, call my Phonegap folder "TrailFinder" in the repo). In any case, you will see that my map.js file contains the usual “Phonegap geolocation material”.

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

 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 / advice would be greatly appreciated for making my Google map display on the iOS simulator in Xcode.

Answer 1

I decided!

In my index.html file, when I included the Maps API and jQuery URLs, I had

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

when I was supposed to put ...

 <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 only run the application locally and not over https , use http as the protocol. Otherwise, if you are serving the application on top of https , then of course use https .

Hope this helps someone else in the future. All this work is working on Github in a project that I worked on called TrailFinder. Just go to Trailfinder / www for Phonegap stuff.