Afficher une DIV au dessus de ma carte

**omar24** · 05/05/2011, 10h04

Salut tout le monde;
Je voudrais savoir comment faire pour afficher une div contenant du texte au dessus de ma carte crée par google maps api v3.
voila mon code:

Code :

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

1
2
3
4
 
<div id="carte" style="width:78%; height:100%; float:right">
		<div style="background-color: yellow;position:absolute;">salut tout le monde</div>
		</div>

au chargement de la page je vois ma div s'afficher mais une fois la carte est chargée elle n'est plus visible,la carte la cache.
Merci.

**Loceka** · 05/05/2011, 10h17

Essaye de jouer avec la propriété CSS z-index.

**omar24** · 05/05/2011, 10h40

J'ai ajouté z-index mais toujours la carte la carte a l'air d’être au dessus

Code :

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

1
2
3
4
 
<div id="carte" style="width:78%; height:100%; float:right;z-index:-10">
		<div style="background-color: black;position:absolute; z-index:20">salut tout le monde</div>
		</div>

**Loceka** · 05/05/2011, 10h42

Si la carte est en flash (je ne connais pas le format des cartes google maps), il est possible que le z-index ne soit pas pris en compte en effet...

Auquel cas je ne vois pas comment procéder.

**NoSmoking** · 05/05/2011, 21h17

Bonsoir,
il n'est pas forcément besoin d'utiliser le zIndex si l'on respecte l'ordre d'apparition à l'écran

exemple

Code html :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Diabolique</title>
<style type="text/css">
.dim {
  width : 300px;  
  height : 200px;  
}
.conteneur {
  position : relative;
  margin : 10px;
}
.contenu {
  position : absolute;
  border : 1px solid #e0e0e0;
  background-color : #eee;
  text-align : center;
  line-height : 200px;
}
.cache {
  display : none;
  color : #f00;
  font-weight : bold;
  background-color : #fee;  
}
</style>
<script type="text/javascript">
function fctCharge( etat_){
  var oElem = document.getElementById('loading');
  if( !etat_){
    oElem.style.display = 'block';
    setTimeout( function(){
      fctCharge( 1);
    }, 1000);
   }
   else{
     oElem.style.display = 'none';
   }
}
</script>
</head>
<body>
  <div class="conteneur dim">
    <div id="carte" class="contenu dim">
      Emplacement de la carte...
    </div>
    <div id="loading" class="contenu dim cache">
      Chargement en cours...
    </div>
  </div>
  <button onclick="fctCharge();">Charger</button>
</body>
</html>

l'exemple vaut surtout pour la construction du document...

**kohsaka** · 06/05/2011, 10h21

En fait, tu mets ton élément dans la div où la map se charge, si tu inspectes ta div id="carte" avec firebug par exemple, tu te rendras compte que le script vide ton <div> et y ajoute de quoi composer la map.

Code :

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

<div id="carte" style="width:78%; height:100%; float:right;z-index:-10">

z-index n'a aucune influence si tu ne précises pas une des positions suivantes à ton élément (par défaut il est en static) :

Code :

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

position: relative | absolute | fixed;

Et non, google maps, ce n'est pas du flash, enfin la map n'est pas en flash, street view, oui par contre.

**omar24** · 06/05/2011, 11h07

Absolument kohsaka le script vide ma div alors y a t-il pas un moyen de garder la div suceptible de contenir le texte au dessus de ma carte...

**kohsaka** · 06/05/2011, 11h29

Comme te le conseille NoSmoking, il faut que tu sortes cet élément de ce div

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.container {
   position: relative; /* nécessaire pour positionner correctement le <div class="test"> */
}
 
.test {
   position: absolute;
   left: 15px;
   top: 15px;
   z-index: 25; /* personnellement je préfère le préciser tout de même */
}

Code :

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

1
2
3
4
5
 
<div class="container">
   <div id="carte"></div>
   <div class="test">salut tout le monde</div>
</div>

**NoSmoking** · 06/05/2011, 13h33

Envoyé par NoSmoking

l'exemple vaut surtout pour la construction du document...

c'est effectivement ce que cela veut dire...

Afficher une DIV au dessus de ma carte

APIs Google

Discussions similaires

Partager

Partager