Карты Google не работают во вкладках jQuery

Карты Google не работают, когда их помещают во вкладки jQuery - это вопрос, который возникает во всем Интернете. В моем исследовании пока что ни одно из решений не работает. Надеюсь, здесь кто-то может помочь ...

Это скриншот ошибки в Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61. http://www.flickr.com/photos/75523633@N04/6932970713/

Ошибка отсутствует в IE8 и периодически появляется в 9. В Firefox она исчезает, когда вы открываете FireBug.

Сайт находится в Wordpress 3.3.1, а карта создается / извлекается через плагин. Кажется, не имеет значения, какой плагин карт я использую; ошибка осталась прежней. Основываясь на моем исследовании, похоже, что это проблема js / jQuery между вкладками и javascript Google Map API, а не проблема Wordpress / плагина.

Вот мой код. Прямо сейчас я использую плагин wp-gmappity-easy-google-maps для карт, но я также пробовал плагин complex-google-map-plugin. Оба отлично работают вне вкладок.

HTML:

// Header calls:


// HTML Body:


    
Tab 1
    
Tab 2
    
Tab 3
    
Map Tab
    
Tab 3


    
Tab 1 Content
    


    
Tab 2 Content
    

    
Tab 3 Content
    


    

        

            

        
        
    


    
Tab 2 Content
    

Вот соответствующий CSS:

.tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
.tabs_framed_container{margin-bottom:40px;}
.tabs_framed a{
    display:block; position:relative; background:#fafafa; border:1px solid #E5E5E5; padding:7px 30px; margin-right:2px;
    font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; line-height:10px; color:#777;
    opacity:1; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;
}
.tabs_framed a:hover{color:#20548B;text-decoration:none;background:#fff;}
.tabs_framed a.current{color:#000;cursor:default;border-bottom:1px solid #fff;background:#fff;}
.tabs_framed li,{padding:0;margin:0;list-style-type:none;float:left;}
.tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:30px 30px 15px 30px;}

div.wpgmappity_container img { 
    background-position: 0% 0%;
    background-color: none !important;
    max-width: none !important;
    background-image: none !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

Вот ссылка на файл, который управляет моими вкладками: http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js

flowplayer.org/tools/forum/25/79274 - одно из решений, которое я найдено (прокрутите вниз). Однако checkResize и resizeMap больше не работают (см. Справку по API на code.google.com/apis/maps/documentation/javascript/reference.html # Map, прокрутите немного вниз до «Events» и найдите google.maps.event.trigger (map, 'resize'), который, по-видимому, является кодом замены). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps - еще одна слишком старая запись.

Я видел, как это предлагается:

jQuery(document).ready(function(){
jQuery('.tabs_container').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        google.maps.event.trigger(map, 'resize');
    }
});
});

, но я понятия не имею, как это реализовать (безуспешно пробовал несколько способов) и будет ли это вообще работать.

Судя по всем моим исследованиям, похоже, что вы должны запускать событие изменения размера карты, когда выбрана вкладка, содержащая карту. Пока что мне не удалось адаптировать ни одно из существующих решений - особенно потому, что я плохо знаком с js / jQuery. Кажется, что кто-то, знакомый с js или jQuery, может решить эту проблему.

Пожалуйста, помогите мне.