谷歌地图干扰 Twitter Bootstrap答案

【问题标题】：Google maps interferring with Twitter Bootstrap谷歌地图干扰 Twitter Bootstrap
【发布时间】：2012-11-25 15:07:04
【问题描述】：

我有一个使用引导程序的页面，并添加了一个地图 (API v3)。

一开始还可以，但是当我折叠地图时 - 我无法重新打开它。

我查看了类似的 SO 问题，但找不到解决此问题的问题。

我的 HTML：

<div id="mapHeader" data-toggle="collapse" data-target="#map">
    Header
</div>
<div id="map" class="collapse in">
    <div id="map_canvas"></div>
</div>

CSS：

#map_canvas { height: 100% }
#map {height: 30em; width: 50%;max-height:100%;}

Javascript 只加载地图。

A fiddle to demonstrate

【问题讨论】：

尝试在控制台中触发 resize 事件，看看是否修复它：google.maps.event.trigger($('#map_canvas')[0], 'resize')
感谢@Oliver，但这没有用。

标签： javascript google-maps-api-3 twitter-bootstrap

【解决方案1】：

问题在于引导折叠插件没有为您的地图画布注册尺寸，因此它不知道将其展开到什么高度。要解决此问题，请向您的 #map_canvas 添加一些维度，如下所示：

#map_canvas { height: 30em; width: 100%; }

编辑：正如 OP 在下面评论的那样，#map_canvas 容器需要特定高度，以允许可折叠容器正确展开。

【讨论】：

我永远也想不通。您应该编辑以强调需要特定高度，而不是我在那里的百分比。
您能否解释一下为什么当#map_canvas 有文本并且没有初始化为地图时它会起作用——即使使用相同的 CSS 也是如此？
@JNF 如果您在谷歌地图初始化后查看源代码，您会注意到地图由绝对位于容器内的一长串元素组成，这就是问题开始的地方，因为引导折叠插件需要内容高度才能在折叠后展开内容。由于它的设计目的不是从绝对定位的元素中获取尺寸，因此您必须在容器本身上手动定义它。通过文本，插件可以轻松识别尺寸。