Load google maps API when internet is available via Ext.data.connection Sencha Touch and Phonegap

Question

I use Sencha Touch and Phonegap to build a small app.
In this app I need the google maps API as I want to display a map.

There is a problem if the device has no internet connection, so the google maps API couldn't be loaded in the html. So I check for the internet connection.
If the internet connection is available I try to load the google maps API with Ext.data.connection:

var conn = new Ext.data.Connection();
var url = 'http://maps.google.com/maps/api/js?sensor=true&'; 
conn.request({  
     url: url,
     callback: function(options, success, response){
           if(response && response.responseText){
                // do something
           }
     },
     method:'GET'}
);

If I test the app in google chrome I receive following error: XMLHttpRequest cannot load http://maps.google.com/maps/api/js?sensor=true&amp ;_dc=1302077479281. Origin null is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://maps.google.com/maps/api/js?sensor=true&amp ;_dc=1302077479281. Origin null is not allowed by Access-Control-Allow-Origin.

It doesn't matter if I try to invoke the HTML via file:/// or via a webserver ( http://localhost/app )

How can I get the google maps API and "bypass" or avoid this Access-Control-behaviour?

Answer 1

Hering, sorry, this won't be an easy answer.

I think you want to use a conditional script loader. These are api's that will add the script to the document only if a condition (you have a network connection) is met.

A good one is http://yepnopejs.com/

According to this thread, it is possible to load google maps, but you must do as it says in the thread. Google Maps with YepNope

Specifically, include yepnope.js and remove any references to google maps.

yepnope([{
        load: 'http://www.google.com/jsapi',
        callback: function(){
            google.load("maps", "3", {
                callback: function(){
                    console.log("loaded");
                },
                other_params: "sensor=false"
            });
        }
    }]);

When it is time to render the map (which must be done after Google Maps is fully loaded) make sure you add the Ext.Map card, then call:

this.doLayout();

I think this'll work great for you, it's working for me...

Answer 2

I found some instructions from google, so the following will work:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initializeMap";
document.body.appendChild(script);