Не нашел в сети решение данной проблемы поэтому решил разобраться сам. Если в для 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 соответственно. Демо здесь

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить

Комментарии   

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

Решение работает четко.
0
Владимир
# Владимир 05.10.2012 14:34
Блин, а у меня что то не работает. можете кинуть ссылку на рабочий пример, что бы детальней изучить код?
0
Leroy
# Leroy 05.10.2012 18:43
http://taxi-leader.ru/contacts.html
0
Лол
# Лол 11.12.2012 18:00
карта не грузится в хроме, только после того как ее потаскаешь мышкой
0
Leroy
# Leroy 11.12.2012 18:08
у меня отлично грузится, очередной глюк
0
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 и после ручной смены типа - глюк пропадает. Пока не нашел решение.