Асинхронная загрузка XML и Google Maps в jQuery?

Question

[qrazydraqon]

Ситуация: загружаются XML-файл и карты Гугла, чтобы данные из XML на ней отобразить. Делается всё асинхронно, требуется отследить, когда оба запроса выполнены.

Единственный простой способ, который я нашёл — Deferred objects в jQuery.

Пишем

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

Возвращаемый объект засовываем в $.when

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

Проблемы возникают с загрузкой карты. Гугл предлагает следующий код для асинхронной загрузки:

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

Хочется знать, когда скрипт будет загружен и произойдёт обращение к initialize(). Первая мысль — запихать в initialize() ручное создание deferred-объекта и возвращать .promise(), но непонятно, что же добавить в $.when, чтобы тот сработал после того, как все методы API карт стали доступны.



Спасибо.

Answer 1

[qrazydraqon]

Решение:

коротко — при загрузке карты руками создать deferred-объект, задать при загрузке карты callback'ом его resolve()

полностью:

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

function loadMap() {
    dfd = $.Deferred();
    var script = 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() {
    var LMap = loadMap();
    var LXML = loadCoupons();
    $.when( LMap, LXML ).then( function() {
        doSomethingAwesome();
    });
}

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

Comments

[Матвей Румынин]

LoadCoupons имелось ввиду видимо LoadXML

Answer 2

[sajgak]

Для jquery есть волшебный плагин последовательных запросов. Тобишь пока не обработается первый. второй не будет отправлен.

code.google.com/p/jquery-ajaxq/

Answer 3

[sajgak]

И кстати… а что вам мешает в событие success ajax запроса вставить вашу функцию loadScript? таким образом она будет вызвана когда данные уже прийдут + они могут быть переданы как параметр функции

Comments

[qrazydraqon]

Инициализация карты идёт медленно, а XML-файл большой. При параллельном решении (см. ниже) значительно быстрее работает.

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>

А еще у Гугла можно KML (KMZ) грузить, вместо xml:

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

Comments

[qrazydraqon]

Я здесь не вижу загрузки XML вообще.

KML не подходит, там этот XML ещё в нескольких местах используется, плюс в нём же куча дополнительной информации.