Cómo insertar un widget de mapa en cualquier web

Empieza en el generador (el único trabajo real)

Todo empieza en el generador de mapas insertables. La geocodificación ocurre una sola vez, ahí — el fragmento que copias lleva coordenadas fijas, así que una caída del geocodificador o una «normalización de la dirección» nunca podrán mover tu pin después. Escribe la dirección, mira dónde cae el pin y arrástralo hasta tu entrada real antes de copiar: esos diez segundos de arrastre son la diferencia entre «la calle correcta» y «la puerta correcta».

¿Quieres ver una configuración multisede ya terminada antes de crear la tuya? Abre la demo del generador — carga una empresa de ejemplo con tres sedes, con direcciones, pines numerados de colores y el panel de ubicaciones en vivo dentro de la vista previa, listo para trastear.

WordPress: ¿shortcode del plugin o iframe puro?

Las dos rutas terminan en el mismo widget — elige según tu gusto.

Ruta del plugin (recomendada): descarga whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Añadir nuevo ▸ Subir plugin → Activar. Después añade un bloque Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Los atributos se leen igual que las opciones del generador: theme, marker, zoom, height, directions, y para las sedes pins="lat,lng,Label~Address|…" con panel= y motion= (mira la tabla de referencia más abajo). La sección de WordPress del generador crea el shortcode completo por ti — no hay que escribir nada.

Ruta sin plugin: pega el iframe del generador en un bloque HTML personalizado. El mismo widget, sin plugin que actualizar; a cambio, tu contenido lleva más marcado y luego no podrás editarlo por atributos.

Squarespace, Shopify, Notion — y el resto

Fuera de WordPress el trabajo suele ser un solo pegado: añade el elemento HTML o de inserción de tu plataforma (Wix Embed HTML, bloque Code de Squarespace, Embed de Webflow) y coloca ahí el iframe. Hay una diferencia que hace el widget de mapa más fácil que el widget de ubicación: no necesita el atributo allow="geolocation", porque nunca le pide nada a quien visita tu web. Así que no hay nada frágil que conservar cuando un maquetador reescribe tu HTML.

Squarespace: añade un bloque Code y pega. Un detalle que conviene saber de entrada: los bloques Code requieren el plan Business o superior — en el plan Personal el bloque muestra tu código como texto plano en lugar de renderizarlo.

Shopify merece algo mejor que un pegado: ofrecemos una sección de tema lista para usar — un archivo en tu tema te da un panel de ajustes nativo con las sedes como bloques que se reordenan arrastrando, sin app y sin clave de API.

Notion y Google Sites insertan por URL, no por HTML. No aceptan un fragmento iframe — en su lugar, pulsa Copiar URL del widget en el generador y pégala en el bloque /embed de Notion o en Insertar ▸ Por URL de Google Sites. El widget es una página independiente completa, así que se ve perfecto de las dos maneras.

Salesforce Experience Cloud (sitios de comunidad públicos): coloca el iframe en un componente HTML Editor — después pide a tu administrador que añada whatismylocation.ai en Configuración ▸ Trusted URLs con la directiva CSP frame-src, o Salesforce bloqueará el marco en silencio. Quien trabaje con código puede envolver esa misma URL en un Lightning Web Component de unas 10 líneas:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Varias sedes: el panel de ubicaciones

Caben hasta 10 ubicaciones en un mismo widget. En el modo Avanzado del generador, coloca cada pin, dale una etiqueta y una dirección, y pulsa Añadir ubicación. Quien visita tu web ve un panel de ubicaciones — un acordeón junto al mapa en escritorio, una tira de tarjetas deslizable en el móvil — con pines numerados: al elegir una sede, el mapa vuela hasta ella y muestra su dirección con su propio enlace de Cómo llegar.

• panel= elige la disposición: auto (por defecto — al lado en iframes anchos, tira en los estrechos), side, bottom o none para pines simples con ventanas emergentes.
• motion= define la animación al cambiar de sede: smooth (el vuelo por defecto), fade, lively o none. Quien tenga activado «reducir movimiento» en su sistema verá siempre la versión instantánea, elijas lo que elijas.
• open=no arranca con todas las entradas plegadas; el mapa se ajusta solo a todas las sedes y tu zoom pasa a ser el máximo.

Referencia de opciones

Solución de problemas en WordPress

El shortcode aparece como texto literal en la página. Ese bloque no procesa shortcodes. En el editor de bloques usa un bloque Shortcode (no uno de código ni preformateado); en Elementor usa su widget Shortcode, en Divi un módulo Code. Con el editor clásico: escríbelo en la pestaña Visual como texto normal.

No aparece nada. Mira el código fuente de la página y busca whatismylocation. Un comentario HTML sobre lat/lng ausentes significa que faltan las coordenadas o no son válidas — copia el shortcode completo desde el generador en lugar de escribir los atributos a mano.

El iframe desaparece al guardar (ruta sin plugin). WordPress elimina los iframes en los roles de usuario que no tienen la capacidad unfiltered_html — en multisitio eso incluye a los administradores por defecto — y algunos plugins de seguridad hacen lo mismo. El shortcode del plugin es la solución limpia: no depende de que tu rol pueda guardar iframes en bruto.

El mapa está gris o las teselas no cargan. Las teselas vienen de tile.openstreetmap.org; un bloqueador de anuncios muy agresivo o una red corporativa pueden bloquearlas (la tarjeta superpuesta sí se ve). Compruébalo en otra red o en un móvil con datos.

No aparece el panel de ubicaciones. El panel aparece a partir de 2 pines — una sola ubicación muestra la tarjeta superpuesta clásica. Comprueba también que no esté puesto panel="none".

La animación al cambiar no se reproduce. Casi siempre es el ajuste «reducir movimiento» del sistema operativo de quien visita la web (o del tuyo). El widget lo respeta a propósito y cambia al instante. No es un fallo, y el resto de visitantes sigue viendo el preajuste que elegiste.

Los cambios no se ven. Un plugin de caché (o la caché de tu alojamiento) está sirviendo la página antigua. Vacía la caché de la página después de editar los atributos del shortcode — el widget en sí no tiene nada que cachear.