2010-01-04 60 views
0

我正在使用Google Maps API v3制作页面,类似于Google's example。我希望地图填满整个视口,但是当我将其宽度和高度设置为100%时,它不会显示。但是,在px中设置至少一个维度可以使其工作。我使用Firefox 3.5.6和Internet Explorer 8.现在我想让页面正常工作,但我也很好奇为什么地球上会出现这个错误。谷歌地图以%代替px尺寸

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en" dir="ltr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<title>Map</title> 
<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
} 
#map { 
    width: 100%; 
    /* Using % instead of px breaks the map, I don't know why. */ 
    height: 500px; 
} 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() { 
    var myLatLon = new google.maps.LatLng(36, -111); 
    var myOptions = { 
     zoom: 7, 
     center: myLatLon, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
} 
</script> 
</head> 
<body onload="initialize();"> 
<div id="map">Loading...</div> 
</body> 
</html> 

回答

0

设置html,主体样式 - 使用100%高度和宽度以及0边距。还添加溢出:隐藏给他们(认为修复了一个IE bug)。

无耻插头:结帐www.pinnspot.com ...我在那里。