ブートストラップのタブが壊れているGoogleマップ

Question

私はブートストラップのタブの中にあるマップを持っています。私はそのタブに行くとき、私は初めてのタブを訪れる際 私はマップのロード

$('.locations').click(function(){ 
    setTimeout(initMap(),1500); 
}); 

HERESにinit関数

function initMap() { 

    var myLatlng = new google.maps.LatLng(10.0,5.0); 

    var myOptions = { 
     zoom: 2, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
     google.maps.event.addListener(map, 'click', function(event) { 

    }); 

    } 

細かいマップを開始します。しかし、別のタブをクリックしてから、戻ってください。

Iveは過去にこれが起こっていたが、通常は完全に消えてしまったり、サイズを変更したりして再調整しなければならない。しかし今回は地図が完全になくなったようです。

そこには、ちょうど灰色です。まるでそれが本当に遠くにズームしたかのように、私はそれをunzoomそれを傾ける。もう一度タブをクリックすると、最初から再初期化することも、戻すこともできますか？

今、タブをクリックするたびにinit関数が実行されます。私がそれをするならそれはそれをしません、それはまだ灰色のスクリーンを示しています。あなたは初期化した後、それはいいでしょうか？理解できません。

Answer 1

指定された遅延の後にGoogle Maps APIが読み込まれるという保証はないので、私はsetTimeoutのGoogleマップを初期化する機能を削除することをお勧めします。 Google Maps APIには、Googleマップを読み込むかどうかを制御する独自の方法が用意されています。次の例では、

google.maps.event.addDomListener(window, 'load', initialize); 

ページの読み込みが完了するとGoogleマップが初期化されています。

ここでは、ブートストラップタブでマップを初期化する方法を示す実例を示します。

例

function initMap() { 
 
    var myLatlng = new google.maps.LatLng(10.0, 5.0); 
 

 
    var myOptions = { 
 
    zoom: 2, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    
 
    //google.maps.event.trigger(map, 'resize'); 
 
} 
 

 

 
$(function(){ 
 

 

 
    $("a[href='#locations']").on('shown.bs.tab', function(e) { 
 
     initMap(); 
 
    }); 
 

 

 
});

#map { 
 
     height: 480px; 
 
     width: 640px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js"></script> 
 

 

 
<div> 
 

 

 
<ul id="myTab" class="nav nav-tabs"> 
 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
 
    <li class=""><a href="#locations" data-toggle="tab">Locations</a></li> 
 
</ul> 
 
<div id="myTabContent" class="tab-content"> 
 
    <div class="tab-pane fade active in" id="home"> 
 
    HOME 
 
    </div> 
 
    <div class="tab-pane fade" id="locations"> 
 
    <div id="map"></div> 
 
    </div> 
 
</div>

Answer 2

そうのようなコールバックとしてinitMap機能に渡すためにあなたのタイムアウトを変更します。

setTimeout(initMap,1500); 

現在、あなたは、クリックの上、すぐにinitMap()を呼び出していると、タイムアウトが全く使用されていません。