Usando API de Google Maps para Actionscript 3

24 marzo, 2009 by LeoBaraldi | 33 Comments

Hace un tiempo publique un componente de AFcomponet que nos permitía usar Google Maps. Dicho momento dejo de funcionar dado los cambios que propuso Google al publicar su API para flash.

De esa manera ahora no necesitamos de un componente de tercero para poder tener mapas en nuestra web, y este ejemplo viene a colación de las extensas consultas y fallas detectadas en el componente de AF.

Podrán comprobar que la Api provista por Google es mucho más amigable y simple, también cuenta con una velocidad considerablemente más rápida en lo que se refiere a acceso de datos.

Cuenta también una extensa hoja de referencia lo cual nos va a hacer fácil el desarrollo de cualquier aplicación sea para Flash, AIR o Flex.

1 Antes que todo lo que necesitan es gestionar una llave (Key (1)) para utilizar la API, para ello deben visitar este link: http://code.google.com/intl/es-ES/apis/maps/ es importante que sean usuarios registrados de google (Gmail por ejemplo), y la clave va relacionada directamente con el dominio (2) donde ejecutaran la aplicación.

2 El siguiente paso es instalar el SDK o componente que nos provee Google para conectarse a google maps, la descarga la hacemos desde este link: http://maps.googleapis.com/maps/flash/release/sdk.zip

Una vez descargado des compactamos el archivo y lo pegamos en la siguiente carpeta para los que usamos Windows:
X:Archivos de programa\AdobeAdobe Flash CS3\es\Configuration\Components
Nota: X es la unidad de disco donde este instalado – “es” es el idioma, en este caso yo lo tengo en español, en ingles seria “en”

Nota: si usas CS4 es en: C:\Archivos de programa\Adobe\Adobe Flash CS4\Common\Configuration\Components

Para los muchachos de Mac así: Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Si lo hicimos bien abrimos Flash y en la ventana de componentes deberíamos ver algo asi:

3 Ahora con un archivo nuevo en blanco procedemos a arrastrar el componente GoogleMapsLibrary a nuestro escenario.

Abrimos el panel de acciones “F9” y escribimos lo siguiente:

Clic para ver Texto Plano

Actionscript:

// importamos las clases necesarias, están son las básicas para este ejemplo alcanzan. Al final del tutorial les dejo el link de las referencias para que puedan ver cada clase en particular.
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.*;
import com.google.maps.LatLng;
//seteamos el ancho y alto de nuestra película
var ANCHO:int = stage.stageWidth;
var ALTO:int = stage.stageHeight;
//creamos nuevo objeto Map
var map:Map = new Map();
//aquí pegamos el código de la llave que sacamos en el primer paso
map.key = "ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
//seteamos el alto y ancho del mapa
map.setSize(new Point(ANCHO, ALTO));
//agregamos un detector de evento para cuando se completo la carga
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//cargamos el mapa a nuestra lista de visualización
this.addChild(map);
//este es un poniter que agregue yo, el que viene no me gusta
var pointer:Pointer = new Pointer();
this.addChild(pointer);
pointer.x = (ANCHO/2)-(pointer.width/2);
pointer.y = (ALTO/2)-(pointer.height/2);
pointer.alpha = 0.5;
//en este campo vamos a imprimir las coordenadas y zoom actuales, si comentan estas líneas pueden ocultar esta parte
var texto:TextField = new TextField();
var formatoTexto:TextFormat = new TextFormat();
this.addChild(texto);
formatoTexto.font = "Arial";
formatoTexto.size = 12;
formatoTexto.align = TextFormatAlign.LEFT;
formatoTexto.bold = true;
texto.multiline = true;
texto.background = true;
texto.autoSize = TextFieldAutoSize.LEFT;
texto.defaultTextFormat = formatoTexto;
//si se cargo todo bien ejecutamos!
function onMapReady(event:Event):void {
//centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
//mostramos el control de zoom
map.addControl(new ZoomControl());
//el control de posicion
map.addControl(new PositionControl());
//el selector de tipo de mapa
map.addControl(new MapTypeControl());
//el evento para reimprimir las coordenadas cuando desplazamos el mapa
map.addEventListener(Event.ENTER_FRAME,coordenadas);
}
//imprimimos las coordenadas en el campito de texto
function coordenadas(e:Event):void {
texto.text = "Lat/Lng: "+e.currentTarget.getCenter()+"rZoom: "+e.currentTarget.getZoom() ;
texto.x = (ANCHO-texto.textWidth)-10;
texto.y = (ALTO-texto.textHeight)-10;
}

Bueno hasta ahí como pueden ver muy pero muy simple! Espero que les sea útil.

Referencia de la API
Ejemplos de uso por Google

ver ejemplo descargar archivos

Share|

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño III y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Usando API de Google Maps para Actionscript 3

Author: LeoBaraldi

33 Comments

Deja un comentario Cancelar respuesta