Карты Google не работают в jQuery easytabs

0

когда вы нажимаете вкладку контактов, загружается gmaps, но не правильно. (только в левом углу карты) действительно интересно... любые идеи?

вот jsfiddle

структура моего html-кода:

        <div id="menu-container" class="section group">
        <div id="menuu" class="col span_8_of_12">
            <!-- Navigation Bar -->
            <div class="menu">
                <ul class='tabs'>
                    <li class='tab-biography'><a href="#aboutme">About Me</a></li>
                    <li class='tab-portfolio'><a href="#portfolio">Portfolio</a></li>
                    <li class='tab-photos'><a href="#photos">Photos</a></li>
                    <li class='tab-contact'><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
        <div id="social-icons" class="col span_4_of_12">
            <!-- Social Icons -->
            <ul class="social-icons">
                <li><a href="#"><img src "img/icons/rss.png" g" alt=""/></a></li>
                <li><a href="#"><img src "img/icons/twitter.png" g" alt=""/></a></li>
                <li><a href="#"><img src "img/icons/facebook.png" g" alt=""/></a></li>
            </ul>
            <!-- /Social Icons -->
        </div>
        <!-- /Navigation Bar -->
    </div>

GMaps:

function initialize() {
    var myLatlng = new google.maps.LatLng(41.00527, 28.97696);
    var mapOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    });
}

  google.maps.event.addDomListener(window, 'load', initialize);
  • 0
    Попробуйте установить ширину по умолчанию для вашего div карты-холста, скажем, 890px ...
  • 0
    @KarthikGanesan все тот же.
Показать ещё 2 комментария
Теги:
google-maps

1 ответ

1
Лучший ответ

Вам нужно вызвать событие resize карты после того, как вкладка, содержащая карту, станет видимой. Если посмотреть на документацию, для этой цели есть крючок событий:

easytabs:after | Fires after a tab has been selected (and after the panel is completely finished transitioning in). | [event, $clicked, $targetPanel, settings]

$('#content').bind('easytabs:after', function() {
   google.maps.event.trigger(map, 'resize');     
});

рабочая скрипка

  • 0
    офигенно, спасибо большое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню