My<cod/>.net
Асинхронная загрузка XML и Google Maps в jQuery
Просмотров: 393
Ответов: 4
Ситуация: загружаются XML-файл и карты Гугла, чтобы данные из XML на ней отобразить. Делается всё асинхронно, требуется отследить, когда оба запроса выполнены.
Единственный простой способ, который я нашёл — Deferred objects в jQuery.
Пишем
function loadXML() {
return $.ajax({ url: 'data.xml', dataType: 'xml' });
}
Возвращаемый объект засовываем в $.when
$.when( loadXML(), ... ).then(function(){
doSomethind();
});
Проблемы возникают с загрузкой карты. Гугл предлагает следующий код для асинхронной загрузки:
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
Хочется знать, когда скрипт будет загружен и произойдёт обращение к initialize(). Первая мысль — запихать в initialize() ручное создание deferred-объекта и возвращать .promise(), но непонятно, что же добавить в $.when, чтобы тот сработал после того, как все методы API карт стали доступны.
Спасибо.
return $.ajax({ url: 'data.xml', dataType: 'xml' });
}
doSomethind();
});
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
Решение:
коротко — при загрузке карты руками создать 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();
}
Для jquery есть волшебный плагин последовательных запросов. Тобишь пока не обработается первый. второй не будет отправлен.
code.google.com/p/jquery-ajaxq/
<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 });
<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>var markersKML = new google.maps.KmlLayer('http://your-site.com/points.kmz', {'map' : map, preserveViewport : true });