twitter-bootstrap 如何使谷歌地图响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34317386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Google Maps Responsive?
提问by BenRichi_
I am trying to add Google Maps to a web page, however it has a fixed width and height, from the code using Googles tutorial. My HTML in the head is this:
我正在尝试将谷歌地图添加到网页中，但是它具有固定的宽度和高度，来自使用谷歌教程的代码。我在头中的 HTML 是这样的：
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 51.434408, lng: -2.53531};
var mapOptions = {
center: new google.maps.LatLng(51.434408, -2.53531),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello Wold'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The HTML in the body is this:
正文中的 HTML 是这样的：
<div id="map"></div>
The CSS thats related is this:
相关的 CSS 是这样的：
#map {
width: 1140px;
height: 300px;
}
I am using bootstraps column method to layout and make my page responsive, at all sizes I would like the map to take up all 12 columns of the row that it is in. Any ideas?
我正在使用引导列方法来布局并使我的页面具有响应性，无论大小我都希望地图占据它所在行的所有 12 列。有什么想法吗？
Thanks!
谢谢！
回答by BenRichi_
So, I found a solution to my question. Here is my revised CSS:
所以，我找到了我的问题的解决方案。这是我修改后的 CSS：
#map {
width: 100%;
height: 300px;
}
I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.
我发现你必须有一定像素的高度，使用 100% 或其他百分比会使地图消失，但是宽度 100% 会使地图响应调整浏览器的大小。HTML 保持不变。
回答by Elow
Have you tried use %?
你试过用 % 吗？
#map {
width: 100%;
height: 30%;
}
That should work :)
那应该工作:)
HTML:
HTML：
<div class="row">
<div class="col-xs-12">
<div id="map"></div>
</div>
</div>
回答by Nithya Neela
Already this question has discussed in our forum. Have a look at it: Google Maps with Bootstrap not responsive
这个问题已经在我们的论坛中讨论过了。看一看：带有 Bootstrap 的 Google 地图没有响应
Use the bootstrap class "span12" it will help you for responsive and include display: block; property for #map id selector.
使用引导程序类“span12”它将帮助您进行响应并包含 display: block; #map id 选择器的属性。
回答by Supriya
.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;
}<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>