如何使谷歌地图具有响应式设计？

Question

我将尝试为网页添加Google Maps，但是在使用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;
}

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

谢谢！

- BenRichi_

Answer 1

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

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

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

- BenRichi_

Answer 2

你尝试过使用%吗？

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

应该可以工作 :)

HTML:

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

- Elow

---

那样行不通。你需要在所有父元素上声明100％的宽度。 - iH8

确切地说，使用Bootstrap您可以做到这一点。您不应该将我的答案投下否决票。 - Elow

@Elow - 你试过了吗？它不起作用，因为加载时标记在中间。调整大小后，标记是否偏离或未居中！ - Sebastian Brosch

抱歉，我没有给你的帖子点踩，请找别人发泄吧。 - iH8

这个不起作用，如果我使用你的CSS，那么地图就消失了！ - bchards

Answer 3

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

使用Bootstrap类"span12"，它将帮助您实现响应式，并为#map id选择器包括"display: block;"属性。

- Nithya Neela

---

col-xs-12 - 我怀疑他没有使用Bootstrap2。 - bcr

是的，抱歉我正在使用Bootstrap 3，我已经查看了这个问题，但它使用旧版Bootstrap和旧版Google代码。 - bchards

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

- Supriya