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 :
Voilà ma fonction d'initialisation générale :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 var marqueur_courant = null;
ma variable "tab" contient tous les éléments de ma table SQL
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 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]); } } }
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 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); }
Voilà donc pour le code de ma carte.
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); }); }
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.
Partager