Клуб API Карт

API карта в Fancybox

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

Здравствуйте.

Прочитал множество тем и статей, но так и не смог справиться со своей проблемой.

Есть ссылка, при нажатии на неё дожна открываться яндекс карта с меткой. Получилось открыть оболочку яндекс карты, но самой карты нет(серое всё) и метка уехала. Как сделать загрузку карты и метки правильно?

Реализация: ссылка открывает невидимый див внутри которого находится див с идентификатором карты, т.к. реализация идёт через fancybox, то карта должна открыватья во всплывающем окне.

$(function() {
    var map3 = new YMaps.Map($("#YMap2")[0]);
    map3.setCenter(new YMaps.GeoPoint(31.20953,58.504516), 16);
    map3.addControl(new YMaps.TypeControl());
    map3.addControl(new YMaps.ToolBar());
    map3.addControl(new YMaps.Zoom());
    map3.addControl(new YMaps.MiniMap());
    map3.addControl(new YMaps.ScaleLine());

var placemark3 = new YMaps.Placemark(new YMaps.GeoPoint(31.20953,58.504516), {hideIcon: false});
placemark3.name = "ILMER";
placemark3.description = "Организация ILMER";
map3.addOverlay(placemark3);

    $("a.mapFan").fancybox({
        onLoad : function () {
            map3.redraw();
        }
    });
});
  
 <a class="mapFan" href="#YMap2">Как нас найти?</a>
...
<div style="display:none;">
<div id="YMap2" style="width: 960px; height: 640px;"><!--Карта--></div>
</div>

 Клиент: ILMER

Нажать на "Как нас найти?" в самом вверху.

Дополнение: сайт сделан на Joomla

Дополнение2: Если нажать F12(у меня стоит FireBUG), то карта сдвигается и нормально рисуется. Вероятно это из-за перемещения контейнера с картой. Как сделать, чтобы она всё таки перерисовывалась сама?

12 комментариев

У вас на странице javascript-ошибки.

Из-за этого карта может не отрисовываться.

 

Сделайте простой пример в котором будет одна карта и fancybox,

и один, а не три как сейчас, обработчика document.ready

 

Попробовал сделать, как вы сказали, но симптомы проблемы теже. Оставил только map, конечно, обычная карта(которая всегда видна) исчезла, но это из-за одинаковых ID для 2 дивов.А можно как-нибудь вызвать перерисовку как-будто карта сдвинулась\изменилась?ЗЫ: Сорри, что в почте ответил ещё, не освоился, думал на почту написали, а не сюда.

поставьте firebug и проверьте отрабатывает ли вообще onLoad у fancyBox

Насколько я могу судить(поставил точку остановки) он при загрузке страницы обрабатывает onLoad, но не заходит внутрь(т.е. не делает redraw), ползает по js от fancybox. При нажатии на ссылку до точки остановки ничего не доходит.

Видимо у fancybox нет события onLoad, а есть onComplete

Спасибо большое! Теперь намного лучше.

Так получилось, что я использую 2 шаблона на Joomla. Первый - для первой странице, второй - для остальных.

По какой-то непонятной причине 2 шаблон легко отрабатывает получение 2 экземпляра карты(для всплывающего окна, 1-ый нужен для отображения на последней странце), но 1-ый шаблон извиняется, говоря "The requested content cannot be loaded. Please try later.".

Я так понимаю почему-то первый шаблон не может загрузить карту или проблема в другом?

В обоих шабонах подключены одни и теже стили и js-файлы, специально проверял - всё аналогично, причём отрабатывает же.

PS:Попробовал не скрывать контейнер для 1-го шаблона. Карта грузится без проблем, но во всплывающем окне всё равно таже надпись.

а что не так сейчас?

Я вижу что еще есть js-ошибки в хроме

вам надо mootols обновить или убрать

Смущает то, что всплывающая карта не работает в первом шаблоне, но работает во-втором.
Мммм...а почему mootols надо трогать? Он если включён, то везде, а не работает только на первой странице...

старые версии mootols и prototype могут конфликтовать с АПИ

Огромнейшее спасибо. При отключении mootools API карты стал работать более кроссбраузерно.

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

Спасибо за терпение. Когда решу проблему с 1 страницей - напишу сюда.

Ошибка в первом шаблоне оказалась глупой. В href(см код ниже) не поставил #

 Как нас найти?

Итак, всё оказалось проще, чем думается, но как обычно есть много ньюансов.

Спасибо, Лунный програмист, ваша помощь была очень кстати.

Послесловие для тех кто столкнётся с аналогичной проблемой:

- Отключайте Mootools, если вы не собираетесь использовать его возможности.

- Изучайте API плагина, в котором вы собираетесь отобразить карту.

- Обратите внимание на подключаемые js-файлы и порядок их подключения.