2010-01-04 77 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 ...我在那裏。