8 replies to this topic

[webevp]

Добрый день. Подскажите а как правильно растянуть карту на вкладке ?? Нашел код на странице http://jbzoo.ru/docs/how-tabs-works, куда его вставлять,  index.php или шаблон полного вывода full?

<script type="text/javascript">
jQuery(function ($) {
$('#<?php echo $tabsId;?>').JBZooTabs({
onTabShow: function (index) { // в index будет хранится номер текущей вкладки
var map = $('.googlemaps > div:first'); // ищем карту Google
if (map.length) {
map.data('Googlemaps').refresh(); // инициализация
}
}
});
});
</script>

[Cheren-dow]

webevp, пропишите блоку с картой width: 100%.  

Можете дать ссылку на сайт?

[webevp]

отправил в ЛС

[webevp]

кто то может подсказать как растянуть карту в табе ? Код вставил в index.php шаблона. Сайт http://conerunt.test...li/item/tavrika

[SmetDenis]

Код нужно вставлять в full, как в оригинальном примере c демо сайта product/full.php
Но он вам не подойдет.

Разница в том что вы используете widgetKit для карты, а пример кода работает только для элемента(!) карты.

попробуйте использовать в full такой код

jQuery(function ($) {
    $('#<?php echo $tabsId;?>').JBZooTabs({
        onTabShow: function (index) {
            google.maps.event.trigger($('.wk-map').data('googlemaps').map, "resize"); 
        }
    });
});

[webevp]

Помогло только центр карты сильно смещен http://conerunt.test...li/item/tavrika

[SmetDenis]

У карт Google есть проблемы с отображением в скрытом контейнере.
отцентрировать корректно её можно, но сейчас я не могу вам назвать решения. Для этого нужно тщательно смотреть API GoogleMaps и как карта используется в widgetKit.

Может вам лучше вывести карту под вкладками, так чтобы она была видна сразу?
Либо использовать вместо виджета вывод элемента.

[webevp]

Через элемент "Google карта" не устраивает как проставляется отметка,  если бы ее можно было "руками" двигать как угодно. А прописывая адрес не всегда отметка верно проставляется. 

[webevp]

Мне помог следующий код 

 jQuery('#<?php echo $tabsId;?>').JBZooTabs({
        onTabShow: function (index) {
            var mapObj = jQuery('.wk-map').data('googlemaps').map;
            var center = mapObj.getCenter();
            google.maps.event.trigger(mapObj,"resize");
            mapObj.setCenter(center);
        }
    });