Клуб API Карт

Открыть карту через AJAX-окно

drusha11111
6 сентября 2010, 12:53

Не думаю, что это распространенный способ применения Я.Карт, но поделюсь опытом реализации (потому как побился головой сначала о пустую страницу, а потом -- о серое окно, пришлось несколько часов).

Во-первых, вам потребуется модуль с "загрузкой по требованию".

В моем случае для открытия симпатичного окошка использовался Fancybox, у вас может быть что-то другое.

Инициализация ссылки для открытия окна должна выглядеть так:

$("a[rel=maps]").fancybox({
        ajax : {
            type    : "POST",            
            data    : 'window=yes'

        }

Параметр window передается для того, чтобы можно было либо выдать голый текст (если обращение через AJAX), либо отобразить навигацию, шапку и прочее -- если пользователь открыл ссылку в новой вкладке, например.

Родительская страница прикрепляет к себе API (которое по требованию, и не содержит document.write). Внутри страницы, которая грузится аяксом, вызывается функция YMaps.load(StartMap), где StartMap -- имя функции с описанием нашей карты (создание объекта Я.Карт, добавление навигации, расположение элементов, подъем баллонов и т.п.).

Ну, как передать координаты искомой точки, решать уже вам.

Буду рад, если кому-то поможет. Посмотреть, как работает, можно тут: http://kliniks.ru/i/maternity/3380.html

ЗЫ. Выяснилось, что первоначальный вариант работает только в ФФ, что есть очень и очень плохо.

В других браузерах заработал после того, как загрузку API перенес в родительскую страницу, а в подгружаемом блоке была только логика.

Осталась одна неприятная проблема, соответственно, вопрос к разработчикам.

Если создать экземпляр объекта карты, прикрепив его с свежесозданному div'у, все замечательно отображается.

Если этот экземпляр удалить (поскольку див тоже удаляется, деваться некуда, хоть с деструктором, хоть без), а потом попытаться сделать новый div и новый экземпляр карты, то балуны отображаются, объекты и вся обвязка тоже. А вот собственно карта не загружается -- внутренний div с тайлами пустой.

Это так и должно быть, или это глюк?

UPD: Проблему я решил довольно странным, хотя и логичным способом:

Сразу после загрузки окна (через callback-функцию) запускается функция отрисовки карты: все, что обычно выполняется при загрузке, но только в отдельной процедуре.

И -- главное! -- через любой промежуток времени ПОСЛЕ этого запускается setTimeout("map.redraw ()", 200). 200 -- число произвольное, даже с 10 миллисекундами все прекрасно работает. Полагаю, это происходит из-за того, что некоторые элементы окна прорисовываются на несколько мс дольше, чем рисуется карта. Причем, замечу, что запуск всей функции прорисовки через 200 мс ничего не дает. Нужно именно redraw провести.

10 комментариев
Подписаться на комментарии к посту
а я бы сделал карту в скрытом диве, который бы потом показывал, когда нужно..
А для нового окна что делать?
зачем новое окно?
просто смещать карту куда надо и все тут
посмотрел, не работает
ОС/Браузер?
Ubuntu 10.04, Firefox 3.6.8 -- показывает все, что нужно.
Выглядит, правда, пока не совсем так, как нужно, но работа еще продолжается:)
хром 6ой. но при чём тут браузер? Проблема в том, кто делал.
Скорее проблема "впополаме" -- не думаю, что кто-то еще запускал карту из фэнсибокса:)
Решение описал в апдейте к посту.
Описал решение в апдейте.
Можете, кстати, в пост с проблемами добавить -- "Иногда redraw для решения проблемы просто запустить недостаточно -- нужно запустить его через какой-то небольшой промежуток времени с помощью setTimeout()"