Les clusters Google Maps

Avez-vous déjà entendu parler des clusters Google Maps ?
Le terme est peut-être assez barbare pour certains d’entre vous.

Définition

Pour faire simple, nous parlerons de système de grappes, similaire à celui d’une grappe de raisin.

Sur une carte de type Google Maps (Google Maps JavaScript API), vous retrouvez un certain nombre de markers correspondant à des lieux, représentés par des Pins.

Google Map Pin

La problématique

Quand vous n’avez que quelques markers présents sur la carte, pas de soucis, l’affichage est optimal, mais pensez au cas où le contenu présent sur votre site viendrait à augmenter.
Avec un nombre important de contenus présents sur votre carte, vous risquerez des phénomènes de superposition de Pins assez disgracieux et illisible.

Au-delà de 100 markers, je vous recommande vivement de penser à la mise en place de clusters.

C’est là qu’interviennent les clusters, en regroupant vos markers / Pins, situés à proximité, sous la forme d’une grappe, s’ouvrant et se refermant en fonction du niveau de zoom et de l’action de clic.
Les clusters sont simplement des groupes de markers.

Google a pensé aux développeurs et recommande vivement l’usage de la librairie MarkerCluster.

Lien vers la page du projet : https://github.com/googlemaps/js-marker-clusterer

Comment cela fonctionne ?

  1. La librairie MarkerCluster comptabilise le nombre de markers devant être affichés dans une zone donnée.
    Un algorithme basé sur le rayon et un découpage de zones sur la carte permet d’effectuer ce recensement.
    Ici, il n’est nullement question de zone géographique au sens pur, pas de pays, régions, départements, etc.
  2. L’ensemble des markers de la zone est remplacé par un unique marker / Pin (image) contenant en information le nombre total de markers présents dans le cluster (la grappe)

La gestion des niveaux de zooms

Un utilisateur qui accède au contenu avec un niveau de zoom relativement faible verra un regroupement des markers pour une consultation facilitée, puis un affichage des markers internes lorsque le niveau de zoom deviendra plus important.

Des paramètres peuvent être définis afin d’indiquer le nombre maximum de markers devant apparaître dans un cluster, …

Exemple de cluster OUT :

Cluster Out

Exemple de cluster IN :

Cluster In

Vous avez une problématique de performance ou de rendu sur une de vos Google Maps ?
Faites appel à moi pour la mise en place d’un système de gestion des clusters.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.