Generador de código para insertar Google Maps
Escribe una dirección, el nombre de un negocio o una latitud y longitud, elige el zoom, el tipo de mapa y el tamaño, y copia código iframe listo para pegar en cualquier sitio web. No necesitas clave de API ni cuenta de Google.
Última actualización:
Estilo y atributos
Cómo usar Generador de código para insertar Google Maps
- Introduce la ubicación: una dirección, un nombre de lugar, coordenadas o pega un enlace de Google Maps.
- Ajusta el zoom y el tipo de mapa. De 15 a 17 funciona bien para un solo negocio o local.
- Elige el tamaño: responsive (recomendado) se adapta a cualquier pantalla; tamaño fijo usa píxeles exactos.
- Haz clic en Cargar vista previa para revisar el mapa y luego copia el código HTML.
- Pega el código en el bloque HTML o de inserción de tu creador de sitios web, o en la plantilla de tu página.
Cómo funciona la URL de inserción de Google Maps
El código generado usa la URL de inserción clásica de Google, que no necesita clave de API:
https://maps.google.com/maps?q=Eiffel%20Tower%2C%20Paris&t=m&z=15&ie=UTF8&iwloc=&output=embed| Parámetro | Significado | Valores |
|---|---|---|
q | Qué mostrar: una dirección, un nombre de lugar o lat,lng | Texto codificado para URL |
t | Tipo de mapa | m mapa de calles, k satélite, h híbrido, p relieve |
z | Nivel de zoom | 1 (mundo) a 21 (edificios) |
hl | Idioma de las etiquetas y los controles | Código de idioma, p. ej. en, de, ja |
iwloc= | Se deja vacío para ocultar la burbuja de información grande | (vacío) |
output=embed | Devuelve la versión del mapa que se puede insertar en un marco | obligatorio |
Guía de niveles de zoom
| Zoom | Muestra aproximadamente | Ideal para |
|---|---|---|
| 1–3 | El mundo o un continente | Presencia global, regiones de envío |
| 5–7 | Un país o estado | Áreas de servicio |
| 10–12 | Una ciudad | Zonas de entrega, varias sucursales |
| 13–14 | Un distrito o barrio | Hoteles, eventos, parques |
| 15–17 | Calles y edificios | Tiendas, oficinas, restaurantes (recomendado) |
| 18–21 | Edificios y entradas individuales | Campus grandes, entradas específicas |
Cada paso de zoom duplica la escala: con zoom 15 un píxel de pantalla abarca unos 4.8 m en el ecuador, con zoom 16 unos 2.4 m, y menos en latitudes más altas.
Explicación del código de mapa responsive
Un iframe no tiene una relación de aspecto natural, así que con un alto fijo se ve aplastado en los teléfonos. La opción responsive lo envuelve en una caja cuyo alto es un porcentaje de su ancho (padding-bottom: 56.25% = 9 ÷ 16 para 16:9) y luego estira el iframe para llenar esa caja. El mapa mantiene su forma en cualquier tamaño de pantalla, desde un teléfono de 360 px hasta un escritorio panorámico.
En creadores de páginas como WordPress, Wix o Squarespace, pega el código en un bloque de HTML personalizado o de inserción. Si un creador elimina el atributo style, usa en su lugar la opción Ancho completo, alto fijo.
Preguntas frecuentes
¿Necesito una clave de API de Google Maps para insertar un mapa?
No. La URL de inserción clásica (maps.google.com/maps?q=...&output=embed) que usa esta herramienta funciona sin clave de API ni cuenta de facturación. Solo se necesita una clave de API para la Maps Embed API, la JavaScript API o funciones como estilos personalizados e indicaciones.
¿Cómo hago que un mapa de Google insertado sea responsive?
Envuelve el iframe en un contenedor con position:relative y un padding-bottom igual a la relación de aspecto (56.25% para 16:9), y dale al iframe position:absolute, width:100% y height:100%. La opción Responsive genera exactamente este código.
¿Cómo inserto un mapa de unas coordenadas exactas?
Cambia a Coordenadas e introduce la latitud y la longitud en grados decimales, por ejemplo 40.748817 y -73.985428. La latitud debe estar entre -90 y 90 y la longitud entre -180 y 180. El marcador se coloca exactamente ahí.
¿Qué nivel de zoom debo usar?
El zoom 1 muestra el mundo entero, alrededor de 5 un continente, 10 una ciudad, 15 calles y de 18 a 21 edificios individuales. Para una tienda u oficina, de 15 a 17 muestra el edificio y las calles de alrededor.
¿Por qué mi mapa insertado muestra el lugar equivocado?
Cuando buscas por texto, Google elige la mejor coincidencia para ese texto. Añade la ciudad y el país o el código postal, usa el nombre exacto del negocio tal como aparece en Google Maps o cambia a coordenadas para una ubicación exacta.
¿Un mapa de Google insertado hace más lenta mi página?
Un iframe carga los scripts y mosaicos de mapa de Google, lo que añade peso. El atributo loading="lazy", activado por defecto aquí, retrasa la carga hasta que el visitante se desplaza cerca del mapa.
¿Insertar Google Maps es gratis?
Sí, insertar un mapa con el código de inserción estándar es gratis. Su uso está sujeto a los términos de servicio de Google Maps, que exigen mantener visible en el mapa la atribución de Google.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.