带有Bootstrap的Google地图不响应
我正在使用引导程序，并embedded了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>
修订：官方邮政已经过时，所以我已经更新了我的答案，并改进了代码。
以下方法不需要引导程序或任何其他框架 。 它可以独立使用，使任何内容响应。 通过计算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 Map
- 响应OpenStreetMap
- 响应Vimeovideo
- 自适应Youtubevideo
演示： http : //jsfiddle.net/LHQQZ/135/
这使用Bootstrap的响应embeddedfunction，固定宽高比为16/9：
<div class="embed-responsive embed-responsive-16by9"> <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div> </div>
使地图在高度和宽度上均可resize：
http://niklausgerber.com/blog/responsive-google-or-bing-maps/
如果别人看这个，就有这样的问题。
我有一个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>
非常简单。 使用CSS制作相对于视口高度的地图：
.map { height: 80vh; }
这指定.map容器必须是视口高度的80％。
你可以给span6类的宽度和高度，然后给map_canvas 100%的宽度和高度。
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; }
然后将这些行添加到我的视图中：
<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>
<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>
