Google Maps, o cómo no perder el rumbo

Si en nuestro diccionario buscáramos la palabra mapa, uno de los primeros resultados en aparecer debiera ser Google Maps. Difícilmente podamos llevar la cuenta de la cantidad de veces que acudimos a este fantástico servicio de Google, ya sea para obtener una dirección, observar una calle, o, por qué no, disfrutar de un momento de recreación, visitando lugares increíbles situados a miles de kilómetros de donde estamos.

Recientemente, estuvimos trabajando en un proyecto web que nos planteaba la necesidad de contar con un mapa –en verdad, más de uno–. Y, como podrán sospechar tras leer estas primeras líneas, nuestra elección recayó sobre la API de Google Maps. Detrás de esto surge una pequeña historia; historia que, como cualquier otra, merece ser contada, y eso es, precisamente, lo que haremos a continuación:

Lo que precisábamos, básicamente, era una herramienta que nos permitiera desplegar un mapa con un importante número de puntos (localizaciones) en él; puntos a los que, de aquí en adelante, llamaremos markers (o marcadores). Inicialmente, la idea era que dicho mapa fuera estático –es decir, una imagen, sin zoom ni ninguna otra capacidad de interacción por parte del usuario–.  Los mapas estáticos de Google Maps parecían ser la opción ideal, sobre todo porque cumplían a rajatabla con esto último. Fue así como decidimos proceder a su implementación.


Desgraciadamente, no demoramos en darnos cuenta que procesar semejante cantidad de información (cientos y cientos de markers) sería una labor imposible, dadas las limitaciones técnicas presentes en este tipo de mapas, ideados para propósitos mucho más simples.

La vuelta al punto inicial fue abrupta e inevitable. Decidimos, entonces, tomarnos un momento para analizar más exhaustivamente qué otras opciones teníamos, y detectar cuál de ellas podía ser la más acertada. Frente a nuestros ojos comenzaron a desfilar diferentes servicios dedicados a la creación de mapas: ArcGIS, Mapbox, OpenStreetMap y Google Maps –en su vertiente tradicional, esto es, los mapas dinámicos que habitualmente utilizamos–.

No fue fácil tomar una decisión, fundamentalmente porque cada uno de estos nombres tenía con qué ganarse nuestra atención. Sin embargo, terminamos, una vez más, decantándonos por Google Maps. ¿La razón? Su documentación. Un aspecto para nada menor que, en este caso, fue determinante al momento de inclinar la aguja de nuestra balanza, considerando sus ricas explicaciones y ejemplos.

Manos a la obra

Hasta aquí, todo muy lindo, pero, ¿qué hay de la implementación de nuestro mapa? Lo primero por hacer es, naturalmente, cargar la API de Google Maps a través del tag script. En su última versión (3), la dirección es:

    https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

A continuación, es necesario asignar un contenedor (div) a nuestro mapa. Dicho elemento debe contar, simplemente, con un height y un width definidos por nosotros, dejando el resto en manos de la API de Google Maps.

El siguiente paso, es definir la ubicación del mismo, algo que, como cabría suponer, se establece a partir de una determinada latitud y longitud. En nuestro caso particular, esto abrió un pequeño rompecabezas que, para ser honestos, no fue tan sencillo de resolver. El por qué, se debe al hecho de que, inicialmente, habíamos especificado un par de coordenadas fijas, con la finalidad de que el mapa apuntara a Norteamérica. Es bueno hacer un paréntesis aquí, señalando que, hasta este momento, los markers que necesitábamos mostrar en el mapa eran, en su totalidad, pertenecientes al hemisferio norte. Sin embargo, a poco de avanzar con la implementación, se sumó el requisito de poder contar, también, con markers situados en América del Sur.

Esto, como imaginarán, implicaba volver a cambiar el par de coordenadas que, previamente, habíamos definido para nuestro mapa. Algo poco práctico y, sobre todo, ineficiente, considerando que, tal vez, en un futuro, pudiera requerirse un cambio de un impacto aún mayor, como, por ejemplo, mostrar markers de otro continente.

Ante semejante panorama, nos vimos obligados a pensar en una solución más elegante o, al menos, efectiva. La respuesta a lo que buscábamos llegó a través de algo mágico llamado fitbounds.

Fitbounds es un método de Google Maps que, básicamente, nos permite posicionar un mapa y establecer su nivel de zoom tomando como referencia los markers que contiene. De esta manera, evitamos tener que asignarle un par de coordenadas fijas y, al mismo tiempo, nos aseguramos que todos los puntos que deben mostrarse lo harán.

Hablando de markers, es importante señalar que, esencialmente, son localizaciones (con su correspondiente latitud y longitud) representadas por un ícono o pin, y que, en cuyo interior, pueden contener una descripción como, por ejemplo, un texto o enlace web.

En nuestro proyecto, la información que recibíamos para poder crear estos markers provenía de Sitecore. Por esta razón, debimos implementar un método que nos facilitara y, mejor aún, agilizara el transporte de los datos. No obstante, esto mismo podría hacerse desde un simple JSON ya que, para la construcción de un marker, se requiere tan sólo un par de coordenadas.

Un último requisito que, posteriormente, se sumó a nuestro proyecto, fue el de tener la posibilidad de mostrar y ocultar determinados tipos de markers -agrupados a través de especialidades-. Para solucionar esto, debimos implementar un método que nos permitiera filtrar la lista según la opción seleccionada, estableciendo como null aquellos puntos a ignorar.

A lo largo de estas líneas, hemos intentando reunir algunos de los conceptos más importantes que formaron parte de nuestra experiencia con Google Maps. Esperemos que hayan disfrutado del viaje y, ahora, con un poco de suerte (o un teléfono con GPS), no pierdan el rumbo.

Leer más...