Клуб API Карт

Яндекс.карта в динамическом Fancybox. Возможно ли???

agencylab
30 мая 2011, 14:42

Добрый день! Попытался воспользоваться ФАКами, справками и поиском ничего не нашел (может плохо искал?). Наверняка тема уже пережованная и не такая специфическая как мне могло показаться. Итак, что у меня не получается?

 

ЗАДАЧА: Необходимо посредствам плагина Fancybox открыть Яндекс карту в модальном окне. Реализовано так - есть некая ссылка в верстке 

<a href="/map.php?ID=12345" class="ya-map">Карта</a>

 

Есть JS который при нажатии на данную ссылку подключает fancybox который в свою очередь смотрит hreff ссылки и пытается отобразить в модальном окне то, что вернется от  /map.php?ID=12345

Вот код: 

 

$(function() {

    $(".ya-map").fancybox({'padding': 0, 'titleShow': false}

}

 

 

 

Что происходит в файле /map.php - по ID=12345 из базы выбираются некоторые данные по ID для отображения их в баллуне на карте и подключается непосредственно сам код вызова карты. Вот код:

 

 

<script src="http://api-maps.yandex.ru/1.1/?key=##############################&wizard=constructor" type="text/javascript"></script>

<script type="text/javascript">

    YMaps.jQuery(window).load(function () {

        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]

        map.setCenter(new YMaps.GeoPoint(<?=$CORDS?>), 16, YMaps.MapType.MAP);

        map.addControl(new YMaps.Zoom()

        map.addControl(new YMaps.ToolBar()

        map.addControl(new YMaps.TypeControl()

        map.openBalloon(new YMaps.GeoPoint(<?=$CORDS?>), "<div style='color: #67797D; font-size: 20px; padding-bottom: 5px;'><?=htmlspecialchars($arElement['NAME'])?></div><b>Координаты для GPS:</b> <?=htmlspecialchars($CORDS)?></span>", {hasCloseButton:false, maxWidth:400, margin: 10}

       

        function createObject (type, point, style, description) {

            var allowObjects = ["Placemark", "Polyline", "Polygon"],

                index = YMaps.jQuery.inArray( type, allowObjects),

                constructor = allowObjects[(index == -1) ? 0 : index];

                description = description || "";

            

            var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}

            object.description = description;

            

            return object;

        }

    }

</script>

<!-- Yandex.Map --><div id="YMapsID" style="width:100%; height:600px;"></div><!-- End //Yandex.Map -->

 

 

Решетки мною вставлены преднамеренно, если зайти по прямой ссылке /map.php?ID=12345 карта отображается как нужно, без проблем. Так же при нажатии на ссылку срабатывает фансибокс и модальное окно так же без проблем показывается, в консоли проблем и ошибок никаких нет, все работает отлично. 

 

В ЧЕМ ПРОБЛЕМА: Модальное окно фансибокса открывается, но в нем пусто!!! Это я так понимаю то же самое, что вставить вызов яндекс.карты в див, у которого стиль прописан display: none; а потом попытаться из скрипта сделать видимым данный див $("div").show( будет тот же эффект, карта не отобразиться.

 

ВОПРОС: Посдкажите пожалуйста, неужели не возможно отображать яндекс.карту в динмических каких либо элементах, которые генерируются скриптом, а не при загрузке страницы??? Если можно, дайти ссылку на мануал где почитать как это делать!???? Я больше чем уверен, что это возможно, иначе это просто какая то нелепость будет!

 

Заранее благодарен за помощь!!!

 

 

 

 

12 комментариев
Подписаться на комментарии к посту

сначала открой всплывающее окно нужных размеров и потом грузи туда карту.

не знаю как на fancybox, (я юзаю facebox), я бы в вызываемый php файл вставилдив нужного размера, а потом по событию document ready вызывал яваскрипт

Дело в том, что существует необходимость именно в таком подключении файла, через отдельный файл, тоесть на файл, в котором происходит инициализация карты, имеется ссылка на которую навешен фансибокс

блин, я тебя не понял. Если ты меня тоже не понял попробую обьяснить

вот у тебя ссылка Карта

в этом файле у тебя должен быть код

  - с размерами карты

и событие document ready function в котором после загрузки документа инициализируется яваскрипт карты

Именно так все и происходит, вот смотри - http://www.nash-dzerzhinskij.ru/yandex-map.php?ID=1875

 

Вот это файл, который открывается по клику на ссылке с фансибоксом. Слеловательно фансибокс должен показать то, что вернется с этого адреса, но тем не менее показывается пустое модальное окно ((((

Fancybox не будет отрабатывать window.onload (onload давно произошел).

Поэтому код надо писать примерно так:

  

И? что поменялось? ситуация аналогичная (

 

Есть JS который при нажатии на данную ссылку подключает fancybox который в свою очередь смотрит hreff ссылки и пытается отобразить в модальном окне то, что вернется от  /map.php?ID=12345

 

Можно этот js увидеть?

а лучше ссылку на страницу с Fancybox

Вот он этот JS

 

 

$(function() {    $(".ya-map").fancybox({'padding': 0, 'titleShow': false});});

 

 

а вот сама ссылка:

 

Карта

 

Можно увидеть страницу, с которой открывается fancybox?

к сожалени, пока нельзя, раздел в разработке. объясните зачем??? там есть ссылка и на нее навешен $(".class").fancybox(); больше ничего нет там.

Просто не понятно что именно там может не работать

 


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



   


    FancyBox 1.3.4 | Demonstration


   


   



 



    http://api.yandex.ru/maps/jsapi/examples/mapbasics.html">Iframe