Integrando Google Maps con Flex

Nota: La API de Google Maps sirve tanto para Flash como para Flex, en este tip solo hablaré de la integración con Flex.

Nota: Necesitas registrarte para obtener una llave para tu aplicación, si no tienes actualmente un sitio donde probar tu aplicación, bastara con poner http://localhost donde te piden el dominio que vas a usar.

Nota: Puedes bajar el sdk desde este link http://maps.googleapis.com/maps/flash/release/sdk.zip, la documentación viene dentro de ese zip.

Una vez que has obtenido tu llave y el sdk, podemos empezar con la creación de la primera aplicación con mapas. El .swc que vamos a usar, lo encuentras en la archivo que bajaste en la siguiente ruta (a partir de la carpeta que se creo con el zip): lib/map_flex_1_7a.swc, el otro archivo es para Flash.

Creas un proyecto nuevo en Flex, y tienes dos opciones para usar el .swc, la primera, lo agregas cuando creas el proyecto y la segunda, lo copias en la carpeta lib de tu proyecto creado, con esto, ya no tendrías que importar la librería.
Una vez teniendo el .swc agregado, vamos a la vista de código y abrimos un nuevo tag, automáticamente aparecerán ya los componentes del mapa, el componente que usaremos, será el de Map. A su vez, se creará automáticamente el namespace de los Mapas de Google

Código :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*">
   <maps:Map />
</mx:Application>

A diferencia de versiones anteriores de los Mapas de Google donde teníamos que poner un Contenedor, asignarle el mapa y agregarle un EventListener para saber cuando cambia de tamaño y recalcular este para el mapa, en esta versión ya se puede agregar el Mapa como si fuera un componente y bastará con ponerle el width y height en 100% para que abarque toda la ventana.

A continuación, le daremos un id a nuestro mapa, así como la llave que generamos en la página arriba mencionada, asignaremos el tamaño y un Listener que nos dirá cuando podamos interactuar con el mapa. Todo lo mencionado anteriormente, quedaría así en el tag del mapa:

Código :

<maps:Map id="gmap" width="100%" height="100%" mapevent_mapready="mapready_gmap(event)"
   key="aqui va tu llave generada" />

Hemos puesto el EventListener mapready_gmap(event) el cual tendremos que crear en la parte de <Script>. Lo que pondremos dentro de este Listener son opciones para inicializar nuestro mapa, como la Latitud y Longitud inicial que queremos que aparezca, el nivel de zoom, los controles que queremos que se vean, así como posibles listeners que queremos para el mapa. Lo anterior se vería así en nuestro código:

Código :

private function mapready_gmap(e:MapEvent):void {
   //ubicamos el mapa en la latitud y longitud especificada
   //ponemos el zoomLevel en 10
   //zoom level de 0 a 19 siendo 0 el más alejado
   //le decimos que empiece mostrando el tipo de mapa Normal
   gmap.setCenter(new LatLng(19.43274718737006, -99.13330793380737), 10, MapType.NORMAL_MAP_TYPE);
   gmap.addControl(new ZoomControl());
   gmap.addControl(new MapTypeControl());
   gmap.enableScrollWheelZoom();
   gmap.addEventListener(MapMouseEvent.CLICK, click_gmap);
}

y no podemos olvidar crear el listener click_gmap para evitar el error al compilar.

Vamos a agregar un marcador cada vez que demos click al mapa, esto lo lograremos con la clase Marker. Declaramos una variable de tipo Marker y colocaremos el siguiente código dentro del listener:

Código :

private var m:Marker;
private function click_gmap(e:MapMouseEvent):void {
   //definimos el nuevo marcador
   m = new Marker(e.latLng,
      new MarkerOptions({
         //el color y opacidad del marcador
         //tambiŽn se puede usar degradados
         fillStyle: new FillStyle({
            alpha: 0.75,
            color: 0x00ff00
         }),
         //si queremos que tenga sombra
         hasShadow: true,
         //el radio del marcador
         radius: 6,
         //el color, opacidad y grosor de la l’nea
         strokeStyle: new StrokeStyle({
            alpha: 0.75,
            color: 0x0000ff,
            thickness: 1
         }),
         //un tooltip
         tooltip: "Marcador en: " + e.latLng.toString()
      })
   );
   //agregamos el marcador al mapa
   gmap.addOverlay(m);
}

Y con esto, hemos logrado poner mapas de Google en una aplicación de Flex .

Actualmente yo estoy usando esta API para mostrar Financieras en el país (mediante los marcadores), poner Overlays de los estados del país representando algún tipo de estadístico, calculo de distancias como lo haría el Google Earth (solo que una versión que yo he hecho), todo es cuestión de que lo apliques a alguna necesidad que tengas.

El código completo quedaría así:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*">
   <mx:Script>
      <![CDATA[
         import com.google.maps.styles.StrokeStyle;
         import com.google.maps.styles.FillStyle;
         import com.google.maps.overlays.MarkerOptions;
         import com.google.maps.overlays.Marker;
         import com.google.maps.controls.MapTypeControl;
         import com.google.maps.controls.ZoomControl;
         import com.google.maps.MapType;
         import com.google.maps.LatLng;
         import com.google.maps.MapMouseEvent;
         import com.google.maps.MapEvent;
         
         private function mapready_gmap(e:MapEvent):void {
            //ubicamos el mapa en la latitud y longitud especificada
            //ponemos el zoomLevel en 10
            //le decimos que empiece mostrando el tipo de mapa Normal
            gmap.setCenter(new LatLng(19.43274718737006, -99.13330793380737), 10, MapType.NORMAL_MAP_TYPE);
            gmap.addControl(new ZoomControl());
            gmap.addControl(new MapTypeControl());
            gmap.enableScrollWheelZoom();
            gmap.addEventListener(MapMouseEvent.CLICK, click_gmap);
         }
         private var m:Marker;
         private function click_gmap(e:MapMouseEvent):void {
            //definimos el nuevo marcador
            m = new Marker(e.latLng,
               new MarkerOptions({
                  //el color y opacidad del marcador
                  //tambiŽn se puede usar degradados
                  fillStyle: new FillStyle({
                     alpha: 0.75,
                     color: 0x00ff00
                  }),
                  //si queremos que tenga sombra
                  hasShadow: true,
                  //el radio del marcador
                  radius: 6,
                  //el color, opacidad y grosor de la l’nea
                  strokeStyle: new StrokeStyle({
                     alpha: 0.75,
                     color: 0x0000ff,
                     thickness: 1
                  }),
                  //un tooltip
                  tooltip: "Marcador en: " + e.latLng.toString()
               })
            );
            //agregamos el marcador al mapa
            gmap.addOverlay(m);
         }
      ]]>
   </mx:Script>
   <maps:Map id="gmap" width="100%" height="100%" mapevent_mapready="mapready_gmap(event)"
      key="tu llave va aquí" />
</mx:Application>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.