谷歌地图干扰了Twitter Bootstrap

Question

我有一个页面，我使用bootstrap，我添加了一个地图（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

Seems related, but I couldn't implement the same solution

Answer 1

问题是bootstrap collapse插件没有为你的地图画布注册一个维度，所以它不知道将它扩展到什么高度。要解决此问题，请向#map_canvas添加一些维度，如下所示：

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

编辑：如下面的OP所述，#map_canvas容器需要特定的高度才能正确扩展可折叠容器。