Asynchronously loading XML and Google Maps in jQuery?

Question

JavaScript

Situation: an XML file and Google maps are loaded in order to display data from XML on it. Everything is done asynchronously, it is required to track when both requests are completed.
The only easy way I've found is Deferred objects in jQuery.
We write

function loadXML() {<br/>
 return $.ajax({ url: 'data.xml', dataType: 'xml' });<br/>
}

Throw the returned object into $.when

$.when( loadXML(), ... ).then(function(){<br/>
 doSomethind();<br/>
});

Problems arise with loading the map. Google suggests the following code for asynchronous loading:

function loadScript() {<br/>
 var script = document.createElement(&quot;script&quot;);<br/>
 script.type = &quot;text/javascript&quot;;<br/>
 script.src = &quot;http://maps.google.com/maps/api/js?sensor=false&callback=initialize&quot;;<br/>
 document.body.appendChild(script);<br/>
}<br/>

I want to know when the script will be loaded and initialize() will be called. My first thought is to stuff initialize() with manual creation of a deferred object and return .promise(), but it's not clear what to add to $.when to make it work after all the methods of the map API become available.

Thank you.

Answer 1

Solution:
in short - when loading the map with your hands, create a deferred-object, set its resolve() when loading the map with callback in
full:

function loadXML() {
    return $.ajax({ url: 'data.xml', dataType: 'xml' });
}

function loadMap() {
    dfd = $.deferred();
    varscript = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=finishMapLoading";
    document.body.appendChild(script);
    return dfd.promise();
}

function finishMapLoading() {
    dfd.resolve();
}

function loadData() {
    varLMap = loadMap();
    var LXML = loadCoupons();
    $.when( LMap, LXML ).then( function() {
        doSomethingAwesome();
    });
}

window.onload = function() {
    loaddata();
}

Answer 2

For jquery there is a magical sequential query plugin. Tobish until the first one is processed. the second one will not be sent.
code.google.com/p/jquery-ajaxq/

Answer 3

And by the way… what's stopping you from inserting your loadScript function into the success event of the ajax request? this way it will be called when the data has already arrived + it can be passed as a function parameter

Answer 4

<script type="text/javascript" src="http://google.com/jsapi"></script>
<script>
var map;
google.load("maps", "3", {"callback" : mapsLoaded, "other_params" : "sensor=false"});
function mapsLoaded() {
var myOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>

And Google can also load KML (KMZ) instead of xml:

var markersKML = new google.maps.KmlLayer('http://your-site.com/points.kmz', {'map' : map, preserveViewport : true });