Html 带有 Bootstrap 的 Google 地图没有响应

Google Maps with Bootstrap not responsive

提问by waely

I'm using bootstrap and I embedded Google Maps API 3.

我正在使用引导程序并嵌入了 Google Maps API 3。

#map_canvasisn't responsive; it's a fixed width.

#map_canvas没有反应；这是一个固定的宽度。

Also, if I use height: autoand width: autothe map doesn't show up in the page.

另外，如果我使用height: auto并且width: auto地图没有显示在页面中。

Why?

为什么？

<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>

回答by Andrew Surdu

REVISED: The Official Post is outdated, so I've updated my answer and improved the code.

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

The following method does not require bootstrap or any other framework. It can be used independently to make any content responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.

以下方法不需要引导程序或任何其他框架。它可以独立使用，使任何内容具有响应性。通过计算 对父元素应用填充aspect ratio。然后使用绝对位置将子元素放置在顶部。

The HTML:

HTML：

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

The CSS:

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%;
}

---

---

The following 'fiddle' has examples on how to make:

以下“小提琴”提供了有关如何制作的示例：

• Responsive Google Map
• Responsive OpenStreetMap
• Responsive Vimeo Video
• Responsive Youtube Video

• 响应式谷歌地图
• 响应式 OpenStreetMap
• 响应式 Vimeo 视频
• 响应式 YouTube 视频

Demo: http://jsfiddle.net/LHQQZ/135/

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

回答by Leonardo

This uses Bootstrap's Responsive Embedfeature with fixed aspect ratio of 16/9:

这使用 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>

回答by chech

makes the map resize in both height and width:

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

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

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

2018/09/27 update: link is reportedly down, not sure for how much, so I'll link my web archive search to his github:

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

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

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

回答by sparkyspider

Extremely simple. Make the map relative to viewport height using CSS:

非常简单。使用 CSS 制作相对于视口高度的地图：

.map {
  height: 80vh;
}

This specifies that the .map container must be 80% of the viewport height.

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

回答by horizontala

If someone else look this, had a problem like that.

如果其他人看到这个，就会有这样的问题。

I had an iframe whit an openstreet map, and i couldn't make it responsive. I finally put a "img-responsive" class and all was good.

我有一个带有 openstreet 地图的 iframe，但我无法让它响应。我终于放了一个“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>

回答by jaymar

<div class="map_container">
    <div id="map" class="gmaps4rails_map">
        <div id="map_canvas" class="span9">
            <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
        </div>
    </div> 

回答by Piet van Dongen

You could give the span6class a width and height, then give map_canvasa width and height of 100%.

你可以给span6类一个宽度和高度，然后给map_canvas一个宽度和高度100%。

回答by Remington Charles

Smartik's answer works well.. I am using the gmaps4rails gem and applied these changes to the generated css like this:

Smartik 的回答效果很好.. 我正在使用 gmaps4rails gem 并将这些更改应用于生成的 css，如下所示：

.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}

.gmaps4rails_map {
  display: block;
  height: 400px;
}

Then added these lines to my view:

然后将这些行添加到我的视图中：

<div class="map_container">
  <div id="map" class="gmaps4rails_map">
    <div id="map_canvas" class="span9">
      <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
    </div>
  </div> 
</div>

回答by philyawj

This blog posthas a great solution.

这篇博文有一个很好的解决方案。

Add a div tag around the embed code. Use the CSS class map-responsive so that your code now looks like this:

在嵌入代码周围添加一个 div 标签。使用 CSS 类 map-responsive 使您的代码现在看起来像这样：

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Now add some CSS properties inside one of your stylesheet files:

现在在您的样式表文件之一中添加一些 CSS 属性：

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}