html - 如何让谷歌地图响应？

Question

我正在尝试将 Google map 添加到网页，但它具有固定的宽度和高度，来自使用 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;
}

我正在使用 bootstraps 列方法来布局并使我的页面具有响应性，在所有尺寸下我希望 map 占据它所在行的所有 12 列。有什么想法吗？

谢谢!

Answer 1

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

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

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