Javascript Error - Can't find variable : google

Question

The code I wrote runs absolutely fine on the browser. But when I connect to wifi on the iPhone I get an error in the debugger : Javascript Error - Can't find variable : google

This occurs whenever I call any google maps/directions/geoLocation object.

---

The code is as follows :

map = new Ext.Map({
    mapOptions : {
        center : center,
        zoom : 20,
       // mapTypeId : google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            }
    },

    listeners : {
        maprender : function(comp, map){
            pos = new google.maps.LatLng(lats, longs, true);
            var marker = new google.maps.Marker({
                 position: pos,
                 //title : 'Sencha HQ',
                 map: map
            });

            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            setTimeout( function(){map.panTo (pos);} , 1000);
        }
    },

     geo:new Ext.util.GeoLocation({
         autoUpdate:true,
         maximumAge: 0,
         timeout:2000,
         listeners:{
             locationupdate: function(geo) {
                 pos = new google.maps.LatLng(lats, longs, true);
                 center = new google.maps.LatLng(geo.latitude, geo.longitude);
                 if (map.rendered)
                     map.update(center)
                 else
                     map.on('activate', map.onUpdate, map, {single: true, data: pos});
             },
             locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                 if(bLocationUnavailable){
                     alert('Your Current Location is Unavailable on this device');
                 }
                 else if (bPermissionDenied){
                     alert('Location capabilities have been disabled on this device.');
                 }      
             }
         }
     })
});

The error occurs whenever the code encounters the word google. Also for the LatLng object I get the javascript error : "....result of LatLng not a constructor"

Note : the variables "lats" and "longs" have been defined n given values before this segment of code

Answer 1

What worked for me: remove the "https" from the

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

so it becomes

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

I don't know why Safari doesn't load secure pages on unsecured ones but it just doesn't seem to. And then throws the error. This is the only mobile browser that seems to behave like that.

Answer 2

So I had posted this earlier as a comment, but since this is the actual solution to the problem, I'm gonna post it once more :D

Ok turns out that the reason I was getting all those errors is cos I was behind a proxy. Weirdly enough the proxy lets me access the google libraries and server when I'm connected using the LAN cable, but not when Im using WiFi. Hope some1 else who's stuck wid this kind of error will find this somewhat helpful :)

Answer 3

Could it be that you're loading the Google JavaScript libraries from the Google server? If so, when you don't have WiFi, that won't work. That's why the "google" object is not defined. You can only use Google Maps and such when you're device is online.

EDIT: Nevermind, you said you ARE connected via WiFi. Odd. I guess we need to see your full source code then.

Answer 4

My solution was to simply make sure the Google Maps js loads before the Touch js. Simply put

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

before

<script id="microloader" type="text/javascript" src="touch/microloader/development.js"</script>

Answer 5

Check if your config.xml have permission to navigate into Google Api Address that you write in index.html. Double check if you are working with 'https' or 'http'. I did with 'https'

In your index.html:

`<script src="https://maps.google.com/maps/api/js?key=APIKEY" async defer type="text/javascript"></script>`

In your config.xml

`<access origin="https://maps.google.com/*" />
<allow-intent href="https://maps.google.com/*" />
<access origin="https://maps.gstatic.com/*" />
<allow-intent href="https://maps.gstatic.com/*" />
<access origin="https://maps.googleapis.com/*" />
<allow-intent href="https://maps.googleapis.com/*" />
<access origin="https://fonts.googleapis.com/*" />
<allow-intent href="https://fonts.googleapis.com/*" />`

This worked for me!