Insertar mapas de Google Maps en Flash con Actionscript 3

Explicaré cómo utilizar el API de Google Maps para Actionscript 3. Usando esta API, poner un mapa en Flash será bastante simple. Permitiéndonos tener un mapa interactivo, muy potente y exacto.

Mi nombre es Miguel Moraleda y este será mi primer aporte en Cristalab. Este post lo saque de mi blog http://as3.miguelmoraleda.com, pueden visitarlo para ver otros artículos, que con mas tiempo pretendo agregar acá también.

Para completar este mini tutorial solo deben seguir con atención los pasos que detallo abajo.

Obtener API Key de Google Maps

Lo primero que deben hacer es conseguir una API Key para poder conectarse.
Para solicitar la key deben ir a http://code.google.com/apis/maps/signup.html

En ese sitio, luego de leer y aceptar los términos y condiciones deben especificar el dominio de su pagina. Para luego obtener su key.

Obtener el kit de google

El siguiente paso es descargarse el kit de google con las librerías para Actionscript y Flex.
El kit lo pueden descargar directamente en http://maps.googleapis.com/maps/flash/release/sdk.zip
El kit contiene dos archivos .swc, uno para flash y el otro para flex. En este ejemplo yo utilice el de flash.

Agregar el .swc a nuestro proyecto

Con la key y la api ya estamos listos para empezar a trabajar. Lo primero que deben hacer es crear un nuevo proyecto y configurar su Flash IDE para que incluya el archivo .swc de la API. Para hacer eso deben ir a Edición -> Preferencias -> Actionscript -> Actionscript 3 se les abrirá una ventana que contiene todos los class path a sus distintas librerías y en la parte para las librerías deben agregar la carpeta que contiene el .swc de la API de google.

Creando el código AS3

Ahora directo al código.

Código :

var _map:Map = new Map();
_map.key = "ACA DEBEN PONER SU KEY";
_map.language = "es";
_map.setSize(new Point(stage.stageWidth, stage.stageHeight));
_map.addEventListener(MapEvent.MAP_READY, onMapReady);
_map.y = 50;
addChild(_map);

function onMapReady(event:Event):void {
_map.setCenter(new LatLng(40.736072, -73.992062), 14, MapType.NORMAL_MAP_TYPE);
}

Con estas pocas lineas ya tenemos en nuestra aplicación conectándose a Google Maps y mostrando el mapa del mundo. Pueden ver un ejemplo funcionando haciendo click en la imagen a continuación o en el link del final


Ojala este pequeño mini tutorial le sirva a alguien. Cualquier duda, consulta, sugerencia o corrección sera bien recibida.

¿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.