Не нашел в сети решение данной проблемы поэтому решил разобраться сам. Если в для API v1.x есть достойное решение с использованием метода redraw, то в API версии 2.0 такого метода нет.
Для начала, посмотрим как это работает в версии 1.x.
$( 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
<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.
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 соответственно. Демо здесь
Комментарии
Решение работает четко.
У меня другая бага. Всё вывел, но селектор выбора типа карты почему-то отображается 30х32 и после ручной смены типа - глюк пропадает. Пока не нашел решение.