Agregar Google Maps a nuestro sitio web

En esta ocasión veremos como agregar a nuestro sitio "Google Maps".

Sin ir más lejos, vamos a comenzar con esto.

1) Vamos a ingresar a google maps desde nuestro navegador https://maps.google.com.ar

Una vez dentro de google maps, ingresamos la ubicación que necesitamos mostrar en el buscador.


2) En este ejemplo vamos a ingresar la dirección del obelisco de la ciudad de Buenos Aires. Luego de que Google Maps detecte la ubicación, iremos al menú de la aplicación tal cual lo muestra la imagen.

3) Dentro del menú elegimos la opción de "Compartir o insertar mapa".

4) Se nos abrirá la siguiente ventana en la cual tenemos la opción de "Compartir enlace" e "Insertar mapa". Tal cual indica la imagen, hacemos click en "Insertar mapa" y copiamos toda la linea de código.

 

5) Teniendo la línea de código con la cual implementaremos google maps, nos queda ir al constructor de sitios. Tal cual indica la imagen, nos tendremos que ubicar sobre la parte de "Avanzado" y arrastrar la opción de "HTML" a la ubicación deseada dentro de nuestro site.

6) Ahora que ya tenemos nuestro código pegado, solo nos queda darle una ubicación y tamaño al mapa dentro de nuestro site. Estos valores claramente deben ser elegidos según lo necesite tu sitio, no es algo general.

Lo haremos de la siguiente manera: 

Modificaremos el código pegado en la parte seleccionada tal cual muestra la imagen. Con width indicaremos el ancho que ocupa el mapa, y con height la altura. Claro está que solo se deben modificar los números entre las comillas. 

Luego de esto, debemos movernos a la siguiente pestaña de "Opciones" para modificar los parámetros de ubicación en pantalla restantes.

Donde dice Tamaño, ubicamos los mismos parámetros que usamos en el código. Donde dice "Posición" nos indica que distancia tendrá desde el margen izquierdo y de la parte superior de la pantalla.

 

7) Una vez hayan realizado todos estos pasos, queda hacer click en "Aplicar" y pueden previsualizar el sitio de la siguiente manera para verificar que el mapa haya quedado de forma correcta:

 

Les aclaro por si acaso, en la imagen final, el mapa tiene las siguientes dimensiones: 

Tamaño:

Ancho -->> 990
Altura -->> 450

Ubicación:

Desde Izquierda -->> 0
Desde Arriba -->> 10

 

Esto sería todo. Ante cualquier duda no duden en consultar nuestras demás guías sobre el constructor o sino contactarnos a soporte@latincloud.com.