如何在谷歌地图上显示引导列表答案

【问题标题】：How to show bootstrap list on google maps如何在谷歌地图上显示引导列表
【发布时间】：2014-02-03 06:52:31
【问题描述】：

我已经创建了一个谷歌地图应用程序并使用引导程序进行 UI。我想在地图上显示一个列表，但不能。我更改了列表的 z-index 但没有工作。我将列表 html 代码放入地图 div 但没有用。这是css问题吗？

【问题讨论】：

可以在jsfiddle上分享代码吗？

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

【解决方案1】：

你不能在地图容器中放任何东西，当你初始化地图时它会被API覆盖。

您可以：

将其放在文档中的其他位置并通过 CSS 将其放置在地图上
或者使用它作为custom control的内容

CSS 定位示例：

将两者（map-container 和 list-group）放在一个公共容器中，并将container 的位置设置为relative

<div style="position:relative;">
  <div id="map_canvas" style="height:300px;"></div>
  <ul class="list-group" style="">
    <li class="list-group-item active">item#1</li>
    <li class="list-group-item">item#2</li>        
    <li class="list-group-item">item#3</li>
  </ul>
</div>

列表组的 CSS（使用 margin 在地图内应用列表组的填充）：

.list-group{
  position:absolute;
  top:0;
  margin:20px;
}

演示：http://jsfiddle.net/doktormolle/x9uRB/

【讨论】：

如何通过 css 放置它？我做不到。
我在上面添加了一个例子