#getscript

Working on a Cordova application that interfaced with Google Maps I faced a peculiar challenge--I was using a single page using jQuery Mobile that was the heart of my Cordova application. Since this was a mobile application I needed to detect if the user was online before trying to display the map. Now, as this was a single page application and the user might start it in offline mode I couldn't include the <script> tag for the Google Maps API in my markup. This left me with two alternatives--one was to separate the map page from the rest of the application and put a normal script tag there so it would be loaded each time the user navigated to the page; the other way was to dynamically load the Maps API. Determined not to take the first approach (as it would introduce redundancy in my code and reduce maintainability of my application) I needed to go with dynamic loading. 

jQuery seems to have an answer to everything, and it did have this cool function called getScript that used Ajax to dynamically load a script and execute it. But soon it became apparent that this was not going to work as Google used document.write to further insert a number of scripts into the page. A big :-(!!!

Almost having given up I found this awesome solution on a blog, but I haven't been able to find much documentation on it, so basically although I got it work I still don't really know what's going on.

The way to do this is this magical line of JavaScript code:

$.getScript("http://maps.googleapis.com/maps/api/js?key=myapikey&sensor=false&async=2&callback=showGMap");

where you replace myapikey with your Google Maps API v3 key and showGMap with the name of the function that's handling the displaying of the Google Map on your page. What's important here are the parameters async and callback.

I am not sure what async=2 does; of course it loads Google Maps asynchronously and then calls the callback function when it's ready and loaded, but I am still searching for the significance of that '2'.

When using jQuery's getScript method to pull in external resources, the responses are placed inline. This causes a lot of issues when trying to debug with IE. You'll see errors on lines that don't exists (11,000,000 for example) thus making it nearly impossible to accurately debug your code.