Cómo añadir Google Maps a un sitio web de Turbosite

Google Maps es el estándar mundial de cartografía. Es ideal para sitios web con una audiencia internacional o para el sector turístico. La forma más sencilla es insertar un mapa mediante un iframe directamente desde la interfaz de Google Maps, sin necesidad de una clave API. Es gratuito y la instalación toma 5 minutos.

Qué necesitarás

• Una cuenta de Google (no es obligatoria para el iframe básico) — registro
• Un sitio web publicado en Turbosite
• 5 minutos

Paso 1. Obtener el código del mapa

1. Abre google.com/maps.
2. Busca la dirección u organización deseada en el buscador.
3. En la tarjeta del lugar, haz clic en el botón «Compartir» (icono con una flecha).
4. En la ventana que aparece, selecciona la pestaña «Insertar un mapa» (Embed a map).
5. Elige el tamaño del mapa: pequeño, mediano, grande o personalizado.
6. Copia el código iframe generado.

📷 Captura de pantalla: ventana «Insertar un mapa» en Google Maps con el código iframe y las opciones de tamaño.

Paso 2. Insertar el código en Turbosite

El mapa aparece en un lugar específico de la página (normalmente en el bloque «Contactos»), por lo que el código se inserta en el cuerpo de la página.

1. Abre tu sitio web en Turbosite.
2. Añade un bloque de «Código HTML» en el lugar deseado de la página.
3. Pega el iframe de Google Maps que copiaste.
4. Guarda los cambios.
5. Publica el sitio web.

📷 [captura de pantalla de Turbosite — se añadirá: bloque de código HTML en el cuerpo de la página con el mapa de Google].

Paso 3. Verificar que el mapa funcione

1. Abre el sitio web publicado.
2. Desplázate hasta el bloque del mapa; debería cargarse en 1 o 2 segundos.
3. Comprueba la interactividad: haz clic en el marcador, intenta hacer zoom y leer la tarjeta del lugar.
4. Ábrelo en un dispositivo móvil: el mapa debería adaptarse.

Preguntas frecuentes

El mapa se corta en móviles o no ocupa todo el ancho. En el iframe, elimina los valores fijos width="600" y height="450" y envuelve el iframe en un <div> con una clase CSS para la adaptabilidad:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="tu_src" 
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
          frameborder="0" allowfullscreen>
  </iframe>
</div>

¿Se necesita una clave API? Para el iframe básico del menú «Compartir», no. La clave API solo es necesaria si utilizas Google Maps Embed API directamente o la API de JavaScript para personalizaciones (marcadores propios, rutas, estilos).

¿Se puede añadir un marcador o ruta propia? Mediante iframe, solo lo que está disponible en Google Maps. Para tus propios marcadores, crea un mapa en Google My Maps y luego obtén el iframe desde allí.

Tarifas de Google Maps Platform. Desde 2025, Google Maps Platform cambió su facturación: en lugar de un crédito gratuito general, hay límites mensuales individuales para cada producto. El iframe básico de Embed funciona de forma gratuita y sin restricciones. Si utilizas la API de JavaScript, verifica los límites en Cloud Console.

El mapa está en ruso y lo necesito en español. Google determina automáticamente el idioma según la configuración regional del navegador. Para fijar el idioma, añade el parámetro &hl=es (o el código del idioma correspondiente) a la URL del iframe.

Qué ver a continuación

• Google Maps Platform Documentation — documentación oficial
• Google My Maps — creación de mapas propios con marcadores
• Precios de Google Maps Platform — tarifas actuales