Html 如何使用bootstrap制作谷歌地图？

当我使地图全宽时，它不工作
这是我的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>

---

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

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

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

}

---

首先，您需要调用

document上的
initMap（）
函数。如下所示：

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

接下来，在地图上添加一些虚构的高度

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


Javascript
相当于
document.ready

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

你没有给地图赋予高度。给他一些高度。此外，你可以检查这个演示给你的地图容器一个固定的高度，或者如果你不能，用JS计算并在创建地图之前设置它。OP提到jQuery了吗？@MrUpsidown。。通过
jquery
，如果你指的是添加标签，那么OP也没有提到
javascript
，但他在那里有
javascript
代码。基本上，他只是声明了
函数，从未调用过它。这是这里的关键点。不是
document.ready
或其在
javascript
中的等效解决方案。
(function() {
   initMap();
})();