domingo, 29 de diciembre de 2013

Insertar mapa de Google Maps.

Una de las utilidades más efectivas y recurrentes es la posibilidad de insertar en nuestro blog o página web una ventana con acceso a los mapas de Google. Dado que Google Maps hoy se ha convertido en una cartografía omnipresente en nuestro día a día, la posibilidad de incrustar esa ventana en cualquiera de nuestros proyectos supone un valor añadido que no hay que despreciar, máxime cuando el proceso apenas lleva minutos y es totalmente gratuito.
Empezamos arrancando la página principal de Google Maps y buscando la ubicación en el mapa y el zoom que nos interese. Como ejemplo para este tutorial he elegido la zona de Móstoles.

Presionamos el botón con la cadenita de enlazar y se nos abre una pequeña ventana en la que ya tenemos el código HTML necesario para insertar en nuestro sitio web. Como veis en la captura, por defecto nos ha generado un mapa de 425x350 pixels de tamaño.



Si estamos de acuerdo simplemente copiamos todo el texto que veis en la ventana resaltada en amarillo y lo insertamos en nuestro sitio web; si queréis personalizar un poco más el mapa pinchamos en Personalizar y obtener vista previa... con lo que se nos abre la siguiente ventana en la que podemos seleccionar el tamaño del mapa en pixels y el tipo de mapa (Mapa, Satélite, Terreno, Tierra) en el que se mostrará por defecto.
Cuando lo tengamos a nuestro gusto simplemente copiamos todo el código HTML que veis resaltado en amarillo y lo pegamos en nuestro sitio web.

En este caso lo pego en una nueva entrada de este blog.









Le doy a publicar y nuestra ventana de Google Maps ya está disponible en nuestro sitio web con todas sus clásicas funcionalidades (zoom, modos de vista...). Además los modos de vista de mapa incluyen la pestaña Tierra, con lo que la ventana que hemos creado ya incluye de paso acceso directo a Google Earth. Más sencillo y efectivo imposible, ¿no os parece?.



En la nueva versión de Google Maps este proceso aún es más sencillo. Encuadramos en pantalla el mapa que nos interese y procedemos del siguiente modo:

1.- Abrimos la ruedecita de opciones.
2.- Seleccionamos Compartir e insertar mapa.
3.- En la nueva ventana pinchamos la pestaña Insertar mapa. La pestaña vecina Compartir enlace nos sirve para conseguir un enlace para nuestro mapa; es lo mismo que si copiamos el enlace de la barra de direcciones del explorador que veis rodeado en verde.
4.- Seleccionamos el tamaño del mapa en pixels: Pequeño (400x300), Mediano (600x450), Grande (800x600) o Personalizado.
5.- Copiamos el código HTML de la ventana resaltada en amarillo y lo pegamos en el lugar donde queramos insertarlo.


No hay comentarios:

Publicar un comentario