使用Bootstrap的Google地图无响应

Question

我正在使用bootstrap,我嵌入了Google Maps API 3.

#map_canvas没有回应; 这是一个固定的宽度.

此外,如果我使用height: auto并且width: auto地图未显示在页面中.

为什么？

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
#map_canvas {
   height: 400px;
    width: auto;
  }
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

Answer 1

修订:官方帖子已经过时,所以我更新了我的答案并改进了代码.

以下方法不需要bootstrap或任何其他框架.它可以独立使用,使任何内容响应.通过计算,向父元素应用填充aspect ratio.然后使用绝对位置将子元素放在顶部.

HTML:

<div class="iframe-container">
    <!-- embed code here -->
</div>

CSS:

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

下面的"小提琴"有关于如何制作的例子:

• 响应式Google地图
• 响应式OpenStreetMap
• 响应Vimeo视频
• 响应Youtube视频

演示:http://jsfiddle.net/LHQQZ/135/

Answer 2

这使用Bootstrap的响应嵌入功能,固定宽高比为16/9:

<div class="embed-responsive embed-responsive-16by9">
    <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>

Answer 3

使地图在高度和宽度上调整大小:

http://niklausgerber.com/blog/responsive-google-or-bing-maps/

2018/09/27更新:据报道链接已关闭,不确定多少,所以我将我的网站存档搜索链接到他的github:

https://github.com/niklausgerber/responsive-google-or-bing-maps

Answer 4

非常简单.使用CSS使地图相对于视口高度:

.map {
  height: 80vh;
}

这指定.map容器必须是视口高度的80%.

Answer 5

如果其他人看到这个,就有这样的问题.

我有一个iframe whit是一个openstreet地图,我无法让它响应.我终于推出了一个"img-responsive"课程,一切都很好.

<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>