Question

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

我正在使用bootstraps列方法进行布局并使我的页面响应，所有尺寸我希望地图占据它所在行的所有12列。任何想法？

谢谢！

Answer 1

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

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

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

Answer 2

您是否尝试过使用％？

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

这应该有效：）

HTML：

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

Answer 3

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

使用bootstrap类＆＃34; span12＆＃34;它将帮助您响应并包括显示：块; #map id selector的属性。

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>

如何使谷歌地图响应？

4 个答案: