2010-01-04 7 views
0

Je crée une page en utilisant l'API Google Maps v3, similaire à Google's example. Je veux que la carte remplisse la totalité de la fenêtre, mais lorsque je définis sa largeur et sa hauteur à 100%, elle n'apparaît pas. Définir au moins une dimension en px, cependant, le fait fonctionner. J'utilise Firefox 3.5.6 et Internet Explorer 8. Maintenant, je veux que la page fonctionne, mais je suis également curieux de savoir pourquoi ce bug survient sur Terre.Google Maps rompt avec le% au lieu des dimensions 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> 

Répondre

0

Définir le html, les styles de carrosserie aussi - utiliser 100% hauteur et largeur et 0 marge. Ajoutez aussi le débordement: caché à eux (Pensez que corrige un bug IE).

Plug sans vergogne: Commander www.pinnspot.com ... Je l'ai fait là.