Como integrar tu ubicación con un mapa de Google en tu web

Muchas veces dentro de nuestros diseños web, queremos dejar una ubicación de las oficinas o algún punto de referencía que haga llegar a los posibles clientes a un lugar que deseemos.

Lo usual era hasta hace poco, checar en los mapas de nuestra ciudad y transferir por medio de alguna imagen las calles y las referencias de como llegar al lugar. Ahora con Google, te puede olvidar de esto. Ya que el famoso buscador por medio de su plataforma de mapas, te permite indexar en tu página web, un mapa con la dirección de algún lugar que desees.

Paso 1

El primer paso para indexar estos mapas, es tener bien ubicada el area con ancho y alto (width & height) donde quieras ubicar el mapa.

Paso 2

Ya teniendo el área, nos iremos a esta direccion de google maps

http://maps.google.com/

Paso 3

Ya que estamos dentro del sitio de Google, ubicaremos el pais. En este caso es México y el estado que es el Distrito Federal.

Paso 4

Teniendo el estado ya ubicado, procederemos a buscar nuestra dirección. En este caso tomaremos una direccion de ejemplo. Será el WTC, el cual su dirección es Filadelfia S/N Colonia Nápoles, C.P. 03810, México D.F.

Paso 5

Teniendo ubicada la direccion haremos lo siguiente. En la parte del mapa hay una figura humana de color naranja en la parte superior izquierda. Esta figura la arrastraras a la direccion que hayas buscado en los mapas. Te daras cuenta que puedes arrastrarla cuando la misma se inclina a la derecha cuando poner el puntero sobre ella.

Paso 6

Cuando arrastramos la forma sobre el mapa nos dara mas especificaciones con pequeñas fotos para hacernos la busqueda más facil.

Paso 7

Al momento que dejamos de arrastrar la forma sobre el mapa, y al encontrar la dirección deseada, nos cambiara el mapa de ubicación a imagen.

Paso 8

Ya que tenemos la imágen ahora, sacaremos el link, para ser puesto sobre nuestro web. El link lo encontraremos en la parte superior derecha de nuestro mapa/imagen.

Paso 9

Copiaremos el codigo HTML que se encuentra en la linea inferior.

El Codigo será algo parecido a esto.

Y solo será cuestion de que lo coloquemos en nuestra pagina para que funcione. El ancho y alto del recuadro del mapa podra ser modificado con los 2 valores de width y height que comienzan en el codigo, para así, ajustarlo al area que necesites.

Disfruta de lo que Google nos da con estos recursos.