InfoWindow passe au premier plan quand on clic dessus

**lolalilo** · 21/10/2011, 17h41

Bonjour,
je teste actuellement les possibilités qu'offrent google map api, et c'est vraiment chouette...
Par contre je ne n'arrive pas a faire quelque chose.
Je souhaite que lorsqu'on clic sur un marqker que l'info bulle ce mette au premier plan..

pour l'instant je n'ai vu que des solutions qui proposent de fermer les autres infos bulles ouvertes (n'affichant ainsi qu'une infos bulle à la fois)

Perso je preferais que toutes les infos bulles puissent etre ouvertes en meme temps.. et qu'elles passent au premier plan donc quand on clic dessus...

Je pense pouvoir imaginer une solution en php, mais je preferais utiliser les fonctions que propose javascript et google map api.

il me semble bien qu'un zindex soit prevu pour ces infos bulles, mais je n'arrive pas à bien comprendre comment l'utiliser, et comment je pourrais m'en servir.

merci

**NoSmoking** · 23/10/2011, 23h11

Bonsoir,
voir du coté de la méthode setZIndex(zIndex:number), qui permet de mettre en premier plan un marker en passant en paramètre la position.

**lolalilo** · 24/10/2011, 10h25

c'est bien là que j'avais vu ce Zindex... mais il n'y a aucun exemple...
comment l'utiliser sur un evenement onclick???

**NoSmoking** · 24/10/2011, 19h13

Envoyé par lolalilo

c'est bien là que j'avais vu ce Zindex... mais il n'y a aucun exemple...
comment l'utiliser sur un evenement onclick???

le plus simplement et naturellement du monde...

Code :

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

1
2
3
4
google.maps.event.addListener( marker, 'click', function() {
  infowindow.setZIndex( ++zIndexWindow); // mise sur le dessus
  infowindow.open( map, marker);
});

il te faut bien sûr une variable globale, ici zIndexWindow, que l'on incrémente au moment de l'affecter à l'infoWindow

**lolalilo** · 07/11/2011, 14h47

J'ai essayé ca ce week end, mais je sais opas pourquoi, ca ne marche pas...
bref je vais faire des test encore...

merci

**NoSmoking** · 09/11/2011, 19h52

montres nous ton code, avec 2 marqueurs pas 300

**lolalilo** · 14/11/2011, 23h13

Bon d'abord merci de vous occuper de moi, (un cas desesperer)
Surtout que le temps me manque pour vous faireavancer le chmilblik

voici la fonction que j'utilise (avec 2 markers uniquements)
Je pense qu'il faut que j'initialise la valeur du zindex et là je coince...

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
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
 
function init() {
    var myOptions = {
      zoom: 3,
      center: new google.maps.LatLng(40, 4.490381),
      mapTypeId: google.maps.MapTypeId.HYBRID,
	  mapTypeControl: false,
	  streetViewControl: false,
	  panControl: true,
	  panControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
	  },
	zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
      },
 
 
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	/* lieux */
	var premLatLng = new google.maps.LatLng(45.768047,4.817795);
 
	/* perso*/
	var deuzLatLng = new google.maps.LatLng(46.22764,2.21375);
 
 
	/* icons */
	var perso_img = 'img/perso.png';
	var flag_prem= 'img/flag_ensba.png';
	var shape_prem = { coord: [43, 0, 86, 30], type: 'rect' };
 
 
	/* prem */	
	var premMarker = new google.maps.Marker({
        position: premLatLng,
        map: map,
	title: "premier",
	icon: flag_prem,
	shape: shape_prem
 
	});
	var contentString = '<h3>Premier marker</h3>';
	var infowindow = new google.maps.InfoWindow({
    content: contentString, 
	});
	google.maps.event.addListener(ensbaMarker, 'click', function() {
	infowindow.setZIndex( ++zIndexWindow); // mise sur le dessus
	infowindow.open(map,premMarker);
	});
 
 
	/* deuz */
	var deuzMarker = new google.maps.Marker({
        position: deuzLatLng,
        map: map,
	title:"deuz",
	icon: perso_img
	});
	var contentString_deuz= '<div>second marker</div>';
	var infowindow_deuz = new google.maps.InfoWindow({
    content: contentString_deuz
	});
	google.maps.event.addListener(deuzMarker, 'click', function() {
	infowindow.setZIndex( ++zIndexWindow); // mise sur le dessus
	infowindow_deuz.open(map,deuzMarker);
	});
 
}

Merci de me m'indiquer ce qui manque...

**NoSmoking** · 14/11/2011, 23h29

il te faut tout d'abord déclarer ta variable de gestion du zIndex

Code :

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

var zIndexWindow = 0; //

ensuite cela devrait baigner

**lolalilo** · 15/11/2011, 00h13

ben ça baigne pas...

Mais je pense qu'il faut fabriquer un petit script un petit peu plus complex qui gere les valeurs de chaque zindex..

merci en tout cas je vais m'y pencher serieusement demain..

**NoSmoking** · 15/11/2011, 08h41

Envoyé par lolalilo

ben ça baigne pas...

Mais je pense qu'il faut fabriquer un petit script un petit peu plus complex qui gere les valeurs de chaque zindex..

en soignant un peu plus le script il y a des chances que cela fonctionne

Code :

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

1
2
3
4
google.maps.event.addListener(ensbaMarker, 'click', function() {
  infowindow.setZIndex( ++zIndexWindow); // mise sur le dessus
  infowindow.open(map,premMarker);
});

d'où sort ensbaMarker

une bonne façon d'écrire la chose en utilisant this dans la fonction qui fait référence au mraker passé en paramètre

Code :

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

1
2
3
4
google.maps.event.addListener(premMarker, 'click', function() {
  infowindow.setZIndex( ++zIndexWindow);
  infowindow.open( this.getMap(), this);
});

et encore

Code :

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

1
2
3
4
google.maps.event.addListener(deuzMarker, 'click', function() {
  infowindow.setZIndex( ++zIndexWindow); // PAS LA BONNE
  infowindow_deuz.open(map,deuzMarker);
});

tu augmentes le zIndex sur la mauvaise InfoWindow...

**lolalilo** · 15/11/2011, 10h43

pour info le ensbaMarker est une erreur rester dans le copier coller, il s'agit de l'identifiant que j'utilisait dans mon script et que j'ai oublié de changer lorsque je souhaité vous faire part de mon code.. Rien de bien mechant..

Sinon... ca y est ca marche, et même en mettant les marker au 1° plan ... cool merci beaucoup (le matin on y voit plus claire)

code complet pour ceux que ca interresse..

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
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
<script type="text/javascript">
function init() {
	var zIndexWindow = 0;
    var myOptions = {
      zoom: 3,
      center: new google.maps.LatLng(40, 4.490381),
      mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: true,
      panControlOptions: {
         position: google.maps.ControlPosition.LEFT_CENTER
      },
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_CENTER
      },
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	var premLatLng = new google.maps.LatLng(45.768047,4.817795);
	var deuzLatLng = new google.maps.LatLng(46.22764,2.21375);
 
	/* prem */	
	var premMarker = new google.maps.Marker({
        position: premLatLng,
        map: map,
	title: "premier",
	});
	var contentString = '<h3>Premier marker</h3>';
	var infowindow = new google.maps.InfoWindow({
        content: contentString, 
	});
	google.maps.event.addListener(premMarker, 'click', function() {
	infowindow.setZIndex( ++zIndexWindow);
        premMarker.setZIndex( ++zIndexWindow);
        infowindow.open( this.getMap(), this);
	});
 
	/* deuz */
	var deuzMarker = new google.maps.Marker({
        position: deuzLatLng,
        map: map,
	title:"deuz",
	});
	var contentString_deuz= '<div>second marker</div>';
	var infowindow_deuz = new google.maps.InfoWindow({
        content: contentString_deuz
	});
	google.maps.event.addListener(deuzMarker, 'click', function() {
	infowindow_deuz.setZIndex( ++zIndexWindow);
        deuzMarker.setZIndex( ++zIndexWindow);
        infowindow_deuz.open( this.getMap(), this);
	});
 
}
</script>

**NoSmoking** · 15/11/2011, 19h43

Envoyé par lolalilo

Sinon... ca y est ca marche, et même en mettant les marker au 1° plan ... cool merci beaucoup (le matin on y voit plus claire)

il te faut initialiser le zIndex des markers lors de leur création sans quoi lorsque tu cliques la première fois sur celui qui est derrière rien ne ce passe.

Code :

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

1
2
3
4
5
6
var premMarker = new google.maps.Marker({
  zIndex : 0,
  position: premLatLng,
  map: map,
  title: "premier",
});

Ne pas oublier le bouton

...

InfoWindow passe au premier plan quand on clic dessus

APIs Google

Discussions similaires

Partager

Partager