Клуб API Карт

Клуб API Карт

YMaps и fancybox

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

Собственно подгружаю карту в fancybox, после чего она высвечивается серым квадратом с коопирайтами.


в head 

    <script type="text/javascript">
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(92.838046, 56.016859), 10);
        }
    </script>
<script type="text/javascript"> 
$(document).ready(function() {
 
$("a#contact").fancybox({
'overlayOpacity' : 0.6,
'overlayColor' : '#000',
'hideOnContentClick': false
});
 

});
</script>

 

 


<a title="Контакты" id="contact" href="#map">Контакты</a>


 

<div id="map" style="display:none;">

    <div id="YMapsID" style="width:500px;height:250px"></div>

</div>

 


P.S. Без бокса карта отображается нормально.

7 комментариев
Авторизуйтесь, чтобы оставить комментарий
rodlex
28 января 2016, 07:59
После отображения бокса вызывайте метод карты redraw().
Илья Д.
28 января 2016, 07:59
Блин, не могу понять, что я не так делаю O_o. Пардон если туплю, просто закипаю тут.
rodlex
28 января 2016, 07:59
А не могли бы вы дать ссылку на страницу?
Илья Д.
28 января 2016, 07:59
Вот пример http://doniv.ru/oootibis/main.html#
rodlex
28 января 2016, 07:59
fancybox копирует содержимое контейнера c id=mapcon.

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

Выходов несколько:
1. Можно просто написать так
$(document).ready(function() {
    $("a#contact").fancybox({
        'callbackOnShow' : function () {
            var mapContainer = YMaps.jQuery('')
                                    .appendTo(YMaps.jQuery("#fancy_div")),
                map = new YMaps.Map(mapContainer[0]);
               
            map.setCenter(new YMaps.GeoPoint(92.838046, 56.016859), 10);
        }
    });
});
Т.е. после отображения "фанкибокс" создать контейнер для карты и дописать его во всплывающее окно.

2. Загружать карту в iframe.
3. Воспользоваться другим плагином или вынести карту на отдельную страницу.
Илья Д.
28 января 2016, 07:59
Александр, большое спасибо". Третий вариант не подходит, так как планируется использовать эту библиотеку неоднократно и для разных "экшенов", а первый вариант прям за душу берет. Низкий поклон:)
kashaev-lj
28 января 2016, 07:59
вариант с фреймом
http://www.courier-ufa.ru/advert/pdf/courier/ (ссылка в подвале "Схема проезда")

но вариант с скрытым контейнером лучше (тормозит меньше)