Discussion :

[kap]

Bonjour,

J'ai réalisé une application cartographique avec l'API Googlemaps version 3 accessible ici. L'utilisateur doit remplir un formulaire pour afficher les données sur la carte. Mon problème (sous Mozilla Firefox 3.6) est que la carte ne s'affiche pas complètement. Si j'ouvre Firebug, le reste de la carte se charge... Avez-vous des idées pour résoudre ce problème?

Merci.

[kap]

Je pense avoir localisé le problème. Au chargement de la page, le conteneur de la map est invisible (style à none). Si je commente la ligne qui change le style (fonction displaychange), la carte se charge entièrement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
		<script type="text/javascript">
    		window.onload=function()
		{
			//displaychange("map_container", "none");
			var myOptions = 
			{
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			map = new google.maps.Map(document.getElementById("map_container"), myOptions);
			centerMap(0,0,2);
 
		}

C'est bien mais seulement j'aimerais que ma carte ne soit pas visible au départ. Comment faire pour contourner le problème?

[NoSmoking]

Bonjour,
la solution est de passer par un conteneur avec une height:0 et un overflow:hidden que l'on met à la bonne hauteur lorsque l'on veut afficher la map

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="conteneur">
  <div id="map_canvas"></div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#conteneur{
  height : 0px;  
  overflow : hidden;
}

[kap]

Merci pour la proposition. Effectivement ca fonctionne... mais pas complètement En gros quand ça marche avec Firefox, ca ne marche plus sous IE, et vice et versa
Ma dernière tentative : IE ok mais la carte ne se charge qu'à moitié sous firefox:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="map_container" style="height:0px; overflow:hidden">
	<div id="map_canvas" style="width: 900px; height:0px" title="Click on an agglomeration to display the local units. Then click again on the agglomeration to display all the agglomerations."></div>
</div>

et le code pour changer la visibilité

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	var elt = document.getElementById(element);
	if (element == 'map_container')
	{
		if (visibility == 'block')
		{		
			elt.style.height = "650px";
			elt.style.overflow = "hidden";
			document.getElementById("map_canvas").style.height = "600px";
		}
		else
		{
			elt.style.height = "0px";
			elt.style.overflow = "hidden";			
		}
	}

[NoSmoking]

effectif, j'ai oublié le position relative pour IE.
Le CSS complet doit à minima contenir

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#map_container{
  position : relative; /* pour IE */
  width : 900px;
  height : 0px;  
  overflow : hidden;
}
#map_canvas{
  width : 900px; /* mettre les dimensions voulues en final */
  height : 650px;
}

[kap]

Merci bien, j'ai le comportement souhaité de mes divisions !! Merci
Juste par curiosité, c'est une solution à laquelle tu as pensé personnellement, où c'est un problème fréquent et tu as trouvé de la doc à ce sujet?

[NoSmoking]

Merci bien, j'ai le comportement souhaité de mes divisions !! Merci
Juste par curiosité, c'est une solution à laquelle tu as pensé personnellement, où c'est un problème fréquent et tu as trouvé de la doc à ce sujet?

il arrives assez souvent avec IE, qu'il faille préciser des choses qui paraissent évidente aux autres navigateurs, et parfois inversement, donc dans ces cas il faut revenir aux fondamentaux