Insertar Google Maps en Flash

Google Maps permite incluir cualquier mapa en tu web utilizando algunas sentencias de Javascript, también ofrece Google Maps API for Flash para incluir los mapas en Flash utilizando ActionScript.

Para hacer uso de este API lo primero es registrarse gratuitamente un obtener Google Maps API Key el cual nos permitirá mostrar los mapas en nuestra web. Además es necesario instalar el componente map.swc en el editor de Flash.

Instalando el Componente
Para instalar la librería es necesario descargar los archivos desde http://maps.googleapis.com/maps/flash/release/sdk.zip. Luego de extraer el archivo ubicamos el archivo map_x_y.swc en la carpeta lib, donde x e y indican la versión actual del componente. Creamos una carpeta llamada Google y copiamos el archivo .swc:

Windows:
C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components
MAC:
Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Utilizando el componente
Una vez instalado el componente, en el Panel de Componentes de Flash se puede ver un nuevo item llamado GoogleMapsLibrary. Para poder utilizarlo podemos jalar el componente al escenario o podemos jalarlo directamente a la librería de nuestro archivo flash.

flash-gmap

Creando nuestro primer Mapa
Lo primero es incluir las clases necesarias (com.google.maps.*) para incluir y manejar los mapas, definimos la latitud, longitud y zoom que vamos a utilizar. Luego de ello creamos una instancia de la clase Map, asignamos nuestro KEY. Definimos el ancho y alto de nuestro mapa con el método setSize.

  1. import com.google.maps.*;
  2.  
  3. var lat:Number = -12.04144;
  4. var lon:Number = -77.023188;
  5. var zoom:int = 17;
  6.  
  7. var map:Map = new Map();
  8. map.key = "tu_api_key";
  9. map.setSize(new Point(500, 350));
  10. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  11. this.addChild(map);
  12.  
  13. function onMapReady(event:Event):void {
  14.     map.setCenter(new LatLng(lat,lon), zoom, MapType.NORMAL_MAP_TYPE);
  15. }

En el ejemplo hemos creado un mapa de 500×350 pixels con un zoom de 17 y estamos mostrando el mapa normal.

Cargando Flash

Respecto a los tipos de mapas disponibles tenemos los siguientes:

  • HYBRID_MAP_TYPE: Mapa con fotografías satelitales y nombres las vías.
  • NORMAL_MAP_TYPE: Mapa normal con nombre de las vías.
  • PHYSICAL_MAP_TYPE: muestra el mapa físico.
  • SATELLITE_MAP_TYPE: mapa con las fotografías satelitales.

Agregando controles a nuestros Mapas
Para incluir los controles es necesario incluir las clases com.google.maps.controls.*, luego de ello podemos agregar los controles de Zoom y de posición a nuestros mapas de la siguiente forma:

  1. import com.google.maps.*;
  2. import com.google.maps.controls.*;
  3.  
  4. var lat:Number = -12.04144;
  5. var lon:Number = -77.023188;
  6. var zoom:int = 17;
  7.  
  8. var map:Map = new Map();
  9. map.key = "tu_api_key";
  10. map.setSize(new Point(500, 350));
  11. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  12. this.addChild(map);
  13.  
  14. function onMapReady(event:Event):void {
  15.     map.setCenter(new LatLng(lat,lon), zoom, MapType.HYBRID_MAP_TYPE);
  16.     map.addControl(new PositionControl());
  17.     map.addControl(new ZoomControl());
  18. }

Con este ejemplo tenemos un zoom inicial de 17 pero ya podemos hacer zoom a nuestro gusto y además tenemos los controles para mover el mapa.

Cargando Flash

Agregando Marcadores
Si queremos personalizar nuestros mapas podemos hacer uso de los marcadores para indicar una posición determinada e incluso sus descripciones. Para ello incluimos las clases com.google.maps.overlays.* con lo cual podemos utilizar los métodos para mostrar los marcadores.

  1. import com.google.maps.*;
  2. import com.google.maps.controls.*;
  3. import com.google.maps.overlays.*;
  4.  
  5. var lat:Number = -12.04144;
  6. var lon:Number = -77.023188;
  7. var zoom:int = 17;
  8.  
  9. var map:Map = new Map();
  10. map.key = "your_api_key";
  11. map.setSize(new Point(500, 350));
  12. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  13. this.addChild(map);
  14.  
  15. function onMapReady(event:Event):void {
  16.     map.setCenter(new LatLng(lat,lon), zoom, MapType.SATELLITE_MAP_TYPE);
  17.     map.addControl(new PositionControl());
  18.     map.addControl(new ZoomControl());
  19.    
  20.     var marker:Marker = new Marker(new LatLng(lat, lon));
  21.     marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
  22.         marker.openInfoWindow(new InfoWindowOptions({title: "Plaza de Toros de Acho", content:"Lima, Perú"}));
  23.     });
  24.     map.addOverlay(marker);
  25. }

Ahora tenemos un marcador en nuestro mapa y al hacerle click mostramos un mensaje personalizado que puede indicar el lugar que estamos visualizando.

Cargando Flash

Más Información
Hemos visto con con sentencias sencillas podemos incluir los mapas de Google Maps en nuestros archivos Flash sin ningún problema, obviamente hay muchas mas opciones para personalizar estos mapas las cuales por cuestion de tiempo no podemos discutir aca, pero les dejo los enlaces para que puedan ampliar este tema.

Comentarios Total 37 comentarios


Insertar Google Maps en Flash « Blog de Flash
Publicado: 05/10/2009 2:39 am

[…] Read the rest here:  Insertar Google Maps en Flash […]

Jesus
Publicado: 06/10/2009 1:43 pm

Es interesante, te lo has currado, pero hay un método más facil y practico.

No uses flash ^^

unijimpe
Publicado: 07/10/2009 3:20 pm

Efectivamente es facil insertar mapas utilizando solo javascript, pero que sucede si tienes una página hecha completamente en Flash, entonces si es necesario insertar los mapas utilizando ActionScript.


[…] Enlace:  Como insertar google maps en flash […]

Matias Tulian
Publicado: 12/10/2009 8:44 am

Genial metodo!, agradezco muchisimo la información.

Francisco
Publicado: 12/10/2009 11:44 am

A mi el tema del flash no me gusta nada, pero algunas veces para tener contentos a los clientes…

Esteban
Publicado: 13/10/2009 2:40 pm

hola .. yo usaba el gmap de afcomponents.com andaba perfecto. en AS2.. ahora , osea recien recien. lo descontinuaron. y tengro quemigrar todoun sitio echo en AS2 a AS3.. me quiero morir.. alguno que funce en as2. hay por ahi?. y a que este tiene botones que levantar lines etcetc
saludos.

jonas loya
Publicado: 19/10/2009 1:16 am

La página que estoy desarrollando esta totalmente desarrollada en as2, y no puedo convertirla en as3, estuve buscando una api de google maps para as2, pero no la encontré, que puedo hacer al respecto? no existe nada que funcioné en as2?

pixtorm blog » links for 2009-10-23
Publicado: 24/10/2009 12:21 am

[…] Insertar Google Maps en Flash Google Maps permite incluir cualquier mapa en tu web utilizando algunas sentencias de Javascript, también ofrece Google Maps API for Flash para incluir los mapas en Flash utilizando ActionScript. (tags: flash google maps) […]

Xavi
Publicado: 28/10/2009 6:13 pm

Me uno a las peticiones para insertar google maps en una web hecha en action script 2. Alguna sugerencia?

izhack
Publicado: 13/11/2009 7:43 am

Buenas… Estoy desarrollando una web íntegramente en flash. Quiero añadirle la Api de Google Maps y de hecho cuando pruebo la pagina en el entorno Flash funciona perfectamente, pero cuando la subo al servidor no me funciona. El navegador intenta cargar el componente pero en vez de cargar me muestra un mensaje de error:

Initialization failed: please check the API key,
swf location, version and network availability.

Por las pruebas que he hecho de testeo, creo que hay dos opciones. O bien el servidor no carga las Api ya que es un servidor de estos gratuito(concretamente lycos), cosa que es poco probable, o bien yo no estoy poniendo bien la dirección de mi página para obtener la clave desde Google.

Algo más concreto…¿es posible que al ser un servidor gratuito almacene los archivos en otra parte que no sea la dirección web con la que yo accedo al indice de la página? Eso confirmaría que tengo que introducir otra dirección web para obtener la clave, pero me parece también poco probable.

En fin, si alguien me pudiera orientar… Muchas gracias.

diego
Publicado: 15/11/2009 8:19 pm

que pasa con las peticiones para AS2 realmente parece algo bastante tonto que se haya descontinuado el soft, no se entiende… Aprendes 5 10 años un lenguaje y en lugar de mejorarlo lo cambian por completo …

marco
Publicado: 02/12/2009 3:11 pm

hola me uno a los pedidos para as 2.0 todo funcionaba correctamente hasta que derrepente ya no se puede visualizar los nombres de las calles, es decir el tipo “map”…. =(

Oscar
Publicado: 11/12/2009 7:52 am

Hola a todos a ver la solucion para los ke teneis as2 y kereis meter el mapa de as3 es mu sencilla haceis el mapa lo guardais como una pelicula swf y desde la web la llamais a donde kerais asi no teneis ke midrar toda la web a as3.

AVeigadoRock
Publicado: 21/12/2009 2:56 pm

Buenas, mi pregunta es como colocar el mapa en una posicion determinada de escenario, uso as 3.0, creo que es con “display object”, pero como soy muy novato no se donde insertarlo en el codigo.
Gracias por adelantado!

anonimo
Publicado: 11/02/2010 4:46 pm

En torno a la solución de Óscar, 2 post más arriba, no se pueden cargar swf en as3 dentro de proyectos as2. Sí al revés.

Don VItto
Publicado: 14/02/2010 4:36 pm

El mapa funciona de puta madre,..pero una pregunta,…como puedo poner los controles para seleccionar si kiero la vision en satelite, o en normal etc,…
gracias.

DAVID
Publicado: 10/03/2010 7:00 pm

una pregunta!! todo me funcionó perfecto solo que quiero ubicar el mapa en un lugarespecifíco dentro del archivo flash.

Cristián
Publicado: 20/03/2010 3:01 pm

Hola amigo.
Muy buen ejemplo…..Me pueden ayudar a insertar sobre el mismo ejemplo un ícono personalizado en lugar de el que esta por defecto alojado en una URL o en un directorio??.
Una pregunta mas
Cando intento utilizar las un metodo de la clase GMap2 no me deja y me dice que posiblemente no este definido
Estoy utilizando Flash CS3 y ActionScript3
Saludos y gracias

Carlos
Publicado: 29/03/2010 5:50 am

Hola, sabeis algo del GMap con AS2? Ya se puede solucionar el problema?

brotherik
Publicado: 07/04/2010 6:36 am

Saludos!!!

Por favor necesito ayuda. En la siguiente web gracias a este maginifico blog he conseguido hacer un mapa en flash:

http://www.reuniver-burjasot.com/

Mi codigo es el siguiente:

import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.controls.*;

var lat:Number = 39.50707;
var lon:Number = -0.409198;
var zoom:int = 16;

var map:Map = new Map();
map.key = "ABQIAAAA0ov_VmrdzyxKvjW8p-0aURTYtwhX8YSygFIZAq_wIg0ngFFaHxRlCxaTe8eyX-S2ArFXV_OIEberlw";
map.setSize(new Point(450, 300));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:Event):void {
map.setCenter(new LatLng(lat,lon), zoom, MapType.NORMAL_MAP_TYPE);
map.addControl(new PositionControl());
map.addControl(new ZoomControl());

var marker:Marker = new Marker(new LatLng(lat, lon));
marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
marker.openInfoWindow(new InfoWindowOptions({title: "Obispo Muñoz, 50", content:"Burjasot, Valencia"}));
});
map.addOverlay(marker);
}

Lo que no consigo hacer a ver si alguien me puede ayudar es

¿como introducir una segunda marca en el mismo mapa con otra dirección muy cercana a la primera?

Gracias de antemano

Paco
Publicado: 22/04/2010 1:53 pm

Por favor, no olvidemos el tema del funcionamiento de Gmap en AS2, alguien tiene que tener alguna solución. Como bien dice “anonimo”, no se puede llamar a un archivo swf con AS3, desde un archivo swf con AS2, pero tiene que haber alguna solución. Lo que tampoco es normal, es que funcionen todos los mapas menos el mapa normal.
No se, creo que me voy a volver loco, tengo realizados muchos proyectos en AS2, y tengo que encontrar una solución como sea.

Agradeceria toda ayuda posible.

Gracias de antemano.

Sofi
Publicado: 22/05/2010 3:43 pm

Muy buenas… en lo personal y por lo que leo lo que hare yo al menos es simple: abrir un pop up. Se que no es precisamente la mejor opcion pero mientras le encuentro a esto ni modo…

RANCIO98
Publicado: 29/05/2010 6:05 pm

HOLA PACO yo encontre esto espero te funcione !!!
http://www.tutorialesyrecursos.es/google-map-para-flash-actionscript-2-0
Suerte a mi me funciono!!!

Felipe
Publicado: 30/06/2010 10:45 pm

Rancio no funciona tu página… osea no hay imagenes y no funciona con flash cs4.
y sobre el tutorial en as3 esta buenisimo. gracias.

Inzaghi9
Publicado: 01/07/2010 11:24 am

Paco si encontraste una solucion al problema de hacerlo con AS 2.0 por favor compartela yo estoy en la misma situacion y me estoy volviendo loco, se que habemos muchos que tenemos el mismo problema y si alguien encontro una solucion para hacerlo con AS 2.0 por favor que la comparta

Diego
Publicado: 15/07/2010 4:27 pm

Estoy insertando un mapa en una animacion flash, pero por defecto la posicion del mapa en conjunto es seimpre en la parte superior inzquierda, es decir que mi animacion flash es mas grande que el mapa, y suce de que por mas que mueva el mapa con el mouse, este siempre aparece donde le indique..

gracioas

Gerardo
Publicado: 13/09/2010 10:48 am

Hola. Llevo días buscando cómo importar de una cuenta de Maps los marcadores que ya fueron creados en ésta y trabajar con ellos desde flash. Esto es para una aplicación Stand alone. saludos

Matias
Publicado: 15/09/2010 2:25 pm

Hola a todos

Tengo una pregunta y a la vez un problema, tengo un mapa que lo hice en flash, hasta ahi todo se me ve bien, es una ubicación de una ruta de ciclismo aventura, ahora mi duda es, tengo un archivo KML que muestra el recorrido y los puntos de dicha ruta, logre tener la URL del archivo y quisiera mostrarlo en el API para flash.

¿donde inserto la url en la parte de acciones de flash?

la pagina que estoy haciendo es http://www.huellabike.com/rutashuellabike.html

Ante mano muchas gracias. Espero su ayuda.

cce
Publicado: 07/02/2011 10:02 am

quiero instalar el componente en flash 8 pero cuando abro el administrador de extensiones solo reconoce archivos extension .mxi y .mxp. El archivo que bajo es justamente es map_1_20.swc

Intente agregarlo directamente en C:\Archivos de programa\Macromedia\Flash 8\es\Configuration\Components\Google Maps

Pero no pasa nada.

Como puedo agregar este componente?

erika
Publicado: 09/02/2011 10:30 am

a pesar de que no se ven las fotos me he aventurado a seguir el tutorial que puso rancio para AS 2.0, pero algo he hecho mal, quizá instalar el componente, porque me crea un mapa con los controles y el marcador del sitio elegido, pero no me aparecen las calles y el flash me da errores de que no puede abrir la URL.

¿alguién puede ayudarme?
Gracias.

Belén
Publicado: 09/05/2011 4:44 pm

Buenas noches,

Estoy realizando una página web en flash y quiero insertarle el mapa de google. He logrado montar todo en flash y si exporto en swf (con el fla abierto) funciona perfectamente pero si ejecuto el swf directamente no me enseña nada y los botones que tengo insertados tampoco responden.
Alguien me podría decir cómo tengo que hacer, imagino que me falta algo.

Muchísimas gracias de antemano.

Saludos

RSCANO
Publicado: 05/09/2011 3:10 am

Buenas noches hasta ayer estuve terminando una web hecha en flash y coinsido con el mismo problema de Belén que solo me muestra con el fla abierto pero el SWF solo no me lo muestra y lo peor esque aun subido al servidor tampoco Alguien nos podria ayudar con esto por favor si tienen la solucion? … muchas gracias

Miguel
Publicado: 09/11/2011 10:51 pm

He estado haciendo pruebas con mi codigo d e autorizacion de google y nada, pormas que pruebo y pruebo cambiando parametros y no me funciona. Hay varios que publican estos procedimientos pero o no son muy específicos en algun punto o simplemente estos codigos ya no valen debido a alguna actualiazacion del api, nose la verdad. Igual ando buscando opciones para hacer funionar el google map en flash 8 pero al parecer ya no funcionan, la solucion que indican en un link en los comentarios de arriba no funciona. Bueno si hay algun tutorial que realmente sea valido para el odioso cs3 que alguien lo publique porfavor.

irina
Publicado: 17/01/2012 12:37 pm

tal vez, esta pregunta les resulte ingenua, pero bueno, estoy realizando un poryecto de revista turistica interactiva y necesito insertar un mapa de una ciudad. la interrogante es la siguiente ?al ejecutar el archivo debeb estar conectado a internet para visualizar el mapa?

gracias

Juan
Publicado: 18/01/2012 9:26 pm

Hola y cual carajos es la clave que le generan a uno sale solo
su clave es {}
alguien pude ser mas ckaro

pedro
Publicado: 02/07/2012 1:03 pm

Google maps para flash murio, dejaron de darle soporte y tampoco dan claves api nuevas. Fiate de google y sus “gratuidades”… ademas en 2014 dejaran de funcionar las claves api que ya fueron generadas.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)