如何使用bootstrap使谷歌地图全宽？

Question

当我使用全宽时，地图不起作用。
这是我的HTML代码：

<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,
body {
    width: 100%;
    height: 100%;
}
#map {
    position: absolute;
    width: 100%;
    left: 0;
}

但它不显示地图。我做错了什么？

Answer 1

您需要设置高度，如下所示：

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

}

Answer 2

首先，您需要在initMap()上呼叫document.ready功能，如下所示：

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

接下来为#map

添加一些虚构的高度

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

Demo Here

Javascript相当于document.ready

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