¿Cómo agregar Google Maps a tu Página Web?

Por isma el 04 May 2020 en Misc
Agregar Google Maps a tu Página Web

Contar con un mapa en tu página web puede ayudarte a hacerle saber a las personas dónde estás ubicado y puedan visitar tu local y comprar en persona o conocer mejor el producto antes de hacer la compra en línea.

Si quieres conocer todas las ventajas  que tiene tener un mapa en tu sitio, visita:  ¿Cómo mejoro mi página de contacto?

Agregar un mapa de Google Maps es bastante fácil de hacer, solo es necesario saber que necesitamos para incorporarlo.

1.- Encuentra la ubicación que quieres compartir en maps

Mapa señalando la ubicación del ángel de la independencia

Nosotros para uso demostrativo utilizaremos el Ángel de la Independencia.

 

2.- Dar clic en compartir

Imagen señalando el boton de compartir en una ubicación de google maps

Una vez hayamos elegido la ubicación a compartir deberemos dar clic en la opción compartir que aparece en el lado izquierdo de la pantalla

3.-Copiar el código necesario

Imagen mostrando los botones para compartir un mapa

Cuando demos clic en compartir nos saldrá una ventana emergente con dos pestañas, deberán seleccionar la que dice "Incorporar un mapa" y después dar clic en "COPIAR HTML"

4.- Incrustarlo en nuestro Sitio Web WordPress.

Esto dependerá de si estamos usando un constructor como Divi, Elemetor, etc. o si utilizamos WordPress sin ningún plugin.

 

Imagen mostrando como cambiar a modo código en WordPress

 

 

Para incrustarlo sin ningún plugin, abre la página o sección que deseas editar y a conitnuación deberemos buscar a la opción "text" para ver el contenido de la página que estamos editamos en HTML, una vez ahí solo deberemos pegar el código que copiaron de Google maps.

Al regresar al modo "Visual" veremos cómo aparece el mapa e inclusive ya podemos interactuar con él, de la misma manera en que podrán ver en la publicación.

Nota: Si se desea cambiar de ubicación deberemos repetir el proceso para conseguir un código nuevo

4.1.- Incrustarlo con constructor externo de WordPress

Si usan Divi, elementor o algún otro plugin para hacer páginas deberán buscar una opción que los deje incrustar código puro.

Por ejemplo, así se vería dentro de Divi:

Ejemplo de cómo incrustar un mapa usando divi

 

5.- Configura como se ve.

Dependiendo en qué lugar de la página lo estemos agregando querremos que ocupe más o menos espacio, para ello deberemos editar 2 partes muy específicas del código que copiamos. son "wight" (Ancho) y "height" (Alto)



Si queremos que ocupe todo el ancho del contenedor les recomendamos poner en ancho 100%.

¡Y listo ya tienen su Google Maps en su sitio web!
Boletín de novedades
* Al suscribirte, creas una cuenta en Pagina.mx y aceptas los términos y condiciones.
Síganos
Buscar