Google Maps API : gestionnaire de marqueurs

Reprenons notre exploration de l'API Google Maps pour r??soudre le probl??me suivant : comment afficher un unique marqueur regroupant plusieurs marqueurs lorsque le niveau de zoom est faible ? En effet, lorsque le nombre de marqueurs est tr??s important sur une petite r??gion, la carte est difficile ?? lire et lente ?? s'afficher. La r??ponse semble ??tre le gestionnaire de marqueurs GMarkerManager.

Partons de l'exemple 4 d'un pr??c??dent billet dans lequel nous d??l??guons l'affichage des marqueurs ?? un gestionnaire de marqueurs. Pour cela, on d??clare une variable mgr, que l'on instancie dans la fonction load :

var mgr;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(46.85, 1.75), 6);
mgr = new MarkerManager(map);

GDownloadUrl("exemple04.json", setup_json);
} else {
alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur.");
}
}

L'ajout des marqueurs se fait dans la fonctions setup_json en cr??ant d'abord un tableau de marqueurs, markers, ajouter en une fois ?? la carte via la fonction addMarkers prenant comme second param??tre le niveau de zoom minimum en de???? duquel les marqueurs ne sont pas affich??s, et un troisi??me argument optionnel, le niveau de zoom maximum au del?? duquel les marqueurs ne sont pas affich??s :

setup_json = function(json, status) {
var data = eval('(' + json + ')');
var markers = new Array();

for (var i=0; i<data.markers.length; i++) {
var point = new GLatLng(data.markers[i].lat, data.markers[i].lng);
var marker = createMarker(point, data.markers[i].html);
markers.push(marker);
}

mgr.addMarkers(markers, 5);
mgr.refresh();
}

Le r??sultat est visible sur l'exemple 8.

On peut appeler plusieurs fois la m??thode addMarkers avec diff??rents tableaux de marqueurs pour diff??rents niveau de zoom et g??rer ainsi, ?? la mano, les regroupements de marqueurs. Cela implique donc de calculer, sur le serveur, l'emplacement des marqueurs qui prendront la place d'un ensemble de marqueurs et du niveau de zoom auquel on affiche chacun... Pas simple ! Heureusement il existe une solution toute faite via une librairie JavaScript... Suite au prochain ??pisode !

Les autres billets de cette s??rie sur l'API Google Maps :

• API Google Maps : premi??res cartes
• Google Maps API : marqueurs et fen??tres d'informations
• Google Maps API : affichage des donn??es d'un fichier JSON
• Google Maps API : g??olocalisation (geocoding)
• Google Maps API : un marqueur d??pla??able
• Google Maps API : coordonn??es d'un marqueur
• Google Maps API : gestionnaire de marqueurs
• Google Maps API : gestionnaire automatique de marqueurs