Mapaprop

Insertar un mapa de Google

Este tutorial le enseña a insertar un mapa interactivo de Google Maps dentro de una página o publicación del blog. Es ideal para mostrar la ubicación de su oficina, un emprendimiento destacado, una zona de cobertura, etc.

El mapa quedará interactivo: el visitante podrá hacer zoom, mover, ver el Street View, etc. — sin salir de su sitio web. También funciona con Bing Maps, OpenStreetMap y cualquier proveedor que ofrezca un código <iframe> para embeber.

Lo que va a lograr

Una página de su sitio que muestra un mapa de Google Maps centrado en la ubicación que elija, con la dirección exacta marcada.

Paso 1 — Genere el código del mapa en Google Maps

  1. Abra Google Maps en su navegador.
  2. Busque la dirección o ubicación que quiere mostrar.
  3. Cuando aparezca el resultado, presione Compartir (suele estar en el panel lateral o debajo de la dirección).
  4. En el diálogo, elija la pestaña "Insertar un mapa" (o "Embed a map" si lo tiene en inglés).
  5. Elija el tamaño del mapa (Pequeño, Mediano, Grande, Personalizado) y copie el código HTML que aparece.

El código tendrá esta forma:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Si Google Maps no le ofrece la opción "Insertar un mapa", puede que esté viendo la versión móvil. Abra Google Maps desde una computadora o use la opción "Ver en versión completa".

Paso 2 — Active el Modo HTML en su página

Desde el editor de una página o publicación:

  1. Vaya a la solapa Edición de contenido.
  2. Ubique el cursor en el lugar donde quiere que aparezca el mapa.
  3. En el toolbar, presione el botón </> (último grupo de íconos).
  4. Confirme la advertencia que aparece.

El editor cambia al modo de código HTML.

Paso 3 — Pegue el código del mapa

Pegue el código <iframe ...> que copió de Google Maps exactamente donde quiere que aparezca el mapa. Por ejemplo, si está después de un párrafo:

<p>Nuestra oficina principal está ubicada en:</p>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

<p>Lo esperamos de lunes a viernes de 9 a 18 hs.</p>

Paso 4 — Ajustar el tamaño (opcional)

Si el mapa queda muy chico o muy grande, modifique los atributos width (ancho) y height (alto) del <iframe>.

ValorSignificado
width="600"Ancho fijo en píxeles
height="450"Alto fijo en píxeles
width="100%"Ocupa todo el ancho disponible (recomendado para móviles)

Recomendación general:

<iframe src="..." width="100%" height="400" style="border:0;"></iframe>

Así el mapa se adapta a cualquier tamaño de pantalla (escritorio, tablet, celular).

Paso 5 — Guarde la página

  1. Presione el botón </> para volver al editor visual (opcional).
  2. Presione Guardar.
  3. Abra su sitio web en una pestaña nueva y verifique que el mapa aparezca y funcione.

Si el mapa no aparece, vuelva al Modo HTML y verifique:

  • Que copió todo el código <iframe> completo (incluido el cierre </iframe>).
  • Que las comillas son rectas (") y no curvas (" ").
  • Que el código del iframe no fue cortado al pegar.

Alternativas a Google Maps

El mismo procedimiento funciona con otros servicios de mapas que provean un código <iframe>:

  • Bing Maps: opción "Compartir > Insertar un mapa".
  • OpenStreetMap: opción "Compartir > HTML" (es gratis y sin necesidad de cuenta).
  • Mapbox: para casos profesionales con mapas personalizados.

Ayudas relacionadas