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 :




-->



Poster un nouveau commentaire

Le contenu de ce champ est gardé secret et ne sera pas montré publiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Allowed HTML tags: <a> <em><cite> <code><center> <script><ul><img> <ol> <li> <dl> <dt> <dd><p><br><embed><object><param>

  • You can use <object>, <embed> and <script> tags from the following sites to add media to your posts:

    • http://www.youtube.com
    • http://media.nowpublic.com
    • http://youtube.com
    • http://dailymotion.com
    • http://www.dailymotion.com

Plus d'informations sur les options de formatage

CAPTCHA
Cette question nous sert à déterminer si vous êtes un humain, un robot ou un extra-terrestre
11 + 2 =
Veuillez résoudre ce simple problème mathématique afin de poster votre commentaire. Par exemple pour 1 + 3 entrez : 4