Div absolute par dessus une Google maps

**Msieurduss** · 27/05/2008, 09h56

Bonjour à tous

Voilà, je me demandais s'il était possible de faire en sorte qu'une div (en absolute) passe PAR-DESSUS une carte GoogleMaps...

En fichier joint (JPG) vous pourrez voir le problème... Si je sors le JavaScript qui génère la carte, aucun problème, la div passe par-dessus. L'absolute sert à ça après tout

Voici les parties du code concernées :

Script Google Maps (dans le <head>) (je vous mets un seul point ^^)

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
16
17
18
19
20
 
 
// Script Google Maps __________________________________________________________________________________________________________
 
		function load() {
		  if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			// Liste variables
			var pt47= new GMarker(new GLatLng(45.585417,-0.847396)); 
		        // Zoom
				map.addControl(new GSmallMapControl());
		        map.addControl(new GMapTypeControl());
		        // Coordonnees de depart (longitude, latitude, profondeur)
				map.setCenter(new GLatLng(45.585417,-0.847396),12); 
map.addOverlay(pt47); 
GEvent.addListener(pt47, "click", function() { 
pt47.openInfoWindowHtml("<div class='bulle'><h1>H&ocirc;tel Le Relais de Bel Air</h1><p class='adresse'>5 route de Royan</p><p class='lieu'>Grezac (17120)</p></div>"); 
map.panTo(pt47.getVertex()); }); 
		  }
		}

Le JavaScript qui montre/masque la recherche avancée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
// Montrer bloc recherche avancée + lien pour la cacher _________________________________________________________________________________________________________________
function montrer_rechav() {
	document.getElementById('recherche_avancee').style.display='block';
	document.getElementById('montrer_rechav').style.display='none';
	document.getElementById('cacher_rechav').style.display='block';
}
// Cacher bloc recherche avancée + lien pour le montrer _________________________________________________________________________________________________________________
function cacher_rechav() {
	document.getElementById('recherche_avancee').style.display='none';
		document.getElementById('montrer_rechav').style.display='block';
	document.getElementById('cacher_rechav').style.display='none';
}

Le code HTML (j'ai enlevé les parties inutiles) :

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
16
17
18
19
20
21
22
23
24
25
 
 
<div id="conteneur">
	<div id="page_gauche">
		<div id="top_gauche"><div id="bandeau_gauche">
</div></div>
 
<div id="recherche">
 
<br />
 
<a href="#" id="montrer_rechav" onclick="montrer_rechav();">Recherche avanc&eacute;e</a>
<a href="#" id="cacher_rechav" onclick="cacher_rechav();" style="display:none;">Masquer la recherche avanc&eacute;e</a>
 
<div id="recherche_avancee" style="display:none;">
FORMULAIRE RECHERCHE AVANCEE (PARTIE EN ABSOLUTE)
</div>
 
</div>
 
 
<div id="map">(ici carte GoogleMaps)</div>
 
... suite du code
Rassurez-vous, toutes les DIV sont fermées

Et enfin le CSS concerné :

Code :

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

1
2
3
4
5
 
 
#recherche_avancee {position:absolute; background:red; width:500px;}
 
#map {float:left; width:330px; height:320px; border:2px solid black; margin-top:5px; }

Pour info le float:left; de la map ne change rien au problème... C'est vraiment la façon dont en mise la carte qui pose problème.
C'est pour ça que je doute que le code serve à quelque chose

Si quelqu'un a une idée !
Merci d'avance !!

Div absolute par dessus une Google maps

Positionnement en CSS avec z-index

Mode arborescent

Discussions similaires

Partager

Partager