0

jQuery タブを使用すると、Google マップに問題が発生します。ここで回答を検索し、スクリプトを追加するように指示された投稿を見つけたタブの 1 つに、マップのごく一部しか表示されません。仕方なく追加しました

どうすれば修正できますか？

$(document).ready(function(){

    $("a.tab").click(function () {
        $(".active").removeClass("active");

        $(this).addClass("active");

        $(".tab_block").slideUp();

        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });

});

/// addon script: ////
 $(function(){

    $('#maptab').bind('click',function() {
                var w = $('#map_view').width();
                var h = $('#map_view').height();
                $('#map').css({ width: w, height: h });
               google.maps.event.trigger(map, 'resize');

    });

});

タブコード:

<ul class="tabs">
    <li><a href="#" title="content_4" class="tab" id="maptab">MAP</a></li>
    <li><a href="#" title="content_5" class="tab ">tab 5</a></li>
</ul>

<div id="content_4" class="tab_block">

    MAP SCRIPTS GOES HERE...

    <div id='map'></div>


</div>
4

1 に答える 1

0

非表示のときにマップを初期化する際の問題は、マップが非表示のときに正しく機能しないプロパティ/値に依存していることです。ページの読み込み時に ( 内で$(function(){ .. } );) マップを初期化する代わりに、タブをクリックしてコンテンツを表示するときにマップを初期化する必要があります。

$("a.tab").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".tab_block").slideUp();

    var content_show = $(this).attr("title");

    $("#"+content_show).slideDown(400, function(){
        // execute this code after tab content has been displayed
        if ( $(this).find('#map').children().length === 0 ) { 
            // find a #map element within the content area
            // if the #map element has no children initialize the map

            // code to initialize the map/map scripts here
        }
    });
});
于 2013-10-16T15:30:12.203 に答える