我将尝试为网页添加Google Maps,但是在使用Google教程中的代码时,它拥有固定的宽度和高度。
我的头部HTML如下:
相关的CSS代码如下所示:
我正在使用Bootstrap的列方法来布局和使我的页面响应式。在所有大小上,我希望地图占据它所在行的所有12列。有什么想法吗?
谢谢!
<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列。有什么想法吗?
谢谢!