Клуб API Карт

Ajax загрузка карты

Пост в архиве.

Добрый день!


Мне необходимо динамически (через ajax) подгружать контент с картой. Т.е изначально пользователь видит страницу с формой, куда он вводит адрес и нажимает на кнопку, после этого, вместо формы динамически подгружается контент с картой, на которой отмечен его адрес.


Как лучше всего сделать это сделать?


К сожалению, ни один из вариантов, найденных мною не работает. Максимум что удается вывести - серый прямоугольник на месте карты. Я пробовал загрузку по требованию и redraw - результат одинаковый: без ajax все работает прекрасно, но когда карта подгружается через ajax на ее месте серый прямоугольник.

11 комментариев
гм, много раз так делал( точнее будем считать что делал так всегда)
и все работает.
одно только "НО"
не испльзуйте jQuery.html для создания DOM части карты и загрузки скриптов.
Надо проше, по старинке :)
Можно подробнее?


Нужно ли добавлять параметр отложенной загрузки в http://api-maps.yandex.ru/1.1/index.xml?key=.... Куда вставлять теги script с этим адресом? В постоянную часть страницы или которая приходит через ajax? И, если возможно, пример самый простой.


Просто я уже пробовал и так и сяк и у меня везде какой-нибудь баг вылазит.


Заранее спасибо!
самое лучшее будет если вы покажите пациента..
а так по сути...

подключение скрипта через
function add_script(src){
    var fileref=document.createElement("script");
    fileref.type="text/javascript";
      fileref.src=src;
      document.getElementsByTagName("head")[0].appendChild(fileref);
}
подключаем Якарты в ЛЮБОМ виде.
после чего через setTimeout делаем им инициализацию.

в случае если вы контент загружаете через jQuery.html - он проходит некие пертрубации и очень часто портиться( лично у меня после него карты не включаются ).
Как самый явный пример - в случае подключения скриптов в вставляемом блоке - они будут запрошены через ajax, а не "просто так"

а вот если сделать что-то типа - jQuery(selector).get(0).innerHTML=htmldata;
все отработает изумительно.
при желании можно вырвать от туда скрипты и выполнить отдельно..

но вот вам рабочий вариант через ajax

$.ajax
     ({async:true,
       url:"/map/injectFrame?rand="+Math.random()+"&"+loc+'-'+map_extended_layers,
                            contentType: "application/x-www-form-urlencoded;charset=cp1251",
                            success:function(data){
                            setTimeout(function(){$("#mapStorage").get(0).innerHTML(data);
setTimeout(function(){MAP_START();},1); },1);},1);});
Вызываем ajax, в timeout(работаем от window) имплантируем данные в ноду, через еще один timeout(обновление дом дерева, испольнение скриптов) запускаем функцию, описанную в теле..

при использовании prototype.js еще проше
$("somediv").innerHTML=(data);
 data.evalScripts();


А зачем подключать через add_script?



После подключения скрипта через  add_script пишет 'YMaps not defined'
Спасибо тебе добрый человек, thekashey! Что не прошел мимо и не остался равнодушным!


Проблема решилась добавлением setTimeout к YMaps.load


Сейчас это уже очевидно, но сам бы я не скоро доехал до этого.
угу, очень полезная операция.
еще один, изначально не ясный, баг заключается в том что внутри YMaps.Load без дополнительных телодвижений сушесвует jquery именно от яндекс карт.
И если версии у вас расходятся - могут быть поразительные глюки :)
setTimeout "анонимизирует" вашу функцию, так как она выполниться в контексте window( если не делать дополнительных телодвижений )

еще один хороший вариант убрать малек багов выполнения - обернуть свой код в анонимную функцию.
типа
(function(){
 var $=jQuery; //запомним именно что свой вариант
 ..code...
})();
заодно обезопасимся от других возможных внешних факторов
Sergey Konstantinov
28 января 2016, 07:32
> YMaps.Load без дополнительных телодвижений сушесвует jquery именно от
яндекс карт.

В версии 1.1.9 эта проблема все еще воспроизводится?
только что проверил - все нормально.
хотя всеравно вызов идет из контекста YMaps напрямую, что по моему мнению, вредно.

А вот с прототип.js все еще не идеально дружит

Поднимем старую тему.

Объясните, пожалуйста, поподробнее.

Гружу при помощи функции JQuery load().  php-file, в котором лежит карта. В способах, представленных ранее, не разобрался. У меня там такой кусок кода (в подгружаемом файле):

.......



                               
                                   
                                    http://api.yandex.ru/maps/tools/constructor/" style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт

.........................

В результате виден только div где написано "Создано с помощью....". А на месте карты пустое место.  Также выдается ошибка "YMaps is not defined".  Что мне можно сделать? Заранее спасибо.