Bloques de mapa: muestra una ubicación sin ocultar la dirección

Un bloque de mapa ayuda al visitante a entender dónde está un lugar real y a pasar de la lectura a la navegación. Su contenido duradero es la dirección verificada en HTML; el mapa visual es una ayuda opcional de orientación. La implementación predeterminada reserva el área del mapa, muestra un respaldo estático liviano y carga un proveedor interactivo aprobado solo después de que el visitante lo solicite.

National Gallery
Trafalgar Square, London WC2N 5DN, United Kingdom
Mapa no cargado. Abre la ubicación en tu aplicación de mapas, o activa Cargar mapa interactivo cuando necesites inspeccionar las calles circundantes.

Esta fachada renderizada es útil antes de cualquier solicitud a terceros. Nombra el lugar, expone la dirección como texto seleccionable, explica el estado no cargado y proporciona dos rutas claras: abrir un mapa externo o cargar deliberadamente el mapa incrustado.

Por qué este elemento es importante

Las preguntas sobre ubicación son prácticas. Un visitante puede estar decidiendo si una sucursal está lo suficientemente cerca, verificando de qué lado de una vía de tren se encuentra, encontrando la entrada correcta o comparando el transporte público con el estacionamiento. Un mapa reduce el trabajo mental de traducir una dirección desconocida a un contexto espacial. Puede hacer que los puntos de referencia cercanos y las relaciones entre calles sean visibles más rápido que un párrafo.

Esa conveniencia no convierte al mapa en la fuente de verdad. Los visitantes pueden copiar una dirección, enviarla a otra persona o leerla con tecnología de asistencia. Los mosaicos del mapa no pueden respaldar esas acciones de manera confiable, y los datos débiles, la configuración de privacidad o una falla del proveedor pueden bloquearlas. La dirección debe seguir siendo útil sin el mapa.

Un mapa incrustado puede agregar un iframe, JavaScript, fuentes, imágenes y solicitudes a terceros. Esos recursos compiten con la respuesta de la página y pueden revelar una dirección IP o iniciar almacenamiento sujeto a consentimiento. Un visitante que nunca usa el mapa no debería pagar ese costo.

La extraibilidad automatizada significa que el software puede identificar el lugar sin interpretar píxeles del mapa ni ejecutar el proveedor. Los rastreadores de búsqueda, los sistemas de IA, los lectores de pantalla, las herramientas de traducción y los pipelines de datos locales necesitan un nombre de lugar, una dirección postal completa, coordenadas cuando corresponda y un enlace de destino estable en HTML o campos estructurados. Una URL de iframe no es una dirección confiable. Las etiquetas del proveedor pueden cambiar y los pines pueden estar ligeramente desplazados. El mismo registro de ubicación verificado debe alimentar la dirección visible, el marcador del mapa, el enlace de navegación y cualquier dato estructurado elegible.

Las reglas de redacción de elementos tienen prioridad: elige un elemento tipificado por su propósito, no por su apariencia. Si el propósito es la orientación espacial alrededor de un lugar verificado, usa un bloque de mapa. Si el propósito es publicar datos de contacto, usa un bloque de horarios y contacto o un bloque NAP y deja que el mapa consuma el mismo registro de dirección. Si el propósito es reservar un horario, usa un bloque de reservas .

Cuándo usarlo

Usa un bloque de mapa cuando ver el lugar en su entorno ayude al lector a completar una tarea dependiente de la ubicación. Los usos típicos incluyen una tienda, oficina, clínica, recinto, punto de recogida, sala de exposición, hotel, atracción, sucursal, entrada de evento o límite de área de servicio. Es especialmente útil cuando la entrada difiere de la dirección postal, las calles cercanas son confusas, las rutas de accesibilidad necesitan explicación o el transporte público y el estacionamiento afectan la visita.

Confirma el marcador contra la entrada real o el punto de servicio en lugar de aceptar el primer resultado de geocodificación del proveedor. Para un lugar dentro de un edificio más grande, indica el piso, la unidad o la entrada en texto.

Los casos límite a menudo crean mapas atractivos pero poco útiles:

• Una lista de ciudades atendidas: esto es una declaración de área de servicio, no prueba de una ubicación física. No coloques pines en centros urbanos dando a entender que hay oficinas.
• Una dirección postal sin acceso de visitantes: publica los datos postales e indica que las visitas no están disponibles. Un mapa implicaría una acción de llegada no compatible.
• Una empresa remota o solo en línea: una oficina registrada puede ser legalmente relevante, pero no se convierte en un destino para el cliente solo porque una incrustación pueda localizarla.
• Instrucciones paso a paso: enlaza a un proveedor de navegación y proporciona notas específicas de la ruta. Un mapa estático incrustado no puede tener en cuenta el tráfico, los cierres ni el punto de partida del visitante.
• Muchas ubicaciones: usa un localizador de ubicaciones con una lista de resultados textual. Una nube de pines no puede reemplazar las páginas individuales de las sucursales.
• Prueba de presencia local: un mapa no es evidencia de que un equipo opere allí. Respalda la afirmación con identidad, dirección, contacto, horarios y contenido específico de la sucursal coherentes.
• Contexto geográfico decorativo: si la ubicación no afecta la tarea, omite el mapa. Un horizonte urbano o un contorno regional pertenecen a otro propósito visual.

Dónde colocarlo

Coloca el mapa inmediatamente después del nombre del lugar, la dirección completa y cualquier calificador crítico para la visita. En una página de ubicación, la secuencia habitual es introducción, datos de dirección y contacto, mapa, notas de llegada, horarios, y luego la acción de visita o reserva. Si las indicaciones son la respuesta principal, resúmelas antes del mapa.

Mantén la dirección, la fachada del mapa, el control de carga, el enlace de respaldo, el título y la nota de indicaciones en una región etiquetada. El visitante no debería necesitar cruzar una sección de testimonios o marketing para encontrar la dirección que pertenece al pin. Un enlace de “Cómo llegar” debe usar las mismas coordenadas o identificador de lugar que el marcador mostrado.

El bloque puede estar cerca de los horarios de apertura de la misma sucursal, pero no junto a una dirección conflictiva, otro mapa, un video con reproducción automática o un anuncio con estilo de control. No lo coloques dentro de un carrusel, acordeón, modal obligatorio, pestaña oculta o celda de tabla estrecha.

No pongas el mapa entre una advertencia y la instrucción que califica, ni entre una acción de reserva y sus requisitos previos. Nunca superpongas texto esencial de dirección, texto de consentimiento o el único enlace de indicaciones sobre los mosaicos del mapa. En móvil, preserva este orden de lectura: nombre del lugar, dirección, calificador de visita, respaldo, control de carga, región del mapa y luego indicaciones.

Anatomía

1. Nombre del lugar: identifica la sucursal, el recinto o el destino representado por el marcador.
2. Dirección textual completa: incluye cada línea de dirección, localidad, código postal y país necesarios para distinguir el lugar.
3. Calificador de visita: indica la entrada, unidad, piso, requisito de cita, restricción de visitante o dato de accesibilidad cuando esto modifica la llegada.
4. Viewport reservado: fija el ancho y la relación de aspecto antes de que se carguen los recursos interactivos, evitando el movimiento del diseño.
5. Respaldo estático: proporciona contexto espacial útil sin scripts; debe ser un activo generado real antes de ser referenciado.
6. Marcador: representa el punto de llegada verificado, no solo un código postal o centroide administrativo.
7. Control de carga: es un botón real con un nombre accesible específico, como “Cargar mapa interactivo para National Gallery”.
8. Aviso del proveedor: nombra al tercero y explica que la activación puede conectarse a él.
9. Enlace de indicaciones: abre un destino HTTPS estable para navegación sin requerir el reproductor incrustado.
10. Título o nota de referencia: explica la conclusión útil del mapa, como la entrada frente a una calle con nombre.
11. Registro de ubicación: proporciona coordenadas gobernadas, identificador de lugar y fecha de verificación al renderizador.
12. Estado de fallo: preserva la dirección, el enlace de indicaciones y la opción de reintento si el proveedor no puede cargar.

Ejemplos de diseño

Cada variante mantiene la dirección en HTML, reserva las dimensiones del mapa y proporciona un enlace directo de indicaciones. Solo cambia el comportamiento de carga.

Mapa estático con indicaciones externas — menor costo

Usa una imagen de mapa optimizada cuando la orientación ayuda pero desplazarse y hacer zoom no son necesarios. El texto alternativo indica su conclusión espacial; el título lleva los puntos de referencia. Publica la ruta solo después de que el activo exista.

Mapa interactivo con carga al hacer clic — predeterminado

Muestra primero un respaldo estático o un panel reservado neutral. Un botón carga el iframe aprobado después de la activación explícita. Esto protege la velocidad de la página y hace intencional la conexión con terceros, manteniendo disponibles la capacidad de desplazamiento, zoom e inspección de calles bajo demanda.

Mapa con puerta de consentimiento

Usa esto cuando la política de privacidad del sitio requiera consentimiento antes de contactar al proveedor. Explica la consecuencia en lenguaje sencillo y ofrece el enlace de indicaciones sin requerir consentimiento. Rechazar no debe ocultar la dirección ni impedir que el resto de la página funcione.

Mapa interactivo siempre cargado — excepción medida

Úsalo solo cuando la interacción sea central, el contacto con el proveedor esté permitido y la medición en campo acepte el costo. La carga diferida aún puede inicializarse a medida que el visitante se acerca. Mantén un respaldo renderizado en el servidor porque loading="lazy" no puede prevenir una falla del proveedor.

Bloque de ubicación única dentro de un localizador

Para una página con múltiples ubicaciones, empareja el mapa seleccionado con una lista de resultados textual. Cargar una sucursal seleccionada mantiene la interacción comprensible; cambiar la selección actualiza el nombre del lugar, la dirección, el marcador y el enlace de indicaciones de forma conjunta. La lista sigue siendo utilizable sin el mapa.

Parámetros

“Fuente” indica dónde obtiene el renderizador el valor creado por el autor. El sistema de ubicación con autoridad sigue siendo responsable de verificar la dirección y las coordenadas reales.

El renderizador debe construir URLs de proveedores a partir de identificadores permitidos y coordenadas numéricas. Los autores no deben pegar HTML arbitrario de iframes, claves de API, tokens de acceso o JavaScript en el cuerpo. Seis decimales localizan un punto con mucha más precisión de la que un visitante normalmente necesita; conserva menos dígitos cuando publicar una entrada privada exacta crearía un riesgo de seguridad o privacidad.

Sintaxis y ejemplos de código

Estos ejemplos portables describen un modelo de contenido canónico. Un proyecto debe implementar y probar el renderizador correspondiente antes de que los autores usen la sintaxis en producción.

Directiva Markdown portable

:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
:::

El primer encabezado proporciona title; la siguiente línea proporciona la dirección estructurada; y el resto del cuerpo proporciona el título o la nota de llegada.

Mapeo de shortcode de Hugo

Usa solo parámetros nombrados. Esta notación documenta el adaptador previsto; no afirma que ya exista un shortcode de mapa en este repositorio.

{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic

18 North Street, Bristol BS1 3PR, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
{{< /map >}}

El adaptador debe reservar la proporción, renderizar la dirección y el respaldo en el servidor, y crear el iframe solo después del activador declarado. Nunca debe exponer una clave de API del proveedor en el contenido creado por el autor.

Bloque de WordPress

<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, United Kingdom</address>
<p>Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.</p>
<!-- /wp:amicited/map -->

Un bloque nativo debe almacenar las coordenadas como números, mantener los campos de dirección estructurados, validar el proveedor y renderizar una fachada segura del lado del servidor. La vista previa del editor puede mostrar una representación estática en lugar de inicializar el proveedor completo.

Ejemplos buenos y malos

Bueno

North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use el patio de entrada junto a la farmacia. Hay acceso sin escalones desde North Street.
Cargar mapa interactivo · Abrir indicaciones en una aplicación de mapas

Esto funciona porque el visitante puede identificar, copiar y navegar al lugar sin la incrustación. La nota de entrada resuelve una ambigüedad real de llegada. Cargar al tercero es una elección, y ambas acciones indican claramente lo que sucede.

Malo

¡Encuéntranos aquí!
[mapa interactivo de ancho completo con un pin sin etiqueta]

Esto falla porque “aquí” no identifica un lugar, la dirección solo existe dentro de los píxeles del proveedor y el pin puede representar un código postal en lugar de una entrada. El mapa cargado con entusiasmo agrega costo incluso para visitantes que no lo usan. No hay respaldo, fecha de verificación, nota de llegada ni enlace de navegación accesible. Agregar una dirección al title del iframe mejoraría la etiqueta del marco pero no crearía texto de página seleccionable.

Marcado de esquema y accesibilidad

Un bloque de mapa no tiene un tipo dedicado de Schema.org. Los campos verificados pueden alimentar el Organization, subtipo de LocalBusiness, Place, PostalAddress o GeoCoordinates correspondientes cuando la página representa esa entidad. Usa un registro de ubicación compartido; la dirección visible, el marcador, la URL canónica de la sucursal y el JSON-LD deben coincidir.

No agregues hasMap únicamente para que la página parezca más completa. Cuando se use, debe apuntar a una URL de mapa estable para el mismo lugar, no a una URL de sesión que caduque o a un endpoint de iframe con una clave expuesta. Una empresa de área de servicio sin una ubicación pública para clientes debe describir su área de servicio honestamente y no debe publicar instalaciones inventadas ni coordenadas privadas excesivamente precisas.

La accesibilidad comienza con la independencia del mapa. Coloca el nombre del lugar y la dirección completa en HTML, usando <address> solo para información de contacto relevante. Proporciona un enlace de indicaciones normal. Describe entradas, puntos de referencia, transporte, estacionamiento y acceso sin escalones en texto. El texto alternativo del mapa estático debe comunicar la conclusión útil, no enumerar cada calle.

El control de carga debe ser un <button> operable por teclado con foco visible y un nombre accesible vinculado al lugar. La carga no debe mover el foco inesperadamente. Después de la activación, anuncia un estado breve como “Mapa interactivo cargado”, luego mantén el foco en el control que lo inició o muévelo solo cuando la interfaz tenga un punto de entrada por teclado documentado. Asigna a cada iframe un título único, por ejemplo “Mapa de calles interactivo para North Street Clinic”.

Los controles del proveedor deben seguir siendo operables en anchos reducidos y al 200% de zoom. No atrapes el foco del teclado dentro del iframe. No dependas del color del pin, gestos de arrastre, hover o etiquetas visuales de calles para información esencial. Si el mapa falla o se rechaza el consentimiento, mantén estable la región reservada y expón la dirección, la nota de llegada, el enlace de indicaciones externo y la acción de reintento.

Reglas de redacción

Comienza con el nombre público oficial del lugar en dos a diez palabras. Continúa con la dirección postal completa tal como está almacenada en el registro de ubicación gobernado. No abrevies una unidad, edificio, localidad o código postal necesarios para llegar a la entrada correcta. Incluye el país cuando la página pueda recibir tráfico internacional o cuando el nombre de la ciudad sea ambiguo.

Agrega una nota de llegada de 8 a 35 palabras solo cuando modifique lo que el visitante debe hacer. Nombra un punto de referencia duradero o una relación de entrada: “Usa el patio de entrada junto a la farmacia” es útil; “No puedes equivocarte” no lo es. Los cierres de calles sensibles al tiempo, las rutas de construcción y las entradas temporales necesitan un responsable y una fecha de revisión en otra parte del sistema de contenido.

Usa un bloque de mapa para un destino seleccionado. Un localizador puede cambiar ese destino, pero cada estado seleccionado debe actualizar atómicamente el título, la dirección, el marcador, el título y el enlace. Muestra un marcador principal por defecto. Los puntos de referencia secundarios pueden aparecer solo cuando explican la llegada y son visualmente distinguibles en texto y controles.

Mantén las etiquetas de control literales: “Cargar mapa interactivo”, “Abrir indicaciones” y “Ver entrada accesible”. Evita etiquetas vagas como “Explorar”, “Ver más” o “Hacer clic aquí”. Indica el proveedor antes de la activación cuando la conexión tenga implicaciones de privacidad.

Nunca coloques números de teléfono, horarios de apertura, afirmaciones promocionales, reseñas, precios, formularios de reserva o políticas extensas de estacionamiento dentro del lienzo interactivo. Esos datos pertenecen al HTML y a sus propios elementos tipificados. Nunca publiques una clave de API, la ubicación en vivo de un usuario, una entrada residencial privada, pines de oficina inventados, áreas de servicio no verificadas o coordenadas copiadas de un geocodificador no verificado. El mapa no debe implicar acceso de visitantes donde no existe.

Verifica la dirección y el marcador en la publicación, después de un cambio de ubicación y durante la revisión programada. Las carreteras y etiquetas del proveedor pueden cambiar de forma independiente; la organización sigue siendo responsable de la exactitud de su registro de ubicación e instrucciones de llegada.

Tipos de página que lo usan

El campo postTypes del frontmatter es la fuente de esta matriz de implementación.

Lista de verificación de QA

• El nombre del lugar y la dirección completa aparecen como texto renderizado en el servidor y seleccionable fuera del mapa.
• El marcador apunta al punto de llegada público verificado, no a un código postal o centroide de edificio.
• La dirección, las coordenadas, el identificador de lugar, el enlace de indicaciones y los datos estructurados provienen del mismo registro gobernado.
• El bloque explica cualquier unidad, piso, entrada, regla de cita o ruta de accesibilidad necesaria para llegar.
• La implementación predeterminada evita solicitudes a terceros hasta la activación explícita o el consentimiento válido.
• Una excepción de carga siempre activa tiene un propósito documentado, base de privacidad y presupuesto de rendimiento medido.
• El ancho y la relación de aspecto se reservan antes de que se cargue la imagen, el iframe o el código del proveedor.
• Cualquier ruta de imagen estática apunta a un activo aprobado real y tiene un texto alternativo útil.
• El control de carga es un botón con un nombre accesible específico del lugar y foco visible.
• El iframe, cuando se crea, tiene un título descriptivo único y no atrapa el foco del teclado.
• La dirección, el enlace de indicaciones, la nota de llegada y la ruta de reintento siguen siendo utilizables cuando fallan los scripts, el consentimiento o el proveedor.
• La información esencial no depende del color del pin, hover, arrastre, zoom o etiquetas del mapa.
• El diseño funciona en anchos reducidos y al 200% de zoom sin cubrir los controles del proveedor.
• La página no afirma tener una oficina pública, entrada o área de servicio que la organización no pueda verificar.
• No aparecen claves de API, tokens de acceso, ubicaciones de usuarios, coordenadas privadas ni URLs de iframe arbitrarias en el contenido creado por el autor.
• Las implementaciones con múltiples ubicaciones mantienen una lista de texto accesible por teclado y sincronizan atómicamente la sucursal seleccionada.
• Schema, si está presente, describe la misma entidad real y dirección mostrada a los visitantes.
• La fecha de verificación y el responsable de la revisión cumplen con la política de mantenimiento de datos locales del sitio.

Un bloque de mapa tiene éxito cuando perder el mapa cambia la conveniencia, no el significado. El lector aún sabe dónde está el lugar, cómo llegar y qué esperar; el proveedor sigue siendo opcional.