Agrupación de marcadores de Google Maps

La guía paso a paso o código que hallarás en este artículo es la resolución más rápida y válida que hallamos a esta inquietud o dilema.

Solución:

Hay varias formas de abordar esto, pero déjame mostrarte un enfoque.

Primero, comencemos con un array de ubicaciones (tomado de los tutoriales de la API de Google Maps):

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 1],
  ['Coogee Beach', -33.923036, 151.259052, 1],
  ['Cronulla Beach', -34.028249, 151.157507, 2],
  ['Manly Beach', -33.800101, 151.287478, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 2]
];

Esto es en realidad un array de matrices. Representa 5 playas australianas, y tenemos el nombre, latitud, longitud y categoría. La categoría en este caso es solo un número en aras de la simplicidad.

Entonces es importante que guardemos una referencia de los marcadores que creamos. Para ello, podemos utilizar un markers array donde almacenamos cada marcador nuevo, y también podemos aumentar cada objeto de marcador con su ID de categoría:

var markers = [];

var i, newMarker;

for (i = 0; i < beaches.length; i++) 
  newMarker = new google.maps.Marker(
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
    map: map,
    title: beaches[i][0]
  );     

  newMarker.category = beaches[i][3];     
  newMarker.setVisible(false);

  markers.push(newMarker);

Finalmente, cuando necesitamos mostrar los marcadores, podemos simplemente iterar sobre el markers arrayy llama al setVisible() método de acuerdo a qué categoría nos gustaría mostrar.

Es posible que desee consultar el siguiente ejemplo completo:

Captura de pantalla del ejemplo anterior, después de hacer clic en el botón "Mostrar grupo 2":

Básicamente, solo necesita almacenar referencias a objetos Marker en un arrayconfigure su tipo (escuela, parada de autobús, etc.) y luego, en algún evento, recorra y oculte/muestre según corresponda:

var markers = [];

// create Marker

marker.locType = 'school'; //as appropriate

function hideMarkersOfType(type) 
    var i = markers.length;
    while(i--) 
        if (markers[i].locType == type) 
            markers[i].setVisible(false);
        
    


// similar function showMarkersOfType() calling markers[i].setVisible(true);

Eso debería ser un buen comienzo de todos modos.

Recuerda que te brindamos la opción de explicar tu experiencia si diste con la solución.

---

---

Utiliza Nuestro Buscador