Saltar al contenido
Hacer mapas

Insertar Google Maps en tu web

Busca la dirección, elige el tipo de mapa, el zoom y el tamaño, y copia el código para pegarlo en tu web. Sin clave, con tu clave de Google o con OpenStreetMap.

Lugar o dirección

Ejemplo 40.416780, -3.703790 · También puedes escribir unas coordenadas: «40.4168, -3.7038».

Cómo lo insertas

La más usada y la más sencilla: no pide cuenta ni clave. No es la forma oficial: esa URL no está en la documentación de Google, así que funciona hoy pero puede cambiar sin aviso.

Qué busca el mapa

Con la dirección, Google enseña la ficha del sitio. Con las coordenadas, la chincheta va en el punto exacto.

Tipo de mapa

15 · Más o menos: 1, el mundo; 5, un continente; 10, una ciudad; 15, las calles; 20, los edificios.

Tamaño

Ocupa todo el ancho de su hueco y mantiene la proporción: se ve bien en el móvil.

Más opciones

El mapa no se carga hasta que el visitante llega a él: la página abre antes.

Lo leen los lectores de pantalla: di qué enseña el mapa.

Qué parte de la dirección de tu página recibe el servicio del mapa.

Código para pegar en tu web

<iframe
  src="https://maps.google.com/maps?q=Puerta+del+Sol%2C+Madrid&t=m&z=15&output=embed"
  style="border:0;width:100%;height:auto;aspect-ratio:4/3"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Mapa de Puerta del Sol, Madrid">
</iframe>

Vista previa

Al pulsar, tu navegador carga el mapa desde los servidores de Google, que reciben tu dirección IP y pueden guardar cookies. Por eso no se carga solo.

100 % × 4:3

Siguiente paso

Más herramientas para hacer tu mapa.

Mapa con chinchetasUn mapa con muchos puntos, para descargar o compartir. Dirección a coordenadasLas coordenadas de una dirección, o de muchas. Dibujar en el mapaDibuja líneas y zonas y llévatelas en KML o GeoJSON.

Cómo se usa

  1. Busca el sitio

    Escribe la dirección o el nombre del sitio, o unas coordenadas. Elige si el mapa busca la dirección (con la ficha de Google) o pone la chincheta en el punto exacto.

  2. Elige cómo se ve

    Callejero o satélite, el zoom y el tamaño: fijo, en píxeles, o adaptable, que ocupa todo el ancho y mantiene la proporción en el móvil.

  3. Copia y pega

    Pulsa «Copiar el código» y pégalo en tu web, en un bloque de HTML. Si quieres ver cómo queda antes, pulsa «Mostrar la vista previa».

Tres formas de insertar el mapa

  • Google, sin clave

    Con la dirección https://maps.google.com/maps?q=…&output=embed. Es la más usada porque no pide nada, pero no es la oficial: no está en la documentación de Google y puede dejar de funcionar sin aviso. La forma oficial sin clave es el botón «Compartir › Insertar un mapa» de Google Maps.

  • Google, con tu clave

    La Maps Embed API, la forma oficial. Google la da gratis y sin límite de cargas, y no hace falta saber programar: solo una clave. Para sacarla hay que crear un proyecto en Google Cloud con la facturación activada.

  • OpenStreetMap, sin Google

    El mapa incrustado de openstreetmap.org, con datos libres y sin cuenta. No tiene satélite ni fichas de los sitios, y la Fundación OpenStreetMap lo ofrece sin garantías: si tu web tiene mucho tráfico, mejor un servicio de mapas propio o de pago.

Qué hace la herramienta

Monta la dirección del mapa con lo que eliges y la mete en un <iframe>, la etiqueta de HTML que sirve para enseñar una página dentro de otra. El código lleva siempre un title (para los lectores de pantalla), el estilo sin borde y, si lo dejas marcado, loading="lazy", para que el mapa no frene la carga de tu página.

En el tamaño adaptable, el iframe ocupa el 100 % del ancho y su alto sale de la proporción (aspect-ratio en CSS), así que no se corta ni deja huecos en el móvil. En OpenStreetMap, el zoom se convierte en el recuadro que pide su mapa (bbox), calculado para ese tamaño.

Todo se hace en tu navegador: Mapsfera no recibe tu clave ni lo que buscas. El buscador de direcciones usa CartoCiudad y Photon, y la vista previa solo se carga si la pides.

Cómo sacar una clave gratis y restringirla

La clave de la Maps Embed API es gratis y Google no cobra por las cargas del mapa, pero te pedirá una tarjeta para activar la facturación del proyecto. Los pasos, según la documentación de Google:

  1. Entra en la consola de Google Cloud con tu cuenta de Google, crea un proyecto y activa en él la facturación.
  2. Activa la API «Maps Embed API» en ese proyecto.
  3. En Google Maps Platform, en «Claves y credenciales», crea una clave de API.
  4. Restringe la clave a la Maps Embed API (restricción de API) y a tu web (restricción de aplicación por sitios web), con tu dominio, por ejemplo https://www.tuweb.com/*.
  5. Pega la clave aquí, en «Google, con tu clave», y copia el código.

La clave va a la vista en el código de tu página: cualquiera puede leerla. Por eso hay que restringirla a tu dominio. Google avisa de que respondes de lo que se cobre si alguien abusa de una clave sin restringir.

Cómo pegarlo en WordPress, Wix, Squarespace o Shopify

En casi todas las plataformas hay un bloque o un elemento para pegar HTML. Los pasos generales, según la ayuda de cada una:

WordPress

En el editor de bloques, añade un bloque «HTML personalizado» y pega el código. En WordPress.com, según tu plan, el editor puede quitar los iframe: si desaparece al guardar, mira qué permite tu plan.

Ayuda de WordPress.com: bloque HTML personalizado

Wix

En el editor, añade el elemento para insertar código («Insertar HTML» o «Embed HTML», en el apartado de insertar código), pulsa «Introducir código», pega el código y ajusta el tamaño del elemento.

Ayuda de Wix: insertar un sitio o un widget

Squarespace

Añade un bloque de código («Code»), elige el modo HTML y pega el código. Algunos planes no permiten iframes en el bloque de código: si no se ve, revisa tu plan.

Ayuda de Squarespace: bloques de código

Shopify

En el editor del tema, añade una sección «Liquid personalizado» (Custom Liquid) y pega el código. En una página, también vale el botón «Mostrar HTML» (<>) del editor de contenido.

Ayuda de Shopify: páginas de la tienda

Cookies y consentimiento

Cuando una página carga un mapa de Google, el navegador de cada visitante se conecta a los servidores de Google, que reciben su dirección IP y pueden guardar cookies. Con OpenStreetMap, el navegador se conecta a openstreetmap.org, que también recibe la IP.

En la Unión Europea, la directiva ePrivacy y el RGPD hacen que muchas autoridades de protección de datos consideren que una web debe pedir el consentimiento de sus visitantes antes de cargar contenido de terceros que guarda cookies, como un mapa de Google. Por eso muchas webs no cargan el mapa hasta que el visitante acepta las cookies o pulsa un botón, como hace la vista previa de esta página.

Esto es información general, no asesoramiento legal: lo que necesita tu web depende de su caso. Si tienes dudas, consúltalo con quien lleve la parte legal de tu web.

Preguntas frecuentes

¿Es gratis insertar Google Maps en una web?

Sí. La forma sin clave no pide cuenta. La forma oficial, la Maps Embed API, es gratis y sin límite de cargas según Google, aunque para sacar la clave hay que crear un proyecto en Google Cloud con la facturación activada.

¿Por qué la forma sin clave no es la oficial?

Porque esa dirección (maps.google.com/maps?…&output=embed) no aparece en la documentación de Google: funciona y la usan muchas webs, pero Google puede cambiarla o quitarla sin aviso. Las formas oficiales son la Maps Embed API y el botón «Compartir › Insertar un mapa» de Google Maps.

¿Mi clave de Google está segura aquí?

Se queda en tu navegador: Mapsfera no la recibe ni la guarda (solo si marcas «Recordarla», en el almacenamiento de este navegador). Pero en tu web la clave va a la vista en el código, como en cualquier mapa insertado: restríngela a tu dominio y a la Maps Embed API.

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

Elige el tamaño «Adaptable». El mapa ocupará todo el ancho de su hueco y su alto se ajustará a la proporción que elijas (16:9, 4:3 o cuadrado). Con un tamaño fijo, un mapa de 600 px de ancho se sale de la pantalla de muchos móviles.

¿Puedo poner el mapa en vista de satélite?

Sí, con Google: elige «Satélite» en el tipo de mapa. El mapa incrustado de OpenStreetMap no tiene vista de satélite.

¿Para qué sirven loading="lazy" y title?

loading="lazy" le dice al navegador que no cargue el mapa hasta que el visitante llegue a él, así la página abre antes. El title describe el mapa para quien usa un lector de pantalla, que lo anuncia al llegar al iframe.

¿Qué referrerpolicy elijo?

Si no sabes, deja la que viene: para el código sin clave, la que pone Google al compartir (no-referrer-when-downgrade); con clave, la que recomienda su documentación (strict-origin-when-cross-origin). Si restringes la clave a tu web, no uses no-referrer: Google no sabría desde qué web se pide el mapa y lo bloquearía.

¿Por qué la vista previa no se carga sola?

Porque cargar un mapa de Google hace que tu navegador se conecte a Google, que recibe tu IP y puede guardar cookies. Así decides tú si se carga.

Herramientas relacionadas

Todas las herramientas
Mapas para tu web Pon gratis en tu web un widget de radio, de distancia o de mapa mudo pegando un trozo de código. Mapas temáticos Mapas ya hechos de población, edad y renta con datos oficiales, gratis para descargar o incrustar. Póster de mapa personalizado Diseña un póster con el mapa de tu ciudad o de tu ruta, con tus colores y tu texto, y descárgalo gratis. Comparar el tamaño de países Arrastra países por el mapa y compara su tamaño real, sin la deformación de la proyección de Mercator. Visor de GPX Abre un track GPX en el mapa para ver la ruta y su distancia, y pásalo a KML o GeoJSON. Visor de GeoJSON Suelta un fichero GeoJSON para verlo en el mapa, revisar sus elementos y pasarlo a KML o GPX.

Fuentes