如何使谷歌地图响应？

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保持不变.