Et voilà après 2 semaines de travail sur la géolocalisation et environ 800 lignes de codes javascript , la cartographie des agences sur seloger.com est enfin fini 
Elle sera intégrée officiellement sur le site dans quelques semaine après validation de mes supérieurs.
Dans mon article précédent je vous ai montré un bout de code pour insérer un carte basique, je ne vais pas vous expliquer tout mon code (qui est très long) mais je vais pour le moment vous parler des marqueurs.
Comme vous pouvez le voir sur l’image de ma carte mes marqueurs sont simple, une icône classique et juste un nombre qui s’affiche dessus. Mais croyez moi c’est beaucoup plus compliqué.
Tout d’abord le chiffres que j’ai inséré sur l’icône représente le nombre d’agence se trouvant autour de ce point. Et c’est ce petit détail qui m’a compliqué la tache. Il faut savoir que dans le langage de googlemap, l’insertion de marqueurs se fait avec la fonction GMarkers, mais le souci c’est que cette fonction reste limité.
Avec GMarkers il m’est impossible d’insérer du texte dynamique dans mes marqueurs. Donc pour cela il m’a fallu faire appel à une autre fonction (mais qui n’est pas insérer dans le script de googlemap). J’ai donc utilisé la fonction LabeledMarker (qui me permet de personnaliser un peu mieux mes marqueurs). Pour utiliser cette fonction ilvous faut tout d’abord créer un script labeledmarker.js et y insérer le code de cette fonction que vous pourrez trouver ici.
Je crée donc une fonction qui me permettras d’afficher mes marqueurs au bonne endroit et avec les options souhaitées.
/* Add Markers with Text */
this.setMarker = function (lat, lon, markerOpts, str, opts) {
var marker;
marker = new LabeledMarker(new GLatLng(lat, lon), opts);
// Add to Markers array for removal
this.markerArray[this.markerArray.length] = marker;
this.map.addOverlay(marker);
marker.addInfoBox(markerOpts);
}
Cette fonction me permet d’afficher les marqueurs. Mais avant d’exécuter cette fonction il faut que je récupère les différentes données des agences (représenté par les marqueurs). Pour cela comme je l’ai dit dans l’article précédent je fais un appel de mon XML où est stocké la longitude et latitude des agences ainsi que les coordonnées des agences.
// Start Ajax call to retrieve xml data
$j.ajax({
type: ‘GET’,
url: ajax_url_m,
data: this.qry_page,
dataType: ‘xml’,
success: function (xml) {
$j(xml).find(’marker’).each( function (i) {
// Init variables
_lat = $j(’lat’, this).text();
_lng = $j(’lng’, this).text();
_nbagences = $j(’nbagences’, this).text();
_nom = $j(’nom’, this).text();
_codeinsee = $j(’codeinsee’, this).text();
_idquartier = $j(’idquartier’, this).text();
_iddivision = $j(’iddivision’, this).text();
_poly = $j(’poly’, this).text();
_levels = $j(’levels’, this).text();
});
Puis je fais un appel de ma fonction setmarker en lui passant comme paramètres les données des agences.
SLMapPointer.setMarker(
_lat,
_lng,
{
‘nom’: _nom,
‘idq’: _idquartier,
‘code’: code,
‘markerLat’: _lat,
‘markerLng’: _lng,
‘map’: tmpMap,
‘iteration’: i,
’slagence’: SLMapPointer,
‘nbagences’: _nbagences,
‘qry’: SLMapPointer.qry_page,
},
‘<span class=”mapOverlay”>’ + _nom + ‘ (’ + _nbagences + ‘ agences)</span>’,
// Voici les options de mes marqueurs
{
‘labelClass’: labelClass, // la class de mes marqueurs pour pouvoir les stylisé en css
‘labelText’: _nbagences , // le texte que je désire afficher sur l’icone
‘icon’: SLIconPointer, // l’icone qui est un .png créer auparavant
‘clickable’: true, // je décide de mettre mon marqueur cliquable
}
);
Et voilà tout cela pour afficher une petite icône avec un texte dynamique !!!
Attention dans votre HTML faites d’abord l’appel au script de googlemap, puis au script de la fonction LabeledMarker et enfin l’appel de votre propre script.
