[résolu] Probleme affichage gmap avec div style="display:none&quo

Hello
j'ai un souci au niveau de l'affichage d'une Gmap
Celle ci doit se loader dans un div qui pour des besoins d'animation est invisible au chargement

ma map s'affiche bien (enfin la zone de la map est ok) mais étrangement dans le div map_canevas je ne vois qu'un 6eme de la map et les fonctionnalitées (zoom etc) non disponible.
Chose etrange, quand je resize la fenetre du browser la map s'affiche correctement

function initialize() {
  var myLatlng = new google.maps.LatLng(45.734619, 4.959414);
  var myOptions = {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
  
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}
  
window.onload = loadScript;

<div id="subtext1" style="display:none"> 
      <div id="picbox">
      <div id="map_canvas" style="width:452px; height:425px; z-index:9800; position:absolute;display:none"></div>
      </div>

et j'ai un

$('#map_canvas').delay("2400").animate({opacity: 'toggle'}, 100);

dans le corps du javascript

Si quelqu'un avait une idée ?

L'url du site en question http://sllov.additifmedia.com/website2/sllov_mobilier_design_contact.html

Merci d'avance
Modifié par ubik174 (24 Jun 2011 - 07:30)

ubik174

J'ai exactement le même problème. As-tu trouvé une solution??
Ce bug semble connu. Plusieurs posts sur forum google

De mon côté en remplaçant
"display: none;"

par:
"height:0px; width:0px; overflow:hidden;"
ça marche avec Chrome, IE8, FF3.6 mais pas avec IE7 (qui semble ignorer l'instruction "overflow: hidden" dans ce cas)

ou par:
"height:0px; width:0px; visibility:hidden;"
ça marche avec Chrome, IE8, FF3.6 et IE7
Modifié par g2alsacreation (19 Jun 2011 - 19:11)

non je n'ai pas trouver la solution
je crois qu'il faut forcer le chargement de la map une fois que le display est sur on pour que la map ai les bonnes dimensions je vais regardr aujourd'hui si je trouve mais jusqu'alors pas de solutions

$('#right').click(function () {  
		if (gmap_init == 0)	{
			gmap_init = 1;
			initialize();
		}			
    });

j'avais demandé a un codeur de debugguer sur un autre project, ca fonctionnait la en l'occurence le gmap_init se loadait au click donc apres le toggle du javascript

Ah bah inspiré ce matin !

$('#contentsubbox').delay("1200").animate({marginTop: "0",opacity: 'toggle'}, 700, function() {loadScript();});

En faite on load la fonction d'initialisation de gmap quand l'animation a effectuée le toogle

donc soit comme sur l'exemple tu a la premiere partie qui effectue le toggle entre display none et l'affichage et apres la fonction qui active gmap une fois que c'est effectuer