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
titleclaro en el iframe, útil para accesibilidad y para lectores de pantalla. - Un contenedor responsivo (con
aspect-ratioo 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
- Maps Embed API: cuándo hace falta una clave y cómo generarla
- Hacer el mapa responsivo: aspect-ratio y el fallback clásico
- Cómo afecta el mapa al rendimiento y a tu SEO local
- Cuándo conviene pasar a la Maps JavaScript API
- Errores frecuentes y cómo resolverlos
- Por qué estas recomendaciones vienen de la experiencia real
- Qué opción elegir según tu objetivo
- Enlaces oficiales y lecturas recomendadas
- Preguntas frecuentes
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.
- Copia el bloque de código que te ofrece Google; ya incluye el atributo
srccon las coordenadas o elplace_iddel lugar. - Revisa los atributos clave:
widthyheight(los sustituirás por CSS),style="border:0", yallowfullscreensi quieres permitir pantalla completa. - 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
.htmlestático, directamente dentro del<body>. - 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 odirectionspara 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
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.
- Incluye el script de carga (
importLibraryo el bootstrap loader) en el<head>de tu página. - Define un
<div>con altura fija en CSS; sin altura, el mapa no se renderiza. - Escribe una función
init()que cree el mapa y añada un marcador simple o unAdvancedMarkerElement. - 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
srcesté 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-ratioo el fallback conpadding-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.
- Consulta el caso de estudio sobre mejora en Google Maps para ver el impacto real en clientes y ventas.
- Revisa el flujo de trabajo completo que usa la agencia para vincular ficha, web y embed.
- Si prefieres feedback directo, puedes solicitar un informe de visibilidad para tu negocio antes de tocar una sola línea de código.
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.
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
- Guía optimizar Google Maps para captar más clientes locales – YellowRock Marketing: Posicionamiento Local TOP 3 en Google
- Workflow para optimizar Google Maps y atraer más clientes – YellowRock Marketing: Posicionamiento Local TOP 3 en Google
- Cómo optimizar fotos en Google Maps para atraer más clientes – YellowRock Marketing: Posicionamiento Local TOP 3 en Google
- Mejorar Google Maps aumenta clientes y ventas locales – YellowRock Marketing: Posicionamiento Local TOP 3 en Google
