Javascript 谷歌地图与推特引导程序相互干扰

我有一个使用引导的页面，并添加了一个映射（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>

Javascript只加载地图

---

问题在于引导折叠插件没有为地图画布注册维度，因此它不知道将其展开到什么高度。要解决此问题，请向

#map_画布添加一些维度，如下所示：

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

编辑：正如OP在下面评论的那样，
#map_canvas
容器上需要一个特定的高度，以允许可折叠容器的适当扩展。
尝试在控制台中触发一个调整大小事件，看看它是否修复了它：
google.maps.event.trigger（$（“#map_canvas”）[0]，“resize”）
谢谢@Oliver，但那没用，我永远也想不到。您应该编辑以强调所需的特定高度，而不是我在那里的百分比。你能解释一下为什么当#map_canvas有文本并且没有初始化为map时它会起作用吗？即使使用相同的CSS？@JNF如果你查看源代码，一旦谷歌map被初始化，你会注意到map是由一长行元素组成的，这些元素绝对位于一个容器中，这就是问题的开始，因为引导折叠插件需要一个内容高度，以便在折叠后展开内容。由于它不是为了从绝对定位的元素中获取尺寸而设计的，因此必须手动在容器本身上定义尺寸。有了文本，插件就可以很容易地识别尺寸，就像它设计的那样。
#map_canvas { height: 30em; width: 100%; }