Discussion :

[Nheil]

Bonjour à tous,
je rencontre un petit souci dans l'affichage d'infos bulle sur des marker googleMap.

Je souhaite avoir l'affichage d'une info bulle lors du click sur ce marker.
Or actuellement la bulle s'affiche sur le dernier marker qui a été déssiné, et non sur le marker clické.

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
 
 
stoTicketsClos.load({
					callback:function(records){
					for(var i=0; i<records.length; i++){
						var noAppel = records[i].data.noAppel;
						var x = records[i].data.x;
						x = x.replace(',','.');
						var y = records[i].data.y; 
						y = y.replace(',','.');
						CreateMarker(new google.maps.LatLng(x,y), 6);
 
						/*alert(i);
					 alert(noAppel);
						alert(x);
						alert(y); */
					}
					}
					}); 
		function CreateMarker(point, zoom){
		var markerOptions = {
			position:	point,
			clickable:	true,
			icon:		iconMarker0,
			title:		'Position test\351e'
		};
		marker = new google.maps.Marker(markerOptions);
		infoWindow = new google.maps.InfoWindow({content: '<div class="contentTab" style="margin-right:10px">coord=' + point + '</div>'});
 
 
		/* Click sur le marker */
		google.maps.event.addListener(marker, 'click', function(){
			/* Ouverture du popup */
			infoWindow.open(map, marker);
		});
 
		/* Ajout du marker sur la carte */
		marker.setMap(map);
	}

[Bovino]

Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

[Nheil]

Je viens de faire des essais en ajoutant un this. dans mon code afin de lui spécifier que je souhaite ajouter mon infobulle a chaque boucle.
Sans succès.

De quel manière dois-je adapter mon code par rapport à l'exemple que tu m'as donné?

[weboblog]

Bonjour Nheil,

Dans ton cas, le mieux est de déclarer ta variable infoWindow en globale (hors de ta fonction) :

Code js :

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

1
2
 
var infoWindow = new google.maps.InfoWindow();

Cela permettra notamment de fermer ta fenêtre dès que tu en ouvriras une autre.

Ensuite, dans ta fonction CreateMarker, tu déclares une variable par exemple content avec ton contenu. Dans ton cas :

Code js :

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

1
2
 
var content = ('<div class="contentTab" style="margin-right:10px">coord= '+point+'</div>');

Dans ton écouteur d'événement tu attribues cette variable (content) à ta variable infoWindow :

Code js :

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

1
2
 
infoWindow.setContent(content);

Tu fermes la fenêtre si jamais elle est ouverte (permet d'en avoir qu'une seule d'ouverte):

Code js :

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

1
2
 
infoWindow.close();

Puis enfin tu l'ouvres avec ton nouveau contenu :

Code js :

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

1
2
 
infoWindow.open(map, point);

Ce qui devrait donner au final quelque chose comme ça :

Code js :

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
 
 
var infoWindow = new google.maps.InfoWindow();
stoTicketsClos.load({
					callback:function(records){
					for(var i=0; i<records.length; i++){
						var noAppel = records[i].data.noAppel;
						var x = records[i].data.x;
						x = x.replace(',','.');
						var y = records[i].data.y; 
						y = y.replace(',','.');
						CreateMarker(new google.maps.LatLng(x,y), 6);
 
						/*alert(i);
					 alert(noAppel);
						alert(x);
						alert(y); */
					}
					}
					}); 
		function CreateMarker(point, zoom){
		var markerOptions = {
			position:	point,
			clickable:	true,
			icon:		iconMarker0,
			title:		'Position test\351e'
		};
		marker = new google.maps.Marker(markerOptions);
		var content = ('<div class="contentTab" style="margin-right:10px">coord= '+point+'</div>');
 
 
		/* Click sur le marker */
		google.maps.event.addListener(marker, 'click', function(){
			/* Ouverture du popup */
                        infoWindow.setContent(content);
			infoWindow.close();
			infoWindow.open(map, marker);			
		});
 
		/* Ajout du marker sur la carte */
		marker.setMap(map);
	}

En espérant que cela réponde à ton besoin,

Cdlt,