【问题标题】：How to make google map full width with bootstrap?如何使用引导程序使谷歌地图全宽？
【发布时间】：2016-05-09 04:36:17
【问题描述】：

当我将其设为全宽时，地图不起作用。
这是我的 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;
}

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

【问题讨论】：

你没有给地图高度。给他一些高度。进一步你可以查看这个演示jsfiddle.net/zq1fvgnj/3
给你的地图容器一个固定的高度，或者如果你不能，用JS计算它并在你创建地图之前设置它。

标签： html css twitter-bootstrap google-maps-api-3

【解决方案1】：

你需要设置高度，像这样：

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

}

【讨论】：

【解决方案2】：

首先，您需要在document.ready 上调用initMap() 函数，如下所示：

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

接下来给你的#map添加一些假想的高度

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

`Demo Here`

Javascript 等效于 document.ready

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

【讨论】：

OP 提到 jQuery 了吗？
@MrUpsidown ..jquery，如果您的意思是添加标签，那么 OP 也从未提及javascript，但他在那里有javascript 代码。基本上他只是声明了function 并且从未调用它。这就是这里的关键点。不是document.ready 或javascript 中的等效解决方案。