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:
-
// 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.


24 marzo, 2009 at 6:52 am
Hola,
Muchas gracias por la ayuda, pero me ha surgido una duda. Utilizo un Flash CS3 ejecutable, directamente desde una memoria USB. ¿En mi caso donde tengo que instalar la libreria? SI me pudieran ayudar sería de gran ayuda. Gracias.
4 abril, 2009 at 3:22 pm
Muchas gracias por todo, lo estoy probando y va de maravilla, pero una pregunta, se podrian incluir eventos dentro del mapa?, es decir para señalar ofinas en distintos paises; mucha gracias
11 mayo, 2009 at 8:39 pm
hola, podemos poner código en AS 2.0 con esa API? cómo sería? Muchas gracias
12 mayo, 2009 at 1:32 pm
Lamentablemente no se puede Tania
30 mayo, 2009 at 5:50 am
Muchisimas gracia por tu trabajo. Me ha servido de grandisima ayuda. Una pregunta, cómo puedo incorporar el Pointer de Google?
Gracias
9 junio, 2009 at 1:50 pm
¿Puede cargarse esta película como un SWF externo en una película en AS2 2? ¿Hay por ahí alguna aplicación de google o Yahoo maps para AS2?
27 junio, 2009 at 4:48 am
egandalph no se puede lo que quieres, había una versión pero de descontinuó y no era oficial de google :(
Only AS3
17 septiembre, 2009 at 12:02 pm
SALUDOS
MUY BUENO ESTE EJEMPLO, Y ES ENTENDIBLE LO UNICO KE NO HE PODIDO DESIFRAR ES COMO PUEDO CAMBIAR LA POSICION MANAUL MENTE
GRACIAS
28 septiembre, 2009 at 6:19 am
Hola, ¿alguna solución para webs que utilizaban el componente de AFComponet?
Si no la hay, menudo fiasco...
28 septiembre, 2009 at 8:20 am
Hola,
A la hora de exportarlo me dice:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: Pointer
Qué puede fallar? Gracias.
28 septiembre, 2009 at 10:42 pm
Michelcool se que af todavía tiene una versión que funciona pero la migraron a as3
28 septiembre, 2009 at 10:43 pm
Comprueba que tengas las clases necesarias! no uses una versión portable de flash
29 septiembre, 2009 at 3:17 am
No, no uso una versión portable :(
Mi versión de sdk es la: "map_1_16.swc". Crees que quizà sea este el problema?
Sigo cada paso de tu tutorial (o el de google) y todo va perfecto hasta que llega el paso de los pointers o markers dónde me da el error anterior:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: Pointer
:'(
29 septiembre, 2009 at 3:31 am
Iep! He encontradu un tutorial tuyo en cristalab. Me he bajado los archivos y va de perlas :D
Gracias!
12 noviembre, 2009 at 4:46 pm
Lo de AFC ha sido un desastre, yo no he conseguido que me funcione lo de Umap/AS3 como lo hacía Gmap/AS2...Ahora ando desesperado buscando una solucion para poder cargar un fichero KML (XML que pone distintos logos en distintos sitios)... Si alguien lo ha hecho por favor que diga como !!! Mil gracias.
17 noviembre, 2009 at 7:29 am
Hola, en primer lugar mil gracias por este perfectisimo tutorial!!! mi duda esl a siguiente, si en vez de un puntero quiero pener un pequeño gif ( un logo ) como lo cargo? supongo que es en este apartado pero no se como decirlo, Load?
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;
17 noviembre, 2009 at 7:33 am
Perdon me olvide de lo mas importante, y para colocarlo en otras cordenadas, es decir para situar diferentes puntos en el mapa? muchas gracias genio!
20 enero, 2010 at 12:12 pm
Como se puede hacer un market, en este tutorial. Es decir una marca , o un logo que este situado en unas coordenadas determinadas, y que cuando muevas el mapa, la marca se mueva tambien
Un saludo y muchas gracias
21 enero, 2010 at 7:58 am
seria algo asi:
Pingback: Agregar Marker o pointer en componente de google maps actionscript 3 | LeoBaraldi - Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript
1 febrero, 2010 at 2:33 pm
Muchísimas gracias... a mi me pareció brutal la aportación.
6 febrero, 2010 at 3:22 pm
Muy bueno TnX
ayudo mucho el Tutorial
12 abril, 2010 at 3:17 pm
hey se pueden insertar dos mapas google en el mismo flash
saudos
12 abril, 2010 at 4:33 pm
AYUUUDAAAAAAA necesito poner en una misma pagina dos google maps desd flash por favor ayudame como lo puedo loigrar
saludos
12 abril, 2010 at 4:39 pm
De hecho ya tengo uno y funciona perfecto pero a la hora de poner el otro mapa tiene los siguientes problemas:
dice que tiene conflicto con la latitud, la longitud y la funcion
que hago?
26 mayo, 2010 at 9:24 pm
necesito el componente googlemapslibrary para AS2!!!!!
urgente!!! alguien lo tiene??
28 junio, 2010 at 11:59 am
Hola LeoBaraldi, te escribo pq llevo un tiempo siguiendo tus articulos de flash. Tengo un problema, me baje todo del sitio de google (API) instale el componente hice todo lo que pones aqui y en la pagina y al ejecutar, el swf me aparece en blanco, sin nada. ¿Sabes a que puede ser debido? Gracias de antemano!!!
28 junio, 2010 at 12:00 pm
Para q quede claro, tb registre los dominios en los que quiero poner mis archivos, y me dieron las claves. Aun asi y con todo se me queda en blanco. A ver si puedes contestarme
24 agosto, 2010 at 5:43 pm
bravo por tu aporte keria
todo perfecto pero estoy creando mi web todo en flash y como haria para poder subir este swf porke ya intente y no se previzualiza ,
gracias de antemano espero tu respuesta x aki y ami email ,
21 septiembre, 2010 at 6:21 pm
Estoy trabajando con flash CS4 y AS3, en lugar del mapa me aparece el mensaje que necesito setear el "sensor = true o sensor = false" pero no encuentro donde colocar esta linea, si la pongo me sale error en la compilacion, ayudame con este problema, gracias
17 noviembre, 2010 at 11:47 am
Hola leo; tengo un problema al integrar el api en mi web realizada en Flas. Tanto si inserto directamente el SWF en el escenario principal de mi pelicula, como si lo hago con una llamada loadMovie desde un mc en blanco, el mapa ocupa todo el escenario cubriendo el resto de objetos.Imagino que se debe a un problema de rutas, pero no doy con la solución.
¿puedes ayudarme?.
Gracias de antemano.
29 abril, 2012 at 7:04 pm
Y ahora que ha quedado obsoleta la API para flash que se puede hacer??? he kedado perdido....
7 mayo, 2012 at 3:40 pm
descague y segui el tutorial para realizar poner un mapa online..
pero ya no se generan las API KEY como antes.. sabras decirme como hacer?