如何让谷歌地图具有响应性？答案

【问题标题】：How to make Google Maps Responsive?如何让谷歌地图具有响应性？
【发布时间】：2016-03-22 21:44:36
【问题描述】：

我正在尝试将 Google 地图添加到网页，但是它具有固定的宽度和高度，来自使用 Google 教程的代码。我的 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>

正文中的 HTML 是这样的：

<div id="map"></div>

相关的 CSS 是这样的：

#map {
width: 1140px;
height: 300px;
}

我正在使用引导列方法来布局并使我的页面响应，无论大小我希望地图占据它所在行的所有 12 列。有什么想法吗？

谢谢！

【问题讨论】：

标签： html css twitter-bootstrap google-maps

【解决方案1】：

所以，我找到了解决问题的方法。这是我修改后的 CSS：

#map {
width: 100%;
height: 300px;
}

我发现你必须有一定数量的像素高度，使用 100% 或其他百分比会使地图消失，但是 100% 的宽度会使地图响应调整浏览器的大小。 HTML 保持不变。

【讨论】：

【解决方案2】：

你试过使用 % 吗？

#map {
   width: 100%;
   height: 30%;
}

应该可以的:)

HTML：

<div class="row">
   <div class="col-xs-12">
      <div id="map"></div>
   </div>
</div>

【讨论】：

那行不通。您需要在所有父元素上声明 100% 宽度。
确切地说，使用引导程序你可以做到这一点。你不应该对我的回答投反对票
@Elow - 你试过了吗？它不起作用，因为在加载时标记位于中间。调整大小后标记消失或未居中！
@elow 我没有投反对票，请去诽谤别人。
这没有用，如果我使用你的 CSS，那么地图就会消失！

【解决方案3】：

这个问题已经在我们的论坛中讨论过了。看看吧：Google Maps with Bootstrap not responsive

使用引导类“span12”它将帮助您进行响应并包括显示：块； #map id 选择器的属性。

【讨论】：

col-xs-12 - 我怀疑他在使用 bootstrap2。
是的，对不起，我正在使用引导程序 3，我已经查看了这个问题，但它使用旧引导程序和旧谷歌代码

【解决方案4】：

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

【讨论】：