Simple Google Maps
Proporciona un formateador de campo que muestra incrustaciones de Google Maps o enlaces desde campos de texto plano con direcciones.
simple_gmap
Install
composer require 'drupal/simple_gmap:^4.0'
composer require 'drupal/simple_gmap:^3.1'
Overview
Simple Google Maps es un módulo ligero que proporciona la forma más sencilla de mostrar un mapa de Google o un enlace a Google Maps desde contenido de direcciones. A diferencia de soluciones de mapeo complejas, no requiere una clave API de Google Maps para mapas dinámicos ni configuración de JavaScript.
El módulo funciona proporcionando un formateador de campo para los campos de texto plano estándar de Drupal. Los usuarios ingresan una dirección en una línea (como "100 Madison Ave, New York, NY") en un campo de texto, y el formateador la convierte en un iframe incrustado de Google Map, una imagen de mapa estático, un enlace a Google Maps, o cualquier combinación de estas opciones.
Este enfoque aprovecha la capacidad nativa de incrustación de iframe de Google Maps, haciéndolo extremadamente simple de configurar y usar. El módulo es ideal para sitios que necesitan funcionalidad básica de dirección a mapa sin la sobrecarga de campos de geocodificación dedicados o APIs de mapeo complejas.
Features
- Formateador de campo que convierte direcciones de texto plano en iframes incrustados de Google Maps
- Visualización opcional de imagen de mapa estático usando Google Maps Static API (requiere clave API)
- Enlace configurable para abrir la ubicación en Google Maps en una nueva ventana
- Visualización del texto de dirección original junto a o en lugar del mapa
- Dimensiones de mapa personalizables (ancho y alto en píxeles o porcentajes)
- Control de nivel de zoom desde 1 (mínimo) hasta 20 (máximo)
- Múltiples tipos de mapa: Mapa, Satélite, Híbrido y Terreno
- Configuración de idioma para la visualización del mapa (código de idioma fijo o idioma automático de la página)
- Soporte para pantallas Retina con opción de escalado 2x para mapas estáticos
- Soporte de accesibilidad con títulos de iframe configurables y texto alternativo para imágenes estáticas
- Opción especial 'use_address' para usar la dirección misma como texto del enlace
- Protección XSS para entrada de texto de direcciones
Use Cases
Visualización de ubicación de negocio
Agrega un campo de texto simple a un tipo de contenido de Negocio donde los editores ingresan la dirección del negocio. Configura el formateador para mostrar un mapa incrustado y el texto de la dirección, permitiendo a los visitantes ver la ubicación visualmente y copiar la dirección.
Mapeo de lugares de eventos
Para tipos de contenido de eventos, agrega un campo de texto de ubicación formateado con Simple Google Maps. Usa la opción de enlace con 'use_address' para permitir a los usuarios hacer clic y acceder a Google Maps para obtener direcciones.
Página de contacto con mapa estático
En una página de contacto, usa la opción de mapa estático para mostrar una imagen de mapa no interactiva. Esto proporciona una visualización limpia sin permitir que los usuarios interactúen con el mapa, y la imagen puede optimizarse para velocidad de carga. Requiere una clave API de Google Maps.
Sitio multiidioma
Configura el ajuste de langcode a 'page' para mostrar automáticamente las etiquetas del mapa en el idioma de la página actual, proporcionando una experiencia consistente para visitantes internacionales.
Mapas optimizados para móvil
Usa anchos basados en porcentajes (ej., 100%) para el mapa para asegurar que escale correctamente en dispositivos móviles. Habilita el escalado retina para mapas estáticos para asegurar una visualización nítida en pantallas de alta resolución.
Directorio de direcciones con enlaces
Para un directorio de ubicaciones, configura el formateador para mostrar solo el enlace sin el mapa incrustado. Esto mantiene el listado compacto mientras proporciona acceso rápido a la página de Google Maps de cada ubicación.
Tips
- Usa 'page' como configuración de langcode para sitios multiidiomas para mostrar automáticamente los mapas en el idioma del visitante
- Ingresa 'use_address' como texto del enlace para usar la dirección real como enlace clicable, lo cual es más significativo para los usuarios
- Agrega texto de ayuda a tu campo de texto explicando el formato esperado para que los editores de contenido sepan ingresar direcciones reconocibles por Google
- La opción de mapa estático crea una imagen no interactiva que carga más rápido y usa menos ancho de banda que los mapas dinámicos
- Para accesibilidad, siempre configura los ajustes iframe_title y alt_text para describir el propósito del mapa
- Prueba las direcciones en maps.google.com primero para asegurar que Google pueda localizarlas correctamente antes de ingresarlas en tu contenido
Technical Details
Hooks 1
hook_theme
Implementa hook_theme() para definir el theme hook 'simple_gmap_output' para renderizar la salida del mapa.
Troubleshooting 5
Los mapas estáticos requieren una clave API de Google Maps válida. Asegúrate de haber obtenido una clave API desde Google Cloud Console con la Static Maps API habilitada, e ingrésala en las configuraciones del formateador cuando 'Include embedded static map' esté marcado.
Asegúrate de que la dirección ingresada en el campo de texto sea un formato que Google Maps pueda reconocer. Prueba buscando la misma dirección en maps.google.com. Usa direcciones completas incluyendo ciudad y estado/país para mejores resultados.
Configura el ajuste 'Title of the iframe for embedded map' en las opciones del formateador. Usa [address] para incluir dinámicamente la dirección en el título.
Verifica el ajuste 'Language' en la configuración del formateador. Establece un código de idioma específico de dos letras (ej., 'en', 'de', 'ja') o usa 'page' para coincidir automáticamente con el idioma de la página actual.
Para mapas dinámicos, las dimensiones pueden estar en píxeles (600px) o porcentajes (100%). Para mapas estáticos, solo se aceptan valores en píxeles y deben ingresarse sin el sufijo 'px' (ej., 600, no 600px).
Security Notes 4
- El módulo sanitiza correctamente la entrada del usuario para prevenir ataques XSS en campos de dirección
- Las claves API para mapas estáticos se almacenan en configuración y se exponen en el código fuente de la página - usa claves API apropiadamente restringidas
- El texto de dirección se codifica para URL antes de enviarse a Google Maps para prevenir ataques de inyección
- Toda la salida usa el sistema de renderizado de Drupal y el auto-escape de Twig para seguridad