ES EN FR
Análisis gratis
  • Home
  • Noticias
  • Cómo incrustar un mapa en tu web de forma rápida y responsiva

Cómo incrustar un mapa en tu web de forma rápida y responsiva

Mano insertando un iframe de mapa en una laptop

Copia el iframe desde Google Maps (Compartir → Insertar mapa) y pégalo en tu HTML. Añade loading="lazy", un atributo title descriptivo y un contenedor con proporción fija, y el mapa funcionará bien en cualquier dispositivo. Este método cubre la gran mayoría de los casos: fichas de contacto, páginas de «cómo llegar» o el pie de página de un sitio corporativo.

Solo necesitas la Maps Embed API cuando quieras controlar el modo del mapa por URL (vista de calle, direcciones, búsqueda) sin depender del botón de compartir. Tres ajustes marcan la diferencia entre un embed correcto y uno que rompe tu diseño:

  • loading="lazy" para que el mapa no cargue hasta que el usuario se acerque a él.
  • Un title claro en el iframe, útil para accesibilidad y para lectores de pantalla.
  • Un contenedor responsivo (con aspect-ratio o su alternativa) para que no se deforme en móvil.

Puntos clave

Un iframe bien configurado con loading="lazy", title descriptivo y contenedor responsivo resuelve la gran mayoría de los casos de incrustación de mapas.

Punto Detalles
Método por defecto Usa el iframe de «Compartir → Insertar mapa» para páginas estáticas de contacto o ubicación.
Clave de API solo si hace falta Recurre a la Maps Embed API cuando necesites Street View, rutas o parámetros dinámicos.
Responsividad primero Envuelve el iframe en un contenedor con aspect-ratio o el fallback de padding-bottom.
Rendimiento medible Añade loading="lazy" para evitar que el mapa cargue antes de que el usuario lo necesite.
Vincula ficha y web Genera el embed desde el place_id del negocio e incluye el NAP en texto visible en la página.

Tabla de contenidos

Paso a paso para conseguir y pegar el iframe de Google Maps

Abre Google Maps, busca el lugar o la ficha de tu negocio y pulsa el botón Compartir. Dentro del menú aparece la pestaña Insertar un mapa, que genera directamente el código <iframe> que necesitas.

  1. Copia el bloque de código que te ofrece Google; ya incluye el atributo src con las coordenadas o el place_id del lugar.
  2. Revisa los atributos clave: width y height (los sustituirás por CSS), style="border:0", y allowfullscreen si quieres permitir pantalla completa.
  3. Pega el iframe donde corresponda según tu plataforma: en WordPress, dentro de un bloque de HTML personalizado; en Webflow, en un elemento embed; en Wix, en el widget de HTML/iframe; y en un archivo .html estático, directamente dentro del <body>.
  4. Sustituye el ancho y alto fijos por las clases o estilos responsivos que verás en la siguiente sección.

Consejo profesional: busca siempre el mapa desde la ficha de tu negocio antes de generar el embed, no desde una búsqueda genérica de dirección. Así el iframe queda vinculado al place_id, lo que refuerza la coherencia entre tu web y tu perfil de Google Maps.

Maps Embed API: cuándo hace falta una clave y cómo generarla

El iframe copiado desde «Compartir» funciona sin ninguna clave, pero tiene límites: no puedes forzar el modo Street View, ni pasar parámetros de ruta o de búsqueda por código. Para eso existe la Maps Embed API, que construye la URL del iframe con parámetros propios.

  • Activa el proyecto en Google Cloud Console y habilita específicamente «Maps Embed API».
  • Genera una clave de API y restríngela por dominio (HTTP referrer) para evitar que otros la reutilicen.
  • Monta la URL con el modo que necesites, por ejemplo .../maps/embed/v1/streetview?key=TU_CLAVE&location=... para vista de calle o directions para rutas.
  • Añade referrerpolicy="no-referrer-when-downgrade" en el iframe, tal como recomienda el quickstart oficial.

Google exige que el proyecto tenga la facturación habilitada, aunque las solicitudes del Embed API no tienen límite de uso y el coste real para un sitio normal suele ser nulo.

Hacer el mapa responsivo: aspect-ratio y el fallback clásico

Mano ajustando el contenedor de un iframe de mapa responsivo

La forma moderna de mantener la proporción del mapa es envolver el iframe en un contenedor con la propiedad CSS aspect-ratio, tal como explica MDN. Un mapa sin esta técnica se estira o se corta en pantallas pequeñas, y eso suele traducirse en barras de desplazamiento horizontales que arruinan la experiencia en móvil.

.mapa-contenedor {
  position: relative;
  width: [100%](https://forsethingvild.medium.com/the-difference-between-width-auto-and-width-100-a58e2ac7832f);
  aspect-ratio: 16 / 9;
}
.mapa-contenedor iframe {
  width: 100%;
  height: [100%](https://blog.jim-nielsen.com/2023/width-and-height-in-css/);
  border: 0;
}

Para navegadores más antiguos que no soporten aspect-ratio, el truco de padding-bottom sigue siendo la alternativa fiable:

Técnica Uso recomendado
aspect-ratio Navegadores actuales; código más corto y legible
padding-bottom + position: absolute Fallback para compatibilidad amplia
Ajuste por breakpoint Cambiar la proporción (por ejemplo de 16:9 a 4:3) en móvil

Si tu sitio usa container queries, puedes ajustar la relación de aspecto según el ancho real del bloque padre en lugar del viewport completo, algo útil en páginas con barras laterales, según describen guías de mapas responsivos. Evita además superponer elementos táctiles justo encima del iframe: el mapa captura gestos de arrastre y puede interferir con el scroll de la página en móvil.

Cómo afecta el mapa al rendimiento y a tu SEO local

Un mapa que carga siempre, sin retraso, penaliza la velocidad de la página y puede aumentar la tasa de rebote. Por eso el atributo loading="lazy" debería considerarse casi obligatorio salvo que el mapa esté ya en la primera pantalla visible, en cuyo caso conviene usar una técnica de click-to-load con una imagen estática como sustituto inicial.

  • Añade siempre title="Mapa de ubicación de [nombre del negocio]" para cumplir con buenas prácticas de accesibilidad.
  • Genera el embed desde la ficha del negocio (con place_id) en lugar de coordenadas sueltas, algo que refuerza el vínculo entre tu web y tu perfil de Google Business.
  • Escribe el nombre, dirección y teléfono (NAP) como texto normal en la misma página, no solo dentro del mapa.

Dato clave: un mapa insertado sin optimizar puede sumar cientos de kilobytes a la carga inicial de la página; retrasar su carga con loading="lazy" evita ese coste hasta que realmente hace falta.

Cuándo conviene pasar a la Maps JavaScript API

El iframe cubre webs informativas, pero si necesitas marcadores dinámicos, agrupación de puntos (clustering), eventos de clic o estilos de mapa personalizados, el iframe se queda corto. Ahí entra la Maps JavaScript API.

  1. Incluye el script de carga (importLibrary o el bootstrap loader) en el <head> de tu página.
  2. Define un <div> con altura fija en CSS; sin altura, el mapa no se renderiza.
  3. Escribe una función init() que cree el mapa y añada un marcador simple o un AdvancedMarkerElement.
  4. Publica la página y verifica en la consola que no haya errores de clave o de cuota.

Errores frecuentes y cómo resolverlos

  • Iframe en blanco: revisa que el src esté completo, que la plataforma no bloquee iframes externos y que la clave de API (si la usas) no tenga restricciones mal configuradas.
  • El mapa rompe el diseño: falta el contenedor responsivo; añade aspect-ratio o el fallback con padding-bottom.
  • La página carga lenta: aplica loading="lazy" o cambia a un patrón de click-to-load si el mapa está muy arriba en la página.
  • Street View o rutas no funcionan: ese modo requiere la Maps Embed API con clave válida, no el iframe básico de «Compartir».

Por qué estas recomendaciones vienen de la experiencia real

Yellowrockmarketing lleva desde 2022 optimizando perfiles de Google Maps para negocios locales, y ese trabajo pasa siempre por revisar cómo se conecta la ficha del negocio con su propia web.

Qué opción elegir según tu objetivo

Para una página de contacto estática, el iframe copiado es suficiente y el más rápido de implementar. Si necesitas Street View, rutas o parámetros dinámicos, usa la Maps Embed API con clave restringida. Reserva la JavaScript API para mapas con lógica propia: marcadores múltiples, filtros o clústeres interactivos.

Muchos negocios locales complican esta decisión buscando la solución «más avanzada» cuando lo que necesitan es simplemente que el mapa cargue rápido y muestre la ubicación correcta. Un buen rendimiento web importa más para la conversión que cualquier función interactiva que el visitante nunca va a usar.

— YellowRock

Enlaces oficiales y lecturas recomendadas

Consulta la documentación de la Maps Embed API y de la Maps JavaScript API para casos avanzados.

Enlaces oficiales y lecturas recomendadas — overview diagram

Preguntas frecuentes

¿Cómo puedo insertar un mapa de Google Maps en mi web?

Abre Google Maps, busca tu ubicación, pulsa Compartir y selecciona Insertar un mapa. Copia el código <iframe> y pégalo en el HTML de tu página.

¿Necesito una clave de API para incrustar un mapa?

No, si usas el iframe generado desde «Compartir». Solo necesitas una clave de la Maps Embed API para modos avanzados como Street View o direcciones por URL.

¿Cómo hago que el mapa se vea bien en el móvil?

Envuelve el iframe en un contenedor CSS con aspect-ratio (o el fallback de padding-bottom) y fija el ancho al 100 % del contenedor padre.

¿Cómo evito que el mapa ralentice la carga de la página?

Añade el atributo loading="lazy" al iframe, o usa una imagen estática con un botón de «cargar mapa» si el bloque aparece muy arriba en la página.

¿Cómo creo un mapa interactivo con marcadores propios?

Necesitas la Maps JavaScript API: define un <div> con altura en CSS, carga la librería y escribe una función init() que añada tus marcadores.

Recomendación

Share this post

Subscribe to our newsletter

Keep up with the latest blog posts by staying updated. No spamming: we promise.
By clicking Sign Up you’re confirming that you agree with our Terms and Conditions.

Related posts