如何使谷歌地图响应式？

我正在尝试将 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;
}

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

Thanks!

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

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

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