Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Regroupement de marqueurs

Présentation

Ce didacticiel explique comment utiliser des groupes de marqueurs pour afficher un grand nombre de marqueurs sur une carte. Vous pouvez combiner la bibliothèque MarkerClusterer et Google Maps JavaScript API pour regrouper des marqueurs à proximité les uns des autres et ainsi simplifier leur affichage sur la carte.

Pour voir comment fonctionne le regroupement de marqueurs, affichez la carte ci-dessous.

Le numéro figurant sur un groupe indique le nombre de marqueurs qu'il contient. Notez que lorsque vous faites un zoom avant sur un lieu associé à un groupe, le nombre de marqueurs que le groupe contient diminue à mesure que les marqueurs individuels s'affichent sur la carte. Lorsque vous faites un zoom arrière, les marqueurs sont de nouveau regroupés.

L'exemple ci-dessous montre tout le code dont vous avez besoin pour créer cette carte.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Essayez par vous-même

Placez la souris en haut à droite du bloc de code pour le copier ou l'ouvrir dans JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

À titre d'illustration, ce didacticiel ajoute un ensemble de marqueurs à la carte à l'aide du tableau locations. Vous pouvez toutefois utiliser d'autres sources pour ajouter des marqueurs à votre carte. Pour plus d'informations, voir le guide qui explique comment créer des marqueurs.

Comprendre le regroupement de marqueurs

La bibliothèque MarkerClusterer utilise la technique du regroupement basé sur une grille, qui divise la carte en carrés d'une certaine taille (la taille change en fonction du niveau de zoom) et regroupe les marqueurs dans chaque carré de la grille. Cela permet de créer un groupe au niveau d'un marqueur spécifique et d'y ajouter d'autres marqueurs qui se trouvent dans ses limites. Le processus est répété jusqu'à ce que tous les marqueurs soient affectés aux groupes de marqueurs de la grille en fonction du niveau de zoom.

Si des marqueurs se trouvent dans les limites de plusieurs groupes existants, Maps JavaScript API détermine la distance entre ces marqueurs et chaque groupe, et les ajoute au groupe le plus proche.

Vous pouvez définir une option MarkerClusterer pour ajuster la position du groupe de manière à refléter la distance moyenne entre tous les marqueurs qu'il contient. Vous pouvez également personnaliser l'option MarkerClusterer pour modifier d'autres paramètres, notamment la taille de la grille, l'icône du groupe et le texte du groupe.

Ajouter un regroupeur de marqueurs

Suivez les étapes ci-dessous pour ajouter un regroupeur de marqueurs :

  1. Obtenez la bibliothèque de regroupement de marqueurs et les images sur GitHub et stockez-les sur un serveur auquel votre application peut accéder.
    La bibliothèque JavaScript et les fichiers image pour MarkerClusterer sont disponibles dans le référentiel Google Maps sur GitHub. Depuis GitHub, téléchargez ou copiez les fichiers suivants dans un emplacement auquel votre application peut accéder :

  2. Ajoutez la bibliothèque de regroupement des marqueurs à votre page.

    Dans le code de ce didacticiel, le script ci-dessous spécifie l'emplacement du fichier bibliothèque markerclusterer.js sur https://developers.google.com.

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

    Modifiez le chemin d'accès pour indiquer l'emplacement où vous avez enregistré ce même fichier.


  3. Ajoutez un regroupeur de marqueurs dans votre application.

    Le code ci-dessous ajoute un regroupeur de marqueurs à la carte.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    Cet échantillon de code transmet le tableau markers à l'objet MarkerClusterer. Il indique également l'emplacement des cinq fichiers image dans le paramètre image. Remplacez ce chemin d'accès par celui de l'emplacement où vous avez enregistré les mêmes fichiers image.

En savoir plus

Des exemples plus complexes de regroupement de marqueurs sont disponibles dans le référentiel Google Maps sur GitHub.

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.