Hostinger Creador de Sitios Web: Cómo Agregar un Mapa

Muestra tu ubicación agregando un mapa en tu sitio web

Actualizado hace 2 semanas

Hay dos formas de agregar un mapa a tu sitio web:

Elemento de mapa

Dentro del editor, abre el panel Agregar elementos a la izquierda. Elige el elemento Mapa y arrástralo al lugar deseado en tu sitio web:

Creador de sitios web de Hostinger: menú Agregar elemento con la opción Mapa resaltada

Da clic en el elemento para ver más opciones (editar, duplicar, ocultar, eliminar, cambiar el tamaño):

Hostinger Creador de sitios web: botón Editar mapa sobre un mapa de Google seleccionado

Da clic en Editar mapa e inserta la dirección que deseas mostrar; simplemente puedes copiarla desde Google Maps.

NOTA:


Mis Mapas de Google

Si tienes varias ubicaciones y deseas marcarlas todas en el mapa, puedes hacerlo con My Maps de Google.

1. Crea el mapa

Abre Google My Maps y da clic en Crear un nuevo mapa. Da clic en Mapa sin título para agregar el nombre y la descripción de tu mapa. También puedes elegir la apariencia del mapa haciendo clic en Mapa base:

Google My Maps con la opción Base map resaltada para cambiar el mapa base

En la barra de búsqueda, inserta una dirección y coloca un marcador en el área preferida en el mapa:

Google My Maps: búsqueda de dirección resaltada y marcador verde en el mapa

Da clic en Agregar al mapa:

Google Maps: opción “Add to map” resaltada para añadir un lugar al mapa

De esta forma, puedes marcar más direcciones en el mapa:

Google My Maps: capa “Our offices” resaltada con dos ubicaciones y estilos individuales

Recursos adicionales:

2. Inserta el mapa en tu sitio web

Una vez que hayas creado el mapa, es hora de insertarlo en tu sitio web. El primer paso es hacerlo visible públicamente. Da clic en Compartir:

Google My Maps: botón Compartir resaltado en un mapa personalizado

Habilita las opciones Cualquier persona con el enlace puede ver y Permitir que otros busquen y encuentren este mapa en Internet. Da clic en Compartir en Drive:

Mapa de Google: ventana Compartir mapa con opciones de enlace y búsqueda activadas resaltadas

Finalmente, da clic en Hecho. Ahora es posible obtener un código. Da clic en el botón de opciones en la parte superior de la ventana de configuración y da clic en Incrustar en mi sitio:

Google My Maps con la opción “Embed on my site” resaltada en el menú

Obtendrás el código de tu mapa. Cópialo y pégualo en tu sitio utilizando elelemento incrustar código. Si deseas que el mapa sea más grande o más pequeño, cambia el tamaño del elemento de código o cambia los números de ancho y alto en el código dentro del elemento:

Hostinger Creador de Sitios Web: mapa de Google My Maps incrustado con código iframe resaltado