Personalizar mapas de Google Maps con Drupal 7

En la gran mayoría de páginas Webs en las que encontramos un mapa de Google el diseño es siempre el mismo. No es que el diseño y colores de Google Maps estén mal, porque además es un estándar al que todo el mundo está acostumbrado y es muy claro. Pero nunca está de más desmarcarse un poco de la tónica general y cambiar esos colores a los que estamos tan habituados.

Complejidad

En un primer bicheo por Google parece que realizar estos cambios puede ser un verdadero quebradero de cabeza para la recompensa que nos ofrece. Es fácil decir que no vale la pena hacer estos cambios por esa inversión, pero con una combinación de módulos de Drupal 7 podemos conseguirlo sin escribir una línea de código.

Los módulos implicados

Realmente sólo necesitamos la funcionalidad de un módulo concreto, lo que ocurre es que tendremos que instalar también todos los módulos de los que este depende.

  • Styled Google Map: este es el módulo que buscamos. Gracias a él podremos presentar nuestro mapa con los estilos que nosotros queramos, y para ello utilizaremos un servicio Web que nos generará el código de forma automática mientras nosotros solo elegimos los colores para las carreteras, letreros, etc… Lo veremos más adelante en este artículo.
  • Geofield: los estilos que vamos a aplicar sólo pueden funcionar sobre un campo geolocalizado. Este módulo nos va a permitir meter en tipos de contenido, campos que referencien a un punto del mapa. Dispone de varios métodos de introducción de localizaciones, aunque la que más me gusta es el par Latitud/Longitud.
  • GeoPHP: este módulo no tiene una aplicación directa para el usuario, pero es un medio para que el módulo anterior tenga una forma de manipular los mapas. Es decir, es un requisito del módulo anterior.
  • System stream wrapper: este módulo es otra dependencia para poder usar los anteriores. Su función es crear atajos para que los módulos puedan acceder a recursos de otros módulos o themes de un modo más sencillo y legible.

Funcionamiento

Con estos módulos ya instalados solo tenemos que ir a la gestión de campos de nuestro tipo de contenido y crear un campo de tipo Geofield. El tipo de control a utilizar da varias opciones, pero como ya he dicho anteriormente me quedo con la Latitud y la Longitud. Existen muchos servicios Web que te permiten obtener esos datos simplemente mirando un Google Map. Uno de ellos es este: http://www.coordenadas-gps.com/

En uno de estos servicios escribiremos la dirección deseada y nos mostrará el valor de esas dos variables.

Ahora en las opciones de presentación de nuestro tipo de contenido, le diremos que el formato que deseamos es Styled Google Map:

styled_google_map

Si hacemos click en el engranaje, podremos ver muchas de las opciones que nos va a permitir, aunque la que nos interesa más es MAP STYLE. Aquí nos pide que metamos un código JSON con los detalles del diseño que queremos darle a nuestro mapa. Este código lo vamos a obtener de la Web https://snazzymaps.com/ , que nos va a permitir crear nuestro propio estilo mediante una herramienta o elegir uno de los estilos que los usuarios han creado. Está en inglés, pero podremos cambiar el color y la visibilidad de todo: provincias, carreteras, caminos, mar, puntos de interés, estaciones…

snazzymaps

Después de elegir los colores que más nos gusten, exportamos el código generado y lo pegamos en JSON Style con el tipo de mapa con el valor ROADMAP:

styled_maps

Guardamos y ya estamos preparados para crear un contenido del tipo que contenga el campo recién configurado. Metemos la Latitud y la Longitud, y después de guardar veremos el mapa con los colores deseados:

styled_maps2

Experto en la Gestión de Proyectos Web basados en Drupal con más de 8 años de experiencia. Desarrollo Full Stack (Front-end, Back-end, Site-Builder).

No Replies to "Personalizar mapas de Google Maps con Drupal 7"