jquery - GoogleマップとjQueryタブ

Question

単純なjQueryタブに含まれているGoogleマップに少し問題があります。

以下にコードを貼り付けました。

jQuery：

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").hide(); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn();
        return false;
    });

});

タブのHTMLは次のとおりです。

<div class="bluecontainer">
    <ul class="tabs">
        <li><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
        <li><a href="#tab3">Tab3</a></li>
        <li><a href="#tab4">Tab4</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <h2>Tab1</h2>
        </div>
        <div id="tab2" class="tab_content">
            <h2>Tab2</h2>
        </div>
        <div id="tab3" class="tab_content">
            <div>
                google Map
            </div>
        </div>
        <div id="tab4" class="tab_content">
            <h2>Tab4</h2>
        </div>
    </div>
</div>

私は本当に何をすべきかわかりません。それはグーグルマップの一般的な問題ですか、それとも私のタブに何かありますか？しかし、彼らは他のすべてでうまく機能しています。

よろしくお願いします

score 7 · Accepted Answer

私は問題を解決しました。

jQueryのhide（）をcss.visibilityに変更したため、タブは次のようになります。

$(document).ready(function() {

    //Default Action
    $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
    });

});

すべてが正常に機能します。

score 6 · Accepted Answer

Bootstrap3：https ://github.com/twbs/bootstrap/issues/2330

$('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e)
    {
        google.maps.event.trigger(map, 'resize');
    });

score 4 · Accepted Answer

私は別のアプローチを採用しました-タブがアクティブ化された後にマップを初期化します。これが私のコードです：

//Default Action
jQuery(".tab_content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab_content:first").show(); //Show first tab content

//On Click Event
jQuery("ul.tabs li").click(function() {
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery(".tab_content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active content
    if(activeTab == '#location_tab') {      
        initialize();
    }
    return false;
});

マップのIDが付いたタブがスクリプトのタブと一致していることを確認してください。私の場合、その「location_tab」。

score 3 · Accepted Answer

タブを開いたときにマップを初期化することは、間違いなく進むべき道です。非表示のdivでマップを初期化しようとすると、表示に失敗します。divが表示される関数が何であれ、その関数を使用して、divが表示された後にマップを初期化します。

if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) {
    LoadGoogleMap();
    maploaded = true;
}

マップがロードされると、問題なくdivを安全に非表示または再表示できるため、フラグを追加して、マップが既にロードされているかどうかを確認する価値があります。

score 0 · Accepted Answer

Google Maps APIのv2またはv3を使用していますか？過去にこの問題についていくつかの質問がありました。たとえば、この質問（他の同様の質問のいくつかにもリンクしています）。それらを読んで、提案された解決策のいずれかがあなたのために働くかどうかを確認することは価値があるかもしれません。

[編集]以下のコメントに基づいて、fadeIn：ではなく不透明度のアニメーションを使用することをお勧めします。

//Default Action
$(".tab_content").animate({ opacity: 0 }, 0);
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").animate({ opacity: 1 }, 0); 

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active"); 
$(".tab_content").animate({ opacity: 0 }, 0); 
var activeTab = $(this).find("a").attr("href"); 
$(activeTab).animate({ opacity: 1 }, 500);
return false;
});

Google Maps API v3とJQuery（ただし、JQueryタブではありません）を使用するページに自分で使用しましたが、問題なく機能しました。

score 0 · Accepted Answer

タブを変更するときにjqueryタブが行うように、要素を非表示にすると、Googleマップはうまく機能しません。

最も簡単な解決策は、Googleマップの初期化関数をjqueryタブオブジェクトのtabsshowイベントにバインドすることです。

$("#tabs").bind( "tabsshow", function(event, ui) {
          if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs
            initialize(); //google map initialization code
        }
        });

このソリューションは、jquery石積みプラグインなどのDOM要素の幅と非表示に依存する他のプラグインで機能します。

score 0 · Accepted Answer

私のようにこれを正しく行うのにまだ苦労している場合は、これを試してください。

 var hasLoadedMap = false;
$( "#tabs" ).tabs({
      activate: function( event, ui ) {
          //console.log(ui.newTab.context.id);
            if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs
                console.log(ui.newTab.context.id);
                initialize();    //google map initialization code
                hasLoadedMap = true;
          }

      }
});

私は上記の他の答えをより新しいものに適応させました。

score 0 · Accepted Answer

私もこれに苦労しています。だから私はこれを成し遂げるのに役立ったコードを提供します、Fuzzによって提供されたコードのおかげで（私は十分な評判を持っていないのであなたの答えを投票することができません...）

Googleマップを表示するために高度なカスタムフィールドを使用しています。acf WebサイトのドキュメントのACFによって提供されたコードを使用し、ブートストラップの折りたたみを使用してマップを表示できるように最後のビット（「ドキュメントの準備ができました」の部分）を変更しました。マップを含むdivは折りたたみスクリプトによって非表示にされ、表示されるとマップを表示するためのjavascriptが起動されます。地図を非表示にした後、地図を再度表示すると地図の場所の設定が失われるという問題に直面しました。Fuzzのスクリプトの助けを借りて、私はそれを正しく機能させました。うまくいけば、これは他の人にも役立つでしょう。

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});

jquery - GoogleマップとjQueryタブ

8 に答える 8

Related

Reference