Clustering de puntos en Google Maps v3

7
18503

Clustering de puntos en Google Maps v3

0. Índice de
contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core i7, 8 GB DDR3)
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.4
  • API Google Maps
  • google-maps-utility-library-v3

2. Introducción

Cuando trabajamos en aplicaciones de geoposicionamiento con Google Maps nos podemos encontrar con que en base al zoom seleccionado y al número de puntos que haya que visualizar, éstos salgan muy juntos y no se puedan distinguir uno de otros como en el ejemplo que se muestra a continuación:

La solución conceptual para este problema es agrupar los puntos para mostrar uno solo, que pinchando sobre él vaya mostrando el resto. Este es el concepto de clustering y la forma más sencilla de implementarlo en Google Maps es utilizar las utilidades que están implementadas en la librería Marker Clusterer del proyecto google-maps-utility-library-v3 que se distribuye bajo licencia Apache 2.0, con lo que llegado el caso se podría utilizar en proyectos con fines comerciales.

3. Vamos al lío

En primer lugar vamos a utilizar el API de Google Maps para visualizar el mapa que hemos visto en la introducción. Para ello vamos a crear un HTML con el siguiente contenido:

En este ejemplo utilizamos el API de Google Maps para, a partir de los datos almacenados en el fichero data.json, ir posicionando los puntos en el mapa. El fichero data.json tendría este aspecto:

Estos son solo algunos de los puntos. Manteniendo esta estructura se pueden añadir los que queramos.

Si ahora visualizamos este fichero desde cualquier navegador web veríamos algo muy parecido a lo que se mostraba en la introducción.

Vamos a ver lo sencillo que es hacer clustering con la librería antes mencionada. Simplemente añadimos la librería y en vez de ir introduciendo uno por uno los puntos en el mapa, los almacenamos en un array que utilizaremos como parámetro de entrada para la construcción del clustering.

Este sería el fichero HTML con cluster:

El resultado debería ser algo parecido a esto:

4. Referencias

Estas son las referencias utilizadas para este tutorial:

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.

7 Comentarios

Dejar respuesta

Please enter your comment!
Please enter your name here