11540 sujets

JavaScript, DOM et API Web HTML5

Google maps api

Bonjour à tous,

est-ce que ce bout de code fonctionne chez vous ? Il est censé faire apparaître une carte google map.
Je suis au bord du suicide...


<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>HTML5 : Géolocalisation</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var carte = new google.maps.Map(document.getElementById("carte"), options);
}
</script>

</head>

<body onload="initialiser();">

<div id="carte" style="width:50%; height:50%"></div>

</body>
</html>


Merci de vos retours Smiley cligne
Bonsoir,

Le problème c'est que tu fixes à taille de ta carte à 50% de la hauteur de ... rien du tout.

En effet par défaut une div a un positionnement de type static, mais l'api googlemaps passe d'office le positionnement de ta carte en relative (je ne sais pas pourquoi ... si quelqu'un a une explication je prends). Du coup les rêgles css font que ton div prend 50% de la hauteur du body et 50% de sa largeur. Mais le body a une hauteur de 0px au départ ... donc ta carte a une hauteur de zero pixels.

Solution : il faut que tu forces la taille de ton body
- soit en utilisant un reset CSS
- soit en utilisant KNACSS( Smiley lol pub) qui comprend un reset CSS
- soit en fixant la taille toi-même
html,body {
    margin:0;padding:0;
    height:100%;
    width:100%;
  }


J'éspère que j'ai pu éviter un suicide !!
Modifié par Zebrou (31 Mar 2014 - 22:53)
J'ai rangé mon bidon d'essence et mes allumettes Smiley cligne

Merci pour le post, la carte est apparue par miracle... j'avoue que j'ai recopié bêtement 2/3 lignes de code pour tester, j'ai passé la taille de mon div en px, sans donner de taille au html et body, effectivement j'étais en % ^^

"C'est au pied du mur, qu'on voit mieux le mur"
Sujet clos
Aller à