Клуб API Карт

Yandex-карта в fancybox

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

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

Знаю что тема не нова, делал как здесь

 

http://clubs.ya.ru/mapsapi/replies.xml?item_no=7814&parent_id=7821

 

Но понял не до конца! 

 

 <script type="text/javascript">
$(document).ready(function() {
    $("a#mtd").fancybox({
        'callbackOnShow' : function () {
            var mapContainer = YMaps.jQuery('<div style="width:500px;height:250px"></div>')
                                    .appendTo(YMaps.jQuery("#fancy_div")),
                map = new YMaps.Map(mapContainer);
                
            map.setCenter(new YMaps.GeoPoint(37.866883,55.740195), 10);
        }
    }
}
 </script>
<a  id="mtd" href="#map">Карта</a>
<div id="fancy_div" style="display:none;">  </div>

 

Тестовая страница здесь

http://vseryadom.ru/page_1332766294_2.php

 

Не работает... Не пойму где ошибка, наверное что-то глупое! Подскажите пожалуйста!

9 комментариев
Александр Новиков
28 января 2016, 05:07
Зачем делать mapContainer[0] ???
Сделайте просто mapContainer

Логично, исправил. Но проблема не в этом думаю...

Александр Новиков
28 января 2016, 05:07
Ну и не в этом в том числе. Посмотрите документацию на fancybox

А пока попробуйте поменять текст ссылки на Карта
Александр Новиков
28 января 2016, 05:07
Т.е. в href поставить #fancy_div вместо #map
А то объекта с таки id у вас нет и и получается что fancybox открывает внутри себя непонятно что.

Это я уже  сам заметил и попробовал. Fancybox зараза капризен, щас покопаюсь - попробою для начала просто блок всплывающий вывести (не карту), а потом видно будет...

Сделал вывод простого окна по ссылке проверка, что-то в коде вывода карты не то всё-таки, поскольку по аналогии не получается...

Гораздо менее изящный способ, но рабочий

 

   

 

 

 

Карта

 

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

<script type="text/javascript">
    YMaps.jQuery(function () {
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
        map.setCenter(new YMaps.GeoPoint(30.496798, 50.456056), 12);

$("#various").fancybox({
        'onComplete': function () {
         map.redraw();
        }
    });
    });
        $(document).ready(function() {
                $("#various").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });
        });
script>


Ссылка
<div style="display: none;">
<div id="YMapsID" style="width:895px;height:495px">div>           
div>

 

Вот так работает: 


 

 

Что касается transitionIn,transitionOut - у самого не работает!