我正在尝试使用 Google Maps API 使我的 map 具有 100% 的高度。 (过去我想让我的 Google Charts API 图表也有百分比高度)
到目前为止，我读到的所有内容都说首先将 html 和 body 高度设置为 100%。我已经这样做了，但是 map 不会显示，除非我让它的容器具有固定的高度。
<html lang="en">
<head>
<meta charset="utf-8">
<title>Map</title>
<style>
html, body{
width:100%;
height:100%;
}
.map{
width:100%;
height:100%;
}
</style>
</head>
<div class="mainWrap">
<div id="mainMap" class="map">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/////Global variables and arrays/////
var markerArray = [];
var myID;
var mapZoom = 9; /
var mapCenterLat = 41.82454868;
var mapCenterLon = -87.6341629;
//Initiate the initialize function to build map, after page loads
google.maps.event.addDomListener(window, 'load', initialize); //when window loads, start initialize function (below)
//Google API Initialize function that builds map
function initialize() {
/////Variables/////
var infoWindow = new google.maps.InfoWindow({
});
var map_canvas = document.getElementById('mainMap');
var map_options = {
center: new google.maps.LatLng(mapCenterLat,mapCenterLon),
zoom: mapZoom,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
//Draw the map
var map = new google.maps.Map(map_canvas, map_options);
} //End initialize()
</script>
</html>
最佳答案
看起来您在 map div 的 CSS 中缺少 position: absolute;
百分比高度/宽度只有在您也给元素一个位置时才有效。
让 div 遍布浏览器窗口:
.map {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
}
关于javascript - 将 Google API map (和图表)设置为 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25964902/