génération dynamique de marker et infobulle

Version imprimable

Bonjour à tous,

Sur une carte je place des marker depuis une BDD, récupéré en ajax via json.
Les points se placent correctement sur la carte, mais il semble n'y avoir qu'une infobulle. Quelque soit le clic, c'est la meme infobulle, qui s'ouvre sur le premier marker.

Voici le code json que va chercher jquery :

Code:

1
2
3
4
5
6
 
([{"gps_nord":"45.7636909566187","gps_est":"4.88067626953125","frenchDateObs":"12\/04\/09","localite"
:"Lyon","num_can":"ATATAT","email":"s.artois@sfr.fr"},{"gps_nord":"45.7598586878557","gps_est":"4.8944091796875"
,"frenchDateObs":"12\/04\/09","localite":"Lyon","num_can":"VTVTVT","email":"s.artois@sfr.fr"},{"gps_nord"
:"45.7100152394337","gps_est":"4.8175048828125","frenchDateObs":"12\/04\/09","localite":"Lyon","num_can"
:"GTGTGT","email":"s.artois@sfr.fr"}])

Et voici la fonction :

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
 
$.ajax({
type:"POST", url:"ajaxrecorder.php", timeout:5000, data:"needcoords=0", dataType:"json", 
success:function (data, textStatus) {
    for (var x = 0; x < data.length; x++) {
        var point = new GLatLng(data[x].gps_nord,data[x].gps_est);
	var marker = new GMarker(point, {draggable: false});
	marker.loc = data[x].localite;
	marker.dat = data[x].frenchDateObs;
	marker.numcan = data[x].num_can;
	marker.email = data[x].email;
	GEvent.addListener(marker, "click", function( ){
	    marker.openInfoWindowHtml(
		"Observation réalisée le "+marker.dat+"<br/>"+
		"Par : "+marker.email+"<br/>"+
		"A "+marker.loc+"<br/>"+
		"Numéro du canard : "+marker.numcan
	    );
	});
	map.addOverlay(marker);
    }
},
error:function (xhr, textStatus, errorThrown) {
    console.log("error : "+xhr.status+", "+xhr.statusText);
}
});

Donc je voudrais que chaque marker ai son infobulle. Mais dans mon code, vu que j'ai qu'une variable, je pense qu'il écrase à chaque fois l'infobulle. Il faudrait changer le nom de variable, mais j'y arrive pas. Vous avez une idée ?

Salut,
Ce qui m'étonne, c'est que ça s'ouvre sur le premier marqueur, en toute logique, ça devrait être sur le dernier... En effet, dans ta boucle, tu définis plusieurs fois des marqueurs sous le même nom, donc au moment du click, c'est logiquement le dernier qui est référencé.
Code:

1 2 3 4 5 6 7 8 GEvent.addListener(marker, "click", function( ){ marker.openInfoWindowHtml( "Observation réalisée le "+this.dat+"<br/>"+ "Par : "+this.email+"<br/>"+ "A "+this.loc+"<br/>"+ "Numéro du canard : "+this.numcan ); });

26/04/2009, 10h03
Sylvain__A_
Oui effectivement, c'est le dernier. Si je vous donne de fausse info, on va pas y arriver :D

Donc j'ai essayé, avec this, c une bonne idée, et effectivement, y'a du mieux. Lorsqu'on clique, on a bien les infos du marker, chaque clique fait évoluer les infos, mais malheureusement, je n'ai toujours qu'une seule infowindow.

Je continue de chercher, si vous avez une idée...

*****************************************
J'édite mon message après qqs essais infructeux

En fait ce qui serait top c'est que le nom du marker soit dynamique, sa me permettrait de pouvoir y accéder par la suite.

Un truc du genre :
Code:

1 2 var marker+x = new GMarker(point, {draggable: false});

Je m'en suis sorti, grâce à cet page notament :
discussion google group

J'ai définit une fonction qui ajoute un "écouteur de clic" et ouvre un popup :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
function addClickEvent(marker,dat,email,loc,numcan){
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(
			"Observation réalisée le "+dat+"<br/>"+
			"Par : "+email+"<br/>"+
			"A "+loc+"<br/>"+
			"Numéro du canard : "+numcan
		);
	});
}

j'ai déclaré un tableau de marker, et réécrit légérement la boucle for :

Code:

1
2
3
4
5
6
7
8
9
10
 
var theMarker = new Array();
 
for (var x = 0; x < data.length; x++) {						
    var coords = new GLatLng(data[x].gps_nord,data[x].gps_est);
    theMarker[x] = new GMarker(coords, {draggable: false});
    theMarker[x].id = data[x].id;
    map.addOverlay(theMarker[x]);
    addClickEvent(theMarker[x], data[x].frenchDateObs, data[x].email, data[x].localite, data[x].num_can ); 
}

Et voilà :) Merci à tous !