Gestion des z-index

Version imprimable

Gestion des z-index

Bonjour,
Je tente d'interposer une image entre la carte et un marqueur, ci-dessous un exemple de code très simple.
Le z-index de la carte est à 2, de l'image à 3, du marqueur à 5, l'image est pourtant au-dessus du marqueur, pouvez-vous me dire pourquoi, et comment réaliser ce que je désire faire,
Exemple visible à
www.cybtechnologie.com/essai/essai.htm
Merci.
Trachy

Code:

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
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("mymap"), myOptions);
 
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Hello World!",
        zIndex : 5,
    });   
  }
</script>
</head>
<body onload="initialize()">
  <div id="mymap" style="position: absolute; top: 0 px; left: 0 px; width: 800px; height: 600px; z-index:2"></div>
  <div id="image" style="position: absolute; top: 400 px; left: 500 px; z-index:3"><img src="image.gif" width="408" height ="408" /></div>
</body>
</html>

13/02/2012, 22h21
NoSmoking

Bonsoir,
tu ne peux pas jouer avec le z-Index des différentes couches
:faq:http://javascript.developpez.com/faq...rkerInfoWindow
14/02/2012, 12h40
philou8

zindex marker

Bonjour,
En fait mon problème est que je présente une image dans un coin défini de la carte, à chaque survol d'un marqueur, l'image disparaissant lorsque l'on fait un mouseout.
Si le marqueur est sous la zone où doit apparaitre l'image, il s'en suit un état instable donc l'image clignote.
j'avais pensé à cette solution simple qui consiste à mettre l'image dans une couche se situant sous le marqueur, mais tu as l'air de dire que cela est impossible, même en fixant un zindex de l'image à 3 donc nettement en dessous du zindex théorique du marqueur.

Que faire, changer l'image du marker à son survol, mais alors les images n'apparaitront pas à un endroit fixe! une idée?
Merci
Trachy

Citation:

...mais tu as l'air de dire que cela est impossible...

non que nenni, mais pas en jouant avec les zIndex des différents plans.

Tu peux toujours essayer de créer un marqueur personnalisé que tu affiches où tu le souhaites, mais qui suivra les mouvements de la carte, cela peut se gérer.

Un petit exemple

Code:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>...</title>
<style type="text/css">
html, body {
  height : 100%;
  margin: 0;
  padding : 0;
}
#div_map{
  margin : auto;
  margin-top:50px;
  width : 600px;
  height: 600px;
  border : 1px solid #808080;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function createImage(){
  var larg = 218, haut = 90;
  var oImg = new google.maps.MarkerImage(
    // URL image
    'http://www.developpez.net/template/images/logo.png',
    // SIZE Taille Image
    new google.maps.Size( larg, haut),
    // ORIGIN Origine Image 0,0, utile si utilisation de sprite
    new google.maps.Point(0,0),
    // ANCHOR Position d'accrochage sur la Map
    new google.maps.Point( larg/2, haut/2)
  );
  return oImg;
}
 
function initCarte(){
  var ptCentre = new google.maps.LatLng( 46.80, 1.70);
 
  var oMap = new google.maps.Map(document.getElementById('div_map'),{
    'zoom' : 6,
    'center' : ptCentre,
    'streetViewControl' : false,
    'mapTypeControl' : false,
    'zoomControlOptions' : {
      'style' : google.maps.ZoomControlStyle.SMALL
    },
    'mapTypeId' : google.maps.MapTypeId.ROADMAP
  });
 
  var oMarker = new google.maps.Marker({
    'position' : ptCentre,
    'map' : oMap
  });
 
  var oImage = new google.maps.Marker({
    'icon' : new createImage(),
    'position' : ptCentre,
    'map' : null
  });
  // garde adresse de l'image
  oMarker.image = oImage;
 
  google.maps.event.addListener( oMarker, 'mouseover', function(){
    this.image.setMap( this.getMap());
  });
  google.maps.event.addListener( oMarker, 'mouseout', function(){
    this.image.setMap( null);
  });  
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
  <div id="div_map"></div>
</body>
</html>

15/02/2012, 19h50
philou8

Positionnement en absolu de l'image (px)

Bonsoir NoSmoking,
Cette solution est interessante; ceci dit j'aimerais positionner l'image dans une zone précise du cadre, donc avec une valeur x,y en px par rapport au point haut du cadre.
La position du marker oImage est en LatLng et je ne veux pas recalculer la valeur pour chaque niveau de zoom.
Tu vois une solution simple?
Merci d'avance,
Trachy
17/02/2012, 14h41
NoSmoking

ton soucis est un soucis d'ergonomie et/ou de gestion des événements.
Il existe toutefois des méthodes, voir google.maps.OverlayView class qui te permettrait de positionner en pixel ton élément.