Google Maps Funktioniert Nicht in jQuery Tabs

Google maps nicht funktioniert, wenn innerhalb von jQuery-tabs ist eine Frage, die alle über das Internet. In meiner Forschung bisher keine der Lösungen zu funktionieren scheint. Hoffentlich hier jemand helfen kann...

Dies ist ein screenchot der Fehler in Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61.
http://www.flickr.com/photos/75523633@N04/6932970713/

Der Fehler wird nicht im IE8 und intermittierende in 9. In Firefox, es geht Weg, wenn Sie öffnen FireBug.

Die Seite ist in WordPress 3.3.1 ist die Karte erzeugt/abgerufen über ein plugin. Es scheint nicht egal, welche Karten-plugin ich benutze, der Fehler bleibt der gleiche. Basierend auf meiner Forschung, dies scheint zu sein, js/jQuery-problem zwischen den tabs und die Google-Maps API-javascript, nicht ein WordPress - /plugin-problem.

Hier ist mein code. Jetzt bin ich mit dem wp-gmappity-easy-google-maps-plugin für die maps, aber ich habe auch versucht, das umfassende-google-map-plugin. Beide funktionieren auch Super außerhalb der tabs.

HTML:

//Header calls:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/scripts/tabs.min.js'></script>
//HTML Body:
<div class="tabs_framed_container">
<ul class="tabs_framed">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Map Tab</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
<div class="tabs_framed_content">
    <h2>Tab 1 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <h2>Tab 2 Content</h2>
    <!-- Some Content -->
</div>
    <h2>Tab 3 Content</h2>
    <!-- Some Content -->
</div>
<div class="tabs_framed_content">
    <div class="map_container">
        <div style="width:900px;margin-left:auto;margin-right:auto;">
            <div class="wpgmappity_container" id="wpgmappity-map-1" style="width:900px;height:400px;margin-left:auto;margin-right:auto;"></div>
        </div>
        <script type="text/javascript">
            function wpgmappity_maps_loaded1() {
            var latlng = new google.maps.LatLng(42.4005322,-71.2750094);
            var options = {
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoomControl : true,
                zoomControlOptions :
                {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                mapTypeControl : true,
                mapTypeControlOptions :
                {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                scaleControl : true,
                scaleControlOptions :
                {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                streetViewControl : true,
                streetViewControlOptions :
                {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                panControl : false,  zoom : 14
            };
            var wpgmappitymap1 = new google.maps.Map(document.getElementById('wpgmappity-map-1'), options);
            var point0 = new google.maps.LatLng(42.4005322,-71.2750093);
            var marker1_0 = new google.maps.Marker({
                icon : 'http://xxxxxxxxxx.com/wp-content/themes/zzzzzzzzzz/images/mapmarker.png',
                position : point0,
                map : wpgmappitymap1
                });
            }
            jQuery(window).load(function() {
                wpgmappity_maps_loaded1();
            });
        </script>
    </div>
</div>
<div class="tabs_framed_content">
    <h2>Tab 2 Content</h2>
    <!-- Some Content -->
</div>

Ist hier das relevante 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;
}

Hier ist ein link zu der Datei, die regelt, dass meine Registerkarten:
http://themes.mysitemyway.com/awake/wp-content/themes/awake/lib/scripts/tabs.min.js

flowplayer.org/tools/forum/25/79274 ist eine Lösung, die ich gefunden (ganz nach unten Blättern). Jedoch, die checkResize und resizeMap nicht mehr funktionieren (siehe api-Referenz an code.google.com/apis/maps/documentation/javascript/reference.html#Map scrollen Sie ein wenig nach unten zu "Events" und findet google.maps.event.trigger(map, 'resize') das ist offenbar der Ersatz-code). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps ist ein weiteres Dokument verfasst, das ist zu alt.

Habe ich das vorgeschlagen:

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

aber ich habe keine Ahnung, wie es zu implementieren (versucht, ein paar Möglichkeiten, ohne Erfolg), oder wenn es würde sogar funktionieren.

Aus aller meiner Forschung, es sieht aus wie Sie haben, um die trigger eine Karte resize-Ereignis aus, wenn der tab mit der Karte ausgewählt ist. Bisher hatte ich kein Glück Anpassung eine der Lösungen gibt - espceially da bin ich mot vertraut mit js/jQuery. Es scheint, wie jemand vertraut mit js bzw. jQuery lösen könnte diese.

Bitte helfen Sie mir.