Una de las API’s mas atractivas que nos permite el acceso a uno de los mejores servicios en cuanto a geolocalización, es sin duda Google Maps. En este tutorial aprenderemos a desarrollar aplicaciones que se comuniquen con este servicio y exploten sus características como mejor nos parezca. Toda la documentación de la API se encuentra aquí.

Google Maps

Comenzaremos abriendo esta pagina, para darnos de alta como desarrolladores y obtener nuestra API key. Para registrarnos necesitaremos una cuenta de correo de Gmail y aceptar los términos y condiciones del uso de la api, el cual nos explica cuantas veces podremos utilizar el servicio desde la misma IP, y muchas mas cosas de gran interés.

Al aceptar estos términos y condiciones, deberemos ingresar la URL de nuestro sitio, para así obtener el API key. Al haberla obtenido visualizaremos incluso un ejemplo de su uso en mxml.

1.- Descargaremos la librería SWC que incluye todo lo necesario para nuestra aplicación. Dentro de este archivo .rar encontraremos dos carpetas y dentro de lib encontraremos dos swc’s, nosotros utilizaremos map_flex_1_20.

2.- Crearemos un nuevo proyecto web al cual agregaremos este swc.
En la vista de código agregaremos un Panel, el cual contendrá un VGroup que a su vez contendrá un HGroup y un UIComponent. Este HGroup contendrá una Label, un TextInput y un Botón.

3.- A nuestro UIComponent con ID mapaContenedor le agregaremos un evento initialize, el cual se ejecutara cuando la carga de este componente allá sido realizada. Ademas importaremos las librerías necesarias para nuestra aplicación, seguidas de la definición de dos variables; la primera del tipo Map y de nombre mapa, la segunda sera un Array de nombre arreglo.

4.- En nuestra función initialize, inicializaremos nuestra variable mapa, con la cual ademas enviaremos nuestro API key y añadiremos este objeto al DisplayObject para que pueda ser visualizado en la aplicación.

5.- Nuestor UIComponent también tendrá un evento resize, el cual permitirá a nuestro mapa cambiar de tamaño cuando el explorador sea redimencionado por el usuario, de modo que se vea bien.

6.- Nuestra función OnmapaCreado se encargara de definir algunas propiedades a nuestro mapa, como son zoom, latitud y longitud iniciales, ademas de añadir el control zoom a nuestra interfaz.

7.- Crearemos un folder dentro de src al cual llamaremos data, el cual ademas contendrá un archivo XML. Este archivo contendrá la localización de ciertos lugares de interés; su estructura sera la siguiente:

Descargar archivo XML.

8.- En nuestra funcion obtenerMarcadores cargaremos este archivo XML y ademas tendremos un evento COMPLETE, el cual ejecutara a su vez nuetsra funcion leerArchivo la cual se encargara de mostrarnos las ubicaciones dentro del XML que se encuentran mas cerca del lugar que estamos buscando. Esto puede ser muy util cuando tenemos varias sucursales a las cuales se pueden dirigir los usuarios, de modo que al buscar su posición actual, puedan ver tambien las sucursales mas cercanas a ellos. En este ejemplo podremos ver que lugar esta mas cerca de la posición que estamos buscando ya sea Activ, Revista Software Guru, Adobe México y mas.

9.- Nuestra función agregarMarcador hará uso de los datos enviados desde leerArchivo y nos ayudara a mostrar en el mapa la información del lugar.

10.- Crearemos una función llamada lugaresCerca que nos muestre los lugares cerca del lugar que hemos buscado, esto haciendo uso de la latitud y longitud obtenidos al realizar la búsqueda, esta función sera ejecutada por otra que haremos mas adelante.

11.- Nuestra ultima función se llamara geoLocalizacion y se encargara de realizar la búsqueda de la dirección o lugar ingresado por el usuario. Para ello ademas ejecutara la función lugaresCerca con la cual obtendremos ademas tres lugares del archivo XML que se encuentran cerca del lugar buscado.

12.- Para terminar esta aplicación, añadiremos los eventos de click y enter a nuestros TextInput y Boton, los cuales ejecutaran esta ultima función de búsqueda.

Cuando ejecutemos la aplicación, nuestro mapa estará localizado sobre Activ, pero al buscar otro lugar nos mostrara ademas los tres sitios agregados en el XML mas cercanos a dicha búsqueda.