fancybox с яндекс картой

Информация о материале
Категория: JavaScript
Просмотров: 11182

 

Не нашел в сети решение данной проблемы поэтому решил разобраться сам. Если в для API v1.x есть достойное решение с использованием метода redraw, то в API версии 2.0 такого метода нет.

Для начала, посмотрим как это работает в версии  1.x. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( function() {
    var map = new YMaps.Map(document.getElementById('idmap'));
    map.setCenter(new YMaps.GeoPoint(55.952942,54.72998), 17);
    map.addControl(new YMaps.TypeControl());
    map.addControl(new YMaps.ToolBar());
    map.addControl(new YMaps.Zoom());
    map.addControl(new YMaps.MiniMap());
    map.addControl(new YMaps.ScaleLine());
    $("a.mapFan").fancybox({
        onLoad : function () { // либо для fancybox2 afterLoad
            map.redraw();
        }
    });
});

для такого html 

1
<a href="#idmap">Открыть fancy</a><div id="idmap" style="display:none;"></div>

это работает и сейчас, api поддерживается командой яндекс карт, однако мы ведь идем в ногу со временем, так что будем делать тоже самое для версии Yandex Map API v2.0.

Вся загвоздка в том, что у элемента страницы, у которого css свойство display равно none, т.е. он скрыт, размеры равны нулю. То бишь карту мы создаем, она инициализируется, но ее размеры равны width=0, height=0. Вот такой пример из документации по Yandex Map API предлагает интересное решение. Сперва инициализируется карта, а уже потом сам fancybox( в примере показано на примере другого jQuery плагина), при показе невидимого до этого блока вызывается метод container.fitToViewport();   

Как я не мучил данный способ, нормально работать я его так и не заставил. Мы пойдем другим путем. Будем подгружать Яндекс карту каждый раз при открытии fancybox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ymaps.ready(function  () {
  // Поиск координат центра Уфы
  $('.fancybox').fancybox({height:600,afterShow : function() {
    ymaps.geocode('г.Уфа ул.Кирова д.34', { results: 1 }).then(function (res) {
      // Выбираем первый результат геокодирования
      window.firstGeoObject = res.geoObjects.get(0);
      window.myMap = new ymaps.Map("idmap", {
        center: window.firstGeoObject.geometry.getCoordinates(),
        zoom: 17,
        behaviors: ["scrollZoom","drag"]
      });
    }, function (err) {
      // Если геокодирование не удалось,
      // сообщаем об ошибке
      console.log(err.message);
    });
  }, afterClose:function (){
    window.myMap.destroy();
    myMap = null;
  }});
});

 для fancybox первой версии события будут onComplete и onClosed соответственно. Демо здесь

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Павел
# Павел 12.09.2012 18:01
Спасибо сильно выручили!

Решение работает четко.
Владимир
# Владимир 05.10.2012 14:34
Блин, а у меня что то не работает. можете кинуть ссылку на рабочий пример, что бы детальней изучить код?
Leroy
# Leroy 05.10.2012 18:43
http://taxi-leader.ru/contacts.html
Лол
# Лол 11.12.2012 18:00
карта не грузится в хроме, только после того как ее потаскаешь мышкой
Leroy
# Leroy 11.12.2012 18:08
у меня отлично грузится, очередной глюк
webresident
# webresident 21.12.2012 17:03
Чтобы карат появилась - можно попробовать после отработки фансибокса применить метод map.container.fitToViewport(); Подробнее в доках http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/map.Container.xml



У меня другая бага. Всё вывел, но селектор выбора типа карты почему-то отображается 30х32 и после ручной смены типа - глюк пропадает. Пока не нашел решение.