Google map avec Javascript

Version imprimable

Bonjour à tous,

Je suis en train de construire un site internet pour une crêperie en Bretagne.

J'ai un soucis avec le javascript apparemment. J'utilise une map google dans la partie "Pland d'accès" du site. L'iframe qui contient le lieu de la crêperie se s'affiche pas correctement. Le lieu pointé par le petit symbole rouge est sensé être au milieu de l'iframe. Là, il se trouve juste dans le coin en haut à gauche. Je pense que vous comprenez que ce n'est pas confortable pour un utilisateur.

Pourquoi la faute au Javascript? Car avant le mettre j'affichais tout dans la même page en même temps et je n'avais pas souci. Depuis, j'ai mis le Javascript pour afficher et masquer les parties en fonction des clics.
Exemple :
Code:

1 2 document.getElementById("contact").className='visible'; document.getElementById("accueil").className='hidden';
Et depuis, je comprend pas pourquoi ça s'affiche comme ça... Un souci pendant le chargement? Car au chargement, la div contenant l'iframe est caché.

Quelqu'un aurait une idée svp?

http://creperietybihan.fr/test2.html

Code de l'iframe:
Code:

1 2 3 4 <div class="hidden" id="plan" style="width:700px;padding:10px"> <iframe width="550" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/maps?f=q&source=s_q&hl=fr&geocode=&q=creperie+ty+bihan+morlaix&aq=&sll=48.580955,-3.831251&sspn=0.001927,0.005284&t=h&ie=UTF8&hq=creperie+ty+bihan&hnear=Morlaix,+Finist%C3%A8re,+Bretagne&ll=48.581011,-3.831809&spn=0.007476,0.007878&output=embed"> </iframe> </div>

25/10/2012, 22h10
NoSmoking

Bonsoir,
le soucis que tu as est que ton IFRAME étant dans une DIV en display:hidden, et comme cette dernière a comme dimension 0x0, la carte est centrée par rapport à cette zone ce qui fait que ton marqeur est dans le coin supérieur gauche.

Les parades existent :
- ne pas utiliser de display:hidden, ce qui est jouable dans ton cas avec les onglets on peut également utiliser les z-index.
- mettre le conteneur avec une height:0 et l'agrandir par la suite.
- masquer le conteneur une fois l'IFRAME loadée.

Merci beaucoup, ça marche comme je voulais.

HTML:

Code:

1
2
3
<div class="chargementIframe" id="plan" style="width:700px;padding:10px">
	<iframe onload="IframeLoaded()" width="550" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;q=creperie+ty+bihan+morlaix&amp;aq=&amp;sll=48.580955,-3.831251&amp;sspn=0.001927,0.005284&amp;t=h&amp;ie=UTF8&amp;hq=creperie+ty+bihan&amp;hnear=Morlaix,+Finist%C3%A8re,+Bretagne&amp;ll=48.581011,-3.831809&amp;spn=0.007476,0.007878&amp;output=embed"></iframe>
</div>

CSS:

Code:

1
2
3
4
.chargementIframe{
	position:absolute;
	left:-8000000px;
}

Javascript:

Code:

1
2
3
function IframeLoaded(){
    document.getElementById("plan").className='hidden';
}