Discussion :

[Pierrick81]

Bonjour à tous,

Je suis bloqué depuis plusieurs jours, et après bien des tentatives, je repars à 0, et je fais appel à vos conseils.

J'ai une table SQL, dans laquelle j'ai des titres associés à des latitudes et à des longitudes.
J'ai dans certains cas plusieurs titres qui ont les mêmes latitudes et les mêmes longitudes.
Je voudrai dans ce cas afficher un seul marqueur, et ouvrir une infobulle dans laquelle je pourrai "naviguer" dans les différents titres. Par exemple une barre de navigation du type "< 1 sur X >".
Le problème est que je ne sais pas par où prendre le problème.
Actuellement voilà où j'en suis.

Je créé une variable globale :

Code :

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

1
2
 
	var marqueur_courant = null;

Voilà ma fonction d'initialisation générale :
ma variable "tab" contient tous les éléments de ma table SQL

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function initialiser() 
{						
	CreationCarte(table[0][0],table[0][1]);
 
	for( i = 0; i < tab.length; i++) 
	{// Définition de la position du pointeur 
		if((tab[i][6])&&(tab[i][7]))
	       {
			CreationMarker(tab[i][6],tab[i][7]);
		}
	}
}

Ma fonction de Création de la carte :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function CreationCarte(lati, longi)
{
	// Définition du point central de la carte affichée
        var latlng = new google.maps.LatLng(lati, longi);
	//Définition des options de la carte google Maps
	Mapsoptions = 
	{
	   center: latlng,
	   zoom: 10,
	   mapTypeId: google.maps.MapTypeId.ROADMAP	
	};
       carte = new google.maps.Map(document.getElementById("carte"), Mapsoptions);				
}

Puis ma fonction de création des marqueurs :

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
function CreationMarker(lati, longi)
{						       
	var point = new google.maps.LatLng(lati, longi);		
	/**************** Définition des options du marqueur*******/
	optionsMarqueur = 
	{
  	        position: point,
		map: carte,	
		icon: tab[i][10],
		title: tab[i][1]
	};
	// Création du marqueur
	marqueur = new google.maps.Marker(optionsMarqueur);
 
	markers.push(marqueur);	
	// Définition du contenu de l'infobulle
	contentString =							
         '<div class="text_infobulle"  >'+
         ' <img src="' + tab[i][4] + '" height="80px"><a href="deal-'+tab[i][11]+'-'+tab[i][0]+'-   '+tab[i][12]+'" title="'+tab[i][1]+'"><b> '+tab[i][1]+'...</b></a></br> '+	
	'<a href="deal-'+tab[i][11]+'-'+tab[i][0]+'-'+tab[i][12]+'" title="'+tab[i][1]+'">Plus d\'infos ></a>'+
	'</div>';
 
	// Création de l'infobulle
	var infowindow = new google.maps.InfoWindow	({
	        content: contentString,
		position: point,							
	});
 
	// Association de l'infobulle au marqueur
	marqueur._infowindow = infowindow;
 
	// Création de la fonction Clic
	google.maps.event.addListener(marqueur, 'click', function ()
	{ 						
		if(marqueur_courant){
			marqueur_courant._infowindow.close();
		}		
		marqueur_courant = this;
		// ! IMPORTANT on utilise this et non pas marqueur
		this._infowindow.open( carte, this);
	});
}

Voilà donc pour le code de ma carte.
J'ai donc besoin d'aide pour la méthode.
A quel endroit faut-il tester si un marqueur de même latitude et de même longitude existe déjà ?
Et est-ce qu'il faut concatener l'infobulle ?
Ou alors faut-il refaire un tableau avant de lancer la création des marqueurs dans lequel on regroupe les marqueurs de même latitude et de même longitude ?
Et dernière question comment faire la navigation dans l'infobulle ? Il faut utiliser du JQuery ? Est-ce que c'est accepté dans le contentString de l'infobulle ?

Un grand merci pour vos conseils et votre aide.

Bonne journée.

P.

[NoSmoking]

Bonjour,
Il te faut prendre le problème à la source pour la structuration des données lors de la création de la table.
Cela dépend aussi, bien sûr de la structure en amont, ta table SQL.

J'ai dans certains cas plusieurs titres qui ont les mêmes latitudes et les mêmes longitudes.

donc pour un couple lat/lng correspond 1 à n titre, il ne faut donc pas multiplier, dans la table, les entrées lat/lng mais y faire correspondre une array de titre et les reste éventuellement. ( pas trop clair à la relecture )

A quel endroit faut-il tester si un marqueur de même latitude et de même longitude existe déjà ?

la question ne se pose donc plus
...cela pourrait donner un truc du style

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
var data = [
  [
    latitude_0,    // latitude centre map
    longitude_0,   // longitude centre map
    [], // ici array des titres
    autre_data_0
  ],
  [
    latitude_1,
    longitude_1,
    [titre_1_1, titre_1_2], // ici array des titres
    autre_data_1
  ],
  // le reste des donnees
  [
    latitude_n,
    longitude_n,
    [titre_n_1], // ici array des titres
    autre_data_n
  ]
];

lors de la création des marker il suffit de boucler sur la length des titres pour réaliser le contentString.

Une notation JSON serait sûrement plus appropriée d'ailleurs.

Et dernière question comment faire la navigation dans l'infobulle ? Il faut utiliser du JQuery ? Est-ce que c'est accepté dans le contentString de l'infobulle ?

je répond dans l'ordre inverse
- contentSting, contient tu texte HTML, mais peut également contenir des instructions javascript inline.
On notera que l'on peut également passer à la fonction un noeud DOM, ce qui dans ton cas peut être très intéressant.
- JQuery, n'est qu'une bibliothèque javascript, donc son utilisation est possible mais pas obligatoire. A ce sujet si tu utilises jQuery autant l'utiliser pour tout y compris la création de ta carte et du reste.
- navigation dans l'infobulle, je rejoins ici le nota fait ci dessus.