谷歌地圖麻煩bootstrap v4

Question

所以，我的谷歌地圖沒有顯示，有時我已經設法得到一個灰色的盒子，當我試圖讓它在引導中的導航選項卡內。我真的沒有太多的經驗與JS或谷歌API所以任何輸入將是可愛的

css--- 
    .map{ 
    height:900px; 
    width: 300px; 
} 
js--- 
/*global google */ 

function initMap() { 

    var westerdals = { lat: 59.9159279, lng: 10.7608717, MapHeight: 300, MapWidth: 900 }; 
    var map = new google.maps.Map(document.getElementById("map"), { 
     zoom: 15, 

     center: westerdals 
    }); 
    var marker = new google.maps.Marker({ 
     position: westerdals, 
     map: map, 
     title: "Fjerdingen" 
    });} 
html--- 

    <div class="col-9"> 

       <ul class="nav nav-tabs" role="tablist"> 
        <li class="nav-item"> 
         <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Bilde</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">Kart</a> 
        </li> 

       </ul> 

       <!-- Tab panes --> 
       <div class="tab-content"> 
        <div role="tabpanel" class="tab-pane in active" id="profile"><img class="img-fluid" id="bildeboks" 
                         src="http://placehold.it/900x300"> 
        </div> 
        <div role="tabpanel" class="tab-pane fade" id="buzz"><div id="map"></div></div> 

       </div> <script src="https://maps.googleapis.com/maps/AIzaSyCfvxt8VTbtTyl8lqB2hZCOSAAW22oOt8s/js?callback=map"></script> 

Answer 1

首先，你必須修復一些事情。

• 在你有恩使用正確的selectpr，如果你使用一個ID，你必須使用#ID_SELECTOR
• 檢查網址爲google map的CSS。正如Jaromanda X所說。

點擊這裏

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<style> 
 
    #map{ 
 
    height:900px; 
 
    width: 100%; 
 
} 
 
</style> 
 

 
<ul id="myTab" class="nav nav-tabs" role="tablist"> 
 
    <li class="nav-item"> 
 
     <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Bilde</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" id="tab-map" href="#buzz" role="tab" data-toggle="tab">Kart</a> 
 
    </li> 
 

 
</ul> 
 

 
<!-- Tab panes --> 
 
<div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane in active" id="profile"> 
 

 

 
     <img class="img-fluid" id="bildeboks" 
 
                     src="http://placehold.it/900x300"> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="buzz"> 
 
     <div id="map"></div> 
 
    </div> 
 

 
</div> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
<script> 
 
    var map; 
 
     var westerdals = { lat: 59.9159279, lng: 10.7608717, MapHeight: 300, MapWidth: 900 }; 
 
    function initMap() { 
 

 
    map = new google.maps.Map(document.getElementById("map"), { 
 
     zoom: 15, 
 
     center: westerdals 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: westerdals, 
 
     map: map, 
 
     title: "Fjerdingen" 
 
    }); 
 

 
    } 
 

 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 
     e.target // newly activated tab 
 
     e.relatedTarget // previous active tab 
 
     if(e.target.id === "tab-map") { 
 
      google.maps.event.trigger(map, "resize"); 
 
      map.setCenter(westerdals); 
 
     } 
 
    }); 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&sensor=false"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

我的解決方案需要觸發谷歌地圖時引導標籤變化resize事件。看到自舉here

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    e.target // newly activated tab 
    e.relatedTarget // previous active tab 
    // check if the newly activated tab is the second tab 
    if(e.target.id === "tab-map") { 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(westerdals); 
    } 
}); 

這是因爲在加載頁面時，第二個選項卡被隱藏的文件。