Styled Google Map
Un formateador de Geofield que muestra ubicaciones geográficas en Google Maps personalizables y estilizados, con amplias opciones de configuración para apariencia, ventanas emergentes, agrupación y direcciones.
styled_google_map
Instalar
composer require 'drupal/styled_google_map:8.x-2.7'
Overview
El módulo Styled Google Map proporciona un potente formateador de campo para Geofield que renderiza coordenadas geográficas en Google Maps visualmente personalizables. El módulo permite a los constructores de sitios mostrar datos de ubicación con estilos de mapa personalizados (compatible con estilos JSON de Snazzy Maps), marcadores de pin personalizados y ventanas emergentes con múltiples funcionalidades utilizando la biblioteca InfoBubble.
Las capacidades principales incluyen estilización completa del mapa con personalización visual basada en JSON, ventanas emergentes configurables que pueden mostrar contenido de campos o modos de visualización completos, múltiples tipos de mapa (Roadmap, Satellite, Hybrid, Terrain) y control total sobre la configuración de interacción del mapa como el manejo de gestos, niveles de zoom y controles del mapa.
Para la integración con Views, el módulo proporciona un plugin de estilo que permite mostrar múltiples ubicaciones en un solo mapa con características como agrupación de marcadores usando MarkerClusterer, manejo de marcadores superpuestos con Spiderfier, visualización de mapa de calor y controles de mapa personalizados. El módulo también soporta funcionalidad de direcciones, permitiendo a los usuarios calcular rutas desde su ubicación o una dirección especificada hasta los marcadores del mapa.
Features
- Mostrar ubicaciones de Geofield en Google Maps con amplias opciones de personalización para la apariencia y comportamiento del mapa
- Aplicar estilos JSON personalizados de Snazzy Maps u otros generadores de estilos para crear diseños de mapas únicos
- Configurar ventanas emergentes de marcadores con contenido de campos de entidad o modos de visualización completos, con control total de estilos
- Plugin de estilo de Views para mostrar múltiples ubicaciones con agrupación de marcadores y soporte para marcadores superpuestos con spiderfier
- Capa de visualización de mapa de calor para Views para mostrar densidad y patrones de ubicación
- Funcionalidad de direcciones para calcular y mostrar rutas desde la ubicación del usuario o dirección hasta los marcadores del mapa
- Manejador de área de Views personalizado para colocar controles HTML en varias posiciones del mapa
- Soporte para imágenes de marcador de pin personalizadas con dimensiones de escalado opcionales
- Múltiples métodos de autenticación: Clave de API de Google Maps o ID de Cliente de Google Maps API for Work
- Opciones de manejo de gestos para controlar la interacción del mapa en dispositivos de escritorio y móviles
Use Cases
Listados de propiedades con mapas de ubicación
Mostrar propiedades inmobiliarias en un mapa estilizado. Crear un tipo de contenido de propiedad con un Geofield para ubicación y un campo de imagen para la foto de la propiedad. Configurar la visualización del Geofield para usar el formateador Styled Google Map con ventana emergente mostrando detalles de la propiedad. Usar marcadores de pin personalizados y estilos JSON que coincidan con la marca de tu sitio.
Localizador de tiendas con direcciones
Construir una página de localizador de tiendas usando Views con el plugin de estilo Styled Google Map. Habilitar la función de direcciones para que los visitantes puedan obtener direcciones de conducción, caminata o transporte público desde su ubicación hasta cualquier tienda. Configurar agrupación de marcadores para áreas con muchas ubicaciones.
Mapa de calor de lugares de eventos
Visualizar patrones de asistencia a eventos usando la función de mapa de calor. Crear una vista de ubicaciones de eventos con el estilo Styled Google Map, habilitar la capa de mapa de calor y usar un campo de conteo de asistencia como fuente de peso para mostrar áreas populares con mayor intensidad.
Visualización de ubicaciones multi-categoría
Mostrar ubicaciones de diferentes categorías con marcadores distintivos. Usar el campo de fuente de categoría para agregar clases CSS a las ventanas emergentes para estilizar por categoría. Usar diferentes imágenes de pin para cada tipo de ubicación referenciando un campo de imagen como fuente de pin.
Mapa interactivo con controles personalizados
Crear una vista de mapa interactivo con controles de filtrado personalizados. Agregar el manejador de área Google Map Control para colocar botones, cuadros de búsqueda o contenido de leyenda directamente en el mapa en posiciones configurables como TOP_LEFT o BOTTOM_CENTER.
Tips
- Usar Snazzy Maps (https://snazzymaps.com/) para encontrar y personalizar estilos JSON para tus mapas. Copiar el JSON de estilo directamente en el formateador o configuración de estilo de Views.
- Para mejor experiencia móvil, establecer el manejo de gestos en 'cooperative' para prevenir interacciones accidentales con el mapa al desplazarse por la página.
- Cuando se muestran muchos marcadores, habilitar la agrupación para mejorar el rendimiento y la experiencia del usuario. Configurar la imagen del cluster y la configuración de texto para que coincida con el diseño de tu sitio.
- Usar la función spiderfier cuando los marcadores puedan superponerse para permitir a los usuarios hacer clic y expandir los pines agrupados.
- Sobrescribir las plantillas de tema (styled-google-map.html.twig) en tu tema para personalizar la estructura del contenedor del mapa.
- El módulo almacena objetos de mapa inicializados en drupalSettings.initialized_styles_google_maps para interacción JavaScript con mapas después de cargar la página.
- Para Views, agregar el manejador de área Google Map Control para colocar leyendas, botones de filtro u otros elementos interactivos directamente en el mapa.
Technical Details
Admin Pages 1
/admin/config/services/styled_google_map
Configurar el método de autenticación de la API de Google Maps y las bibliotecas adicionales a cargar con el mapa.
Hooks 1
hook_styled_google_map_views_style_alter
Permite a otros módulos modificar la configuración del mapa y las ubicaciones de marcadores cuando se usa el plugin de estilo de Views de Styled Google Map. Puede modificar configuraciones del mapa, propiedades de marcadores y usar el contexto de la vista para cambios condicionales.
Troubleshooting 6
Verificar que una clave de API válida de Google Maps esté configurada en /admin/config/services/styled_google_map. Verificar que la clave de API tenga la API JavaScript de Google Maps habilitada en Google Cloud Console. Revisar la consola del navegador para mensajes de error de API.
Verificar que la sintaxis del estilo JSON sea válida. Usar validadores de JSON en línea o el formato de Snazzy Maps. JSON vacío o mal formado causará que los estilos fallen silenciosamente.
Asegurarse de que la URL de la imagen del pin sea accesible y la ruta sea correcta. El módulo soporta stream wrappers (ej., module://styled_google_map/pin.png) pero las URLs de archivos deben ser resolubles. Revisar la pestaña de red del navegador para errores 404 en solicitudes de imágenes.
La geolocalización requiere HTTPS. La opción de ubicación actual se oculta automáticamente cuando la página no se sirve sobre HTTPS. Asegurarse de que tu sitio use SSL.
Verificar que la configuración cluster_enabled esté marcada en la configuración de estilo de Views. Asegurarse de que haya suficientes marcadores dentro de la proximidad para formar clusters (controlado por la configuración min_size, predeterminado es 2).
Desde junio de 2016, Google requiere claves de API para acceso a la API JavaScript de Maps. Configurar una clave de API o ID de Cliente en /admin/config/services/styled_google_map para eliminar la advertencia y asegurar que los mapas se rendericen correctamente.
Security Notes 3
- Proteger tu clave de API de Google Maps configurando restricciones de referente HTTP en Google Cloud Console para permitir solo tu dominio.
- Si se usa la función de ventana emergente con contenido enviado por usuarios, tener en cuenta que el HTML de la ventana emergente se renderiza a través del sistema de renderizado de Drupal que proporciona protección XSS.
- El módulo sanitiza la configuración de estilos y los valores de posición de controles usando Xss::filter() para prevenir inyección de scripts.