Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Agrupación de marcadores en clústeres

Información general

En este instructivo se muestra la manera de usar clústeres de marcadores para mostrar una gran cantidad de marcadores en un mapa. Puedes usar la biblioteca MarkerClusterer junto con la Google Maps JavaScript API para combinar marcadores cercanos en clústeres y simplificar la representación de marcadores en el mapa.

Para ver la manera en que funciona la agrupación de marcadores, observa el mapa a continuación.

El número de un clúster indica la cantidad de marcadores que contiene. Observa que, a medida que apliques zoom de acercamiento a cualquiera de las ubicaciones del clúster, el número de este disminuirá y empezarás a ver los marcadores individuales en el mapa. Al aplicar zoom de alejamiento al mapa, los marcadores se consolidarán nuevamente en clústeres.

En el siguiente ejemplo, se muestra el código completo que necesitas para crear este mapa.

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>

Pruébalo

Desplázate a la esquina superior derecha del bloque de código para copiar el código o abrirlo en 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>

A modo de ilustración simple, en este instructivo se agrega un conjunto de marcadores al mapa usando la matriz locations. Puedes usar otras fuentes a fin de obtener recursos para tu mapa. Para obtener más información, lee la guía sobre cómo crear marcadores.

Información sobre la agrupación de marcadores en clústeres

La biblioteca MarkerClusterer usa la técnica de agrupación en clústeres basada en cuadrículas que divide el mapa en cuadrados de un tamaño determinado (el tamaño cambia con cada nivel de zoom) y agrupa los marcadores en cada cuadrícula cuadrada. Crea un clúster en un marcador determinado y agrega marcadores al clúster que se encuentren dentro de sus límites. Este procedimiento se repite hasta asignar todos los marcadores a los clústeres de marcadores basados en cuadrículas más cercanos según el nivel de zoom del mapa.

Si los marcadores están dentro de los límites de más de un clúster existente, Maps JavaScript API determina la distancia del marcador respecto de cada clúster y lo agrega al clúster más cercano.

Puedes configurar una opción MarkerClusterer para ajustar la posición del clúster de modo que refleje la distancia promedio entre todos los marcadores que se encuentren dentro de él. También puedes personalizar el MarkerClusterer para modificar otros parámetros, como el tamaño de la cuadrícula, el ícono del clúster, el texto del clúster, etc.

Agregar un agrupador de marcadores en clústeres

Sigue los pasos que se indican a continuación para agregar un agrupador de marcadores en clústeres:

  1. Obtén una biblioteca de agrupación de marcadores en clústeres e imágenes en GitHub, y almacénalos en un servidor al que tu app pueda acceder.
    La biblioteca JavaScript y los archivos de imagen para el MarkerClusterer están disponibles en el repositorio de Google Maps de GitHub. Descarga o copia los siguientes archivos de GitHub en una ubicación a la que tu app pueda acceder:

  2. Agrega la biblioteca de agrupación de marcadores en clústeres a tu página.

    En el código para este instructivo, la secuencia de comandos a continuación especifica la ubicación del archivo markerclusterer.js de la biblioteca en https://developers.google.com.

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

    Cambia la ruta de acceso para especificar la ubicación en la que guardaste el mismo archivo.


  3. Agrega un agrupador de marcadores en clústeres a tu app.

    El siguiente código agrega un agrupador de marcadores en clústeres al mapa.

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

    En este ejemplo, se pasa una matriz markers al MarkerClusterer. También se especifica la ubicación de los cinco archivos de imagen en el parámetro imagePath. Reemplaza esto con la ruta de acceso a la ubicación en la que guardaste los mismos archivos de imagen.

Más información

Puedes ver ejemplos más complejos de agrupación de marcadores en clústeres en el repositorio de Google Maps de GitHub.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.