lunes, 7 de noviembre de 2011

API Google Maps Javascript - Introducción

En esta entrada me gustaría comenzar a hablar acerca de la API de Google Maps.  Emplearé la versión 3 de esta API en esta y posteriores entradas. En esta entrada daré un código de ejemplo simple en el que cargamos un mapa simple y buscamos direcciones desde un cuadro de texto.

Para comenzar me gustaría dar algunas url de documentación de la API. Yo tan solo ire haciendo pequeños ejemplos, pero podéis encontrar todo con detalle en la documentación de Google.
Con toda está documentación podemos aprender perfectamente a realizar páginas con mapas con todas las  posibilidades que ofrece la API de Google. Si deseamos realizar una aplicación que use estos mapas es importante tener en cuenta los términos de uso.

Voy a comenzar con el código, podemos ver ejemplos como este y otros usos en la url de ejemplos. No me detendré a explicar detenidamente todos los objetos y posibilidades, pues podemos apreciarlo en la documentación. Esto lo haré en futuras entredas, esto es una pequeña introducción para ver las posibilidades. Veamos:

Con este código tendremos una página con una caja de texto un botón y un mapa. Al pulsar el botón moveremos el mapa a la dirección escrita en la caja de texto. En la línea 6 y 7 se encuentra la etiqueta en la que cargamos el javascript de la API de Google Maps. De la línea  8 a la 37 tenemos el script en el que manipularemos el mapa, dejemoslo de momento. A continuación nos centraremos en el código HTML cuyo  cuerpo del documento contiene dos '<div>' uno de ellos contiene la caja de texto y el botón, mientras que el otro lo emplearemos para el mapa. Este último es el denominado con el id "map_canvas". Al cargar la página se lanzará la función y al producirse el evento onclick del botón ejecutaremos la función codDirección.

Ahora centrémonos en el código javascript. Tenemos dos variables globales en nuestro script, estas son geocoder y map. La variable map la utilizaremos para el mapa y geocoder para un objeto de geocoder (geocodificación). En la función inicializar() primeramente instanciamos un objeto Geocoder, a continuación creamos una variable con las opciones para la carga del mapa (zoom y tipo de mapa en este caso). Despues instanciaremos el mapa en el lugar ya indicado y lo último es llamar a la función codDireccion() la cual cargará una dirección en el mapa (ahora veremos). La función codDirección() obtiene la dirección que hemos introducido en la caja de texto, a continuación mandaremos esta dirección al geocoder y este mandara el resultado a la función verDireccion() para que lo procese. Por último la función verDireccion() comprueba el estado de la geolocalización. En caso de que sea 'OK' centraremos el mapa en la posición obtenida por el geolocalizador y lo último sera escribir una marca en esta localización.

Veamos la página finalmente:
Descargar

Continuaré realizando ejemplos de mapas algo más complejos que este. Proximamente además realizaré una entrada con ejemplos de códigos de C con punteros para apreciar cómo funciona lo visto hasta ahora.

No hay comentarios:

Publicar un comentario