Googleマップをブートストラップで全幅にする方法は？

Question

全幅にしても地図が動作しません。

<section> 
    <div class="container"> 
     <div id="map"></div> 
     <script> 
      function initMap() { 
       var mapDiv = document.getElementById('map'); 
       var map = new google.maps.Map(mapDiv, { 
        center: {lat: 44.540, lng: -78.546}, 
        zoom: 8 
       }); 
      } 
      </script> 
    </div> 
</section> 

CSSコード：
はここに私のHTMLコードです

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
#map { 
    position: absolute; 
    width: 100%; 
    left: 0; 
} 

しかし、それは、マップを表示しません。私は間違って何をしていますか？

Answer 1

あなたはこのように、高さを設定する必要があります：あなたは以下のようにdocument.readyにinitMap()機能あなたを呼び出すために必要なすべての

#map { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    height:500px; 

} 

Answer 2

まず：

$(document).ready(function() { 
    initMap(); 
}) 

次はあなたにいくつかの架空の高さを追加#map

#map { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    height: 400px; 
} 

あなたがマップに高さを与えていないdocument.ready

(function() { 
    initMap(); 
})();