Comment regrouper les marqueurs sur Google Maps

Si vous devez afficher une grande quantité d’informations géographiques de manière claire et accessible, vous utilisez probablement Google Maps. Cependant, ces informations doivent être présentées de manière à permettre aux utilisateurs d’avoir rapidement une vue d’ensemble et, s’ils le souhaitent, d’accéder à des informations plus détaillées. Des centaines de marqueurs affichés simultanément peuvent rapidement devenir difficiles à interpréter.

Dans cet article, nous allons voir comment utiliser la bibliothèque JavaScript de clustering de marqueurs pour Google Maps afin de présenter ces informations sous forme de groupes, sans afficher de nombreux marqueurs qui se chevauchent. Nous expliquerons également brièvement son fonctionnement afin de vous aider à personnaliser les groupes de marqueurs dans vos projets.

Pourquoi a-t-on besoin du regroupement de marqueurs ?

Pour bien comprendre, observons cette carte de la Nouvelle-Zélande et de l’Australie avec des marqueurs Google Maps dispersés :

Même avec un libellé pour chaque marqueur, beaucoup sont si proches qu’ils se superposent. Il y a moins de 25 emplacements sur la carte, mais ils sont trop proches les uns des autres pour être affichés clairement.

Si votre carte ressemble à ceci, vos utilisateurs auront des difficultés à interpréter correctement les informations affichées. La solution est simple — c’est le clustering de marqueurs. À l’aide d’une bibliothèque open source et de quelques modifications mineures de votre code, il est possible d’ajouter le regroupement de marqueurs pour améliorer considérablement l’expérience utilisateur.

Le clustering de Google Maps est un outil pratique pour regrouper visuellement les marqueurs : il regroupe les points proches en un seul cluster affiché sous la forme d’une seule icône.

Activer le clustering de marqueurs sur votre carte

Vous pouvez ajouter le regroupement de marqueurs avec quelques lignes de JavaScript supplémentaires. Cet exemple montre comment procéder sur des cartes web, mais un utilitaire similaire existe également pour la plateforme Google Maps pour Android et les SDK de Google Maps Platform. Pour créer un cluster, commençons par voir comment créer des marqueurs non regroupés. En ajoutant des marqueurs standards à la carte, le code ressemblerait à ceci :

const pos1 = {lat: -33.727111, lng: 150.371124};

const marker1 = new google.maps.Marker({position: pos1, map: map});

const pos2 = {lat: -33.718234, lng: 150.363181};

const marker2 = new google.maps.Marker({position: pos2, map: map});

Avec des dizaines de marqueurs ou plus, il est peu probable que vous les créiez un par un à l’aide de variables individuelles. Cependant, ces deux marqueurs suffisent pour illustrer le fonctionnement du clustering.

Deux modifications sont nécessaires dans le code de la carte pour activer le regroupement. D’abord, téléchargez la bibliothèque de clustering. Téléchargez-la depuis GitHub et hébergez le fichier JavaScript sur votre serveur pour la production. Pour cette démo, nous l’inclurons depuis le site de documentation de Google Maps Platform :

<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>

Ensuite, intégrez la carte et les marqueurs dans la bibliothèque de clustering de Google Maps en ajoutant ces lignes sous les variables de vos marqueurs :

// create an array of all your markers const markers = [marker1, marker2];

//Path for cluster icons to be appended (1.png, 2.png, etc.) const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;

// Enable marker clustering for this map and these markers const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});

Une fois encore, vous devez héberger les images de clusters sur vos serveurs pour une utilisation en production. Dans cet exemple, l’image m1.png sera chargée, car la taille minimale du cluster est suffisante.

Lorsque vous créez une instance MarkerClusterer, vous lui passez la variable de la carte, un tableau de marqueurs et un chemin d’image. Une fois ces informations fournies, la bibliothèque affiche une icône de cluster indiquant le nombre de points qu’il contient :

Lorsque vous cliquez sur l’icône du cluster, la carte effectue un zoom pour que les deux marqueurs soient visibles. 

En dézoomant, l’icône du cluster réapparaîtra à la place des deux marqueurs dès que la carte sera à un niveau où ils peuvent se chevaucher.

Ce guide sur le clustering de marqueurs contient tous les détails et des exemples avec plus de points.

Comment fonctionne le clustering de marqueurs

La bibliothèque de regroupement de marqueurs fait partie des utilitaires cartographiques open source disponibles sur GitHub. Vous pouvez accéder à tout le code et même y apporter vos propres modifications. Voyons brièvement comment fonctionne l’algorithme.

Pour commencer, l’algorithme divise la carte en une grille, chaque cellule mesurant par défaut 60 × 60 pixels. En reprenant l’exemple de chevauchement ci-dessus, cela peut être visualisé ainsi :

En fait, la grille ne sera pas exactement la même que ci-dessus car elle est basée sur les marqueurs eux-mêmes. Le premier marqueur devient le centre de la première cellule. Les marqueurs suivants dans cette cellule seront ajoutés au cluster, puis le centre du cluster sera mis à jour en fonction de la position moyenne de tous les marqueurs qu’il contient. Si un marqueur peut faire partie de plusieurs clusters, il sera ajouté au cluster le plus proche en fonction de la distance entre les coordonnées.

Les paramètres par défaut couvrent la plupart des cas d’utilisation, mais comme le code est entièrement open source, vous pouvez effectuer toutes les modifications nécessaires.

Personnalisez le cluster Google Maps

Il existe de nombreuses façons de personnaliser l’apparence et le comportement de vos clusters. Beaucoup d’entre elles ne nécessitent même pas de modifier la bibliothèque sous-jacente. Plusieurs options peuvent être définies lors de la création d’un cluster.

Le moyen le plus simple de personnaliser les clusters dans Google Maps est d’utiliser vos propres icônes. Dans l’exemple simple, nous avons passé le paramètre imagePath. La bibliothèque ajoutera un chiffre (1-5) à la fin du chemin, suivi de l’extension du fichier (.png par défaut). Vous pouvez utiliser un type de fichier différent avec le paramètre imageExtension. Gardez à l’esprit que les icônes transparentes s’intègrent mieux sur la carte.

Par défaut, seuls deux marqueurs sont nécessaires pour créer un cluster. Vous pouvez utiliser l’option minimalClusterSize pour modifier ce réglage. Augmenter ce nombre peut entraîner le chevauchement de certains marqueurs, mais vous pouvez aussi définir le seuil de chevauchement.

Voici quelques autres options disponibles dans la bibliothèque :

gridSize : nombre de pixels dans la grille du cluster.

zoomOnClick : zoomer sur un cluster lorsqu’on clique dessus.

maxZoom : niveau de zoom maximum avant d’afficher systématiquement les marqueurs réguliers.

styles : tableau d’objets définissant chaque type de cluster, incluant textColor, textSize et d’autres propriétés.

Par exemple, vous pouvez combiner ces options de la manière suivante :

// Options to pass along to the marker clusterer const clusterOptions = { imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”, gridSize: 30, zoomOnClick: false, maxZoom: 10 };

// Add a marker clusterer to manage the markers. const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);

// Change styles after cluster is created const styles = markerClusterer.getStyles(); for (let i=0; i<styles.length; i++) { styles[i].textColor = “red”; styles[i].textSize = 18; }

Par exemple, vous pouvez utiliser toutes les options ci-dessus comme suit :

Comme vous pouvez le voir, il y a deux différences : plus de clusters (via une taille de grille plus petite), et des chiffres rouges légèrement plus grands.

En cliquant sur un cluster, le niveau de zoom ne changera pas, mais vous pouvez effectuer un zoom manuellement. Les marqueurs individuels apparaîtront plus rapidement ; la taille de la grille réduit les risques de chevauchement. Une fois le niveau de zoom 10 atteint (la carte démarre au niveau 3), tous les marqueurs seront affichés, peu importe leur proximité.

Vous passez ainsi d’une carte saturée de marqueurs à une carte claire, structurée et facile à lire. En examinant le code, vous trouverez encore plus de façons de personnaliser la bibliothèque. Utilisez ces connaissances pour offrir une meilleure expérience à vos utilisateurs sur des cartes denses.

N’hésitez pas à contacter notre équipe Partenaire Google Maps pour obtenir des conseils ou une expertise technique pour mettre en œuvre ces fonctionnalités.

Que proposons-nous ?

• Services de développement basés sur Google Maps Platform ;
• Formation des équipes techniques ;
• Consultations et intégration d’API ;
• Support technique.

En collaborant avec nous, vous pourrez bénéficier :

• D’un accès à un système de remise à sept niveaux, possible uniquement avec un partenaire Google Maps ;
• Du paiement par facture en EUR, USD ou cryptomonnaies ;
• D’un support professionnel tout au long de la mise en œuvre et de l’utilisation de la solution.