Google Maps en Flash

En esta oportunidad les presentamos un Componente para Flash llamado GMap V. 2.6.1 que nos permitirá incluir mapas de forma sencilla del servicio Google Maps. Este componente utiliza Google Maps API para conectarse y obtener los mapas, además de ello tiene una gran variedad de eventos, propiedades y métodos que nos permitirá personalizar fácilmente el mapa a incluir.

 

El código de este post es obsoleto.
Para una versión actualizada pueden leer Insertar Google Maps en Flash

Obteniendo el Componente
Este componente es desarrollado por AFComponents, una empresa dedicada a desarrollar y vender componentes, pero no se preocupen este componente es gratuito, lo único que tienen que hacer es registrarse de forma gratuita y luego descargar el componente.

Identificando las Coordenadas
Lo primero que necesitamos para incluir un mapa son las coordenadas del centro del mapa, para ello podemos entrar a Google Maps, explorar hasta ubicar el mapa que deseamos insertar, e identificamos las coordenadas.

maps-simple.gif

Esto lo hacemos haciendo click en la opción Enlazar con esta página el cual nos mostrará un enlace de la forma:

http://maps.google.com/?ie=UTF8&ll=-12,-77&spn=0.6,0.9&z=1&om=0

En donde identificamos las coordenadas bajo el parámetro ll, en este ejemplo sería (-12,-77). Nosotros utilizaremos la coordenada (-12.097738,-76.991501) que muestra las calles de Lima – Perú.

Creando Nuestro Primer Mapa
El primer paso es colocar una instancia del componente GMap a nuestra película. Podemos modificar las dimensiones del mapa simplemente modificando las dimensiones de la instancia del componente como cualquier MovieClip. Luego de ello podemos configurar el mapa utilizando el panel de Parámetros del componente.

config-map.gif

Ingresamos el valor de la latitud y longitud que hemos identificado anteriormente, luego el tipo de mapa (map, satellite, hybrid) y el valor del zoom del mapa. Ingresamos los datos de acuerdo a nuestros requerimientos y ya tenemos listo nuestro primer mapa.

[SWF]http://blog.unijimpe.net/wp-content/uploads/2008/09/gmap-basic.swf, 400, 300[/SWF]

Agregando Controles Avanzados
Lo siguiente es agregar controles, para ello existen una serie de métodos y propiedades, todas ellas documentadas en un archivo que viene junto con el componente. Entonces si a la instancia del componente lo llamamos map, tendríamos el siguiente código.

[as]
map.addControl(map.GZoomControl());
map.addControl(map.GPositionControl());
map.addControl(map.GTypeControl());
[/as]

Con lo cual obtenemos el siguiente resultado que incluye los controles para navegar en el mapa.

[SWF]http://blog.unijimpe.net/wp-content/uploads/2008/09/gmap-adv.swf, 400, 300[/SWF]

Obviamente hay muchas mas opciones para personalizar estos mapas y puedes encontrar mas ejemplos y referencias en la documentación del componente. Para finalizar les dejo los archivos fuente para descarga.

Nota
Este componente ha sido actualizado a la versión 2.7 el cual corrige algunos problemas de visualización para el zoom. Los archivos han sido modificados y publicados nuevamente. Para los usuarios que ya han utilizado la versión anterior, les recomiendo descargar las ultima versión del componente.

Comentarios Total 28 comentarios

Google Maps ahora en Flash » Cosas sencillas
Publicado: 11/02/2008 4:42 am

[…] UNIJIMPE nos presenta un componente para Flash llamado GMap V. 2.6.1 que nos permitirá incluir mapas de […]

Matias
Publicado: 12/02/2008 12:47 am

Muy interesante!
Muchísimas gracias.


[…] Unijimpe […]

Pedro Molina
Publicado: 09/09/2008 1:10 pm

hola Unijimpe, parece que tienes el mismo problema que yo. He usado ese componente en varias webs y ahora no puedo hacer zoom. si descubres algo y lo posteas estaria de pm. gracias

christian portuguez
Publicado: 13/09/2008 4:13 pm

Hola unijimpe la aplicacion q muestras es genial pero hay un pequeño drama cuando creas la aplicacion y lo subes a la web te sale el siguiente mensaje «we are but we dont have imagery at this zoom level for this region …try zooming out for a broader look» en tu propia muestra q haces aqui tbm sale el mismo error.

Lo probe en mi pc y cuando ejecuto el swf desde flash sale correcto pero cuando lo subes a la web no pasa nada.

A que se debe eso ?

unijimpe
Publicado: 13/09/2008 7:54 pm

Hola Christian, gracias a tu comentario he actualizado los archivos, el error era por que estábamos utilizando la versión 2.6.1, ahora la nueva versión es 2.7. He actualizado los archivos y las fuentes, ahora puedes descargar los últimos archivos.

maria
Publicado: 29/09/2008 11:18 am

hola, Muchas gracias por tu aportación, ahora yo estoy intentando meterle un medidor de distancias entre dos puntos que defina la persona que lo ve… y es imposible por muchas vueltas que le doy si encontrais algo os lo agradezco muchísisimo!!

Julio
Publicado: 02/10/2008 7:49 am

Hola.
Tengo una preguntita sobre tu buen tuto sobre mapas google dentro de flash… Es posible personalizar un mapa (con una cuenta google map) y esta colocarla dentro de flash?.
Osea no mostrar un area global, si no un area que tu editaste. Se puede?
Graciuas

Jose
Publicado: 07/10/2008 12:07 pm

Aqui dejo otro mapa creo que mas personalizado y otro estilo, también si el mapa es no es muy alto no sale la barra de zoom, solo los botones y ponerle icnos en el mapa y mucho mas.. se puede bajar de http://www.poderoso.es/google-maps-poderoso.es.zip

Javier
Publicado: 04/11/2008 2:40 pm

Hola, quería saber como importar un mapa ya personalizado, con marcas y videos etc, a flash para despues alli editar los controles o hacer lo que queramos con él.
Tambien estoy intentando averiguar como personalizar los controles que vienen por defecto, de zoom o cambio de mapa, pero no con las librerias de la API, sino con mis propios botones e iconos. Gracias, un saludo.

lizardo ceballos lara
Publicado: 09/11/2008 12:05 pm

hola! yo quisiera saber si personalizando el area que tu quieres divisar podrias tener una buena resolucion de tal manera que se puedan ver a las personas y si el tiempo es real la verdad no tengo mucho conocimiento por eso pregunto espero y me puedan ayudar gracias

Ana
Publicado: 10/11/2008 7:07 am

Hola christian portuguez, mira tengo el mismo problema que tu. Conseguiste resolverlo?

«uando creas la aplicacion y lo subes a la web te sale el siguiente mensaje “we are but we dont have imagery at this zoom level for this region …try zooming out for a broader look” en tu propia muestra q haces aqui tbm sale el mismo error.

Lo probe en mi pc y cuando ejecuto el swf desde flash sale correcto pero cuando lo subes a la web no pasa nada.

A que se debe eso ?»

Podrias ayudarme?? muchas gracias.
No se si se deberá a que hay que incluir la API Key.

Gracias!

Ana
Publicado: 10/11/2008 8:31 am

RESPUESTA PARA CHRISTIAN.
Vale, ya lo solucioné para quien le interese saber la solución que sé q se agradece mucho.
Mirad en la configuración de publicación, html, seguridad de reproduccion local y seleccionais ACCEDER SOLO A LA RED.
De este modo se puede acceder a la red y por tanto puede conectar con Google Maps, si pones la otra opción solo puedes trabajar en local y por tanto no conecta con google maps. Y por eso se ve el swf y no se ve el html.

angel hernandez
Publicado: 07/04/2009 3:56 pm

tengo una pregntotota alguien a echo un marcador dentro del flash para lo que son los mapas de google??

el ke lo aya echo aga el paro y didame komo hacerlo o paseme el codigo fuente es super urgente para mi

si alguien me ayuda lo agredeceria mucho

saludos

frank TORO
Publicado: 13/04/2009 9:57 pm

NO PUEDO HACERLO NO SE POR Q CUANDO EXPORTO PARA VISUALIZAR LUEGO DE COLOCAR LOS DATOS NO ME SALE… AYUDENME

roswitta
Publicado: 10/06/2009 7:45 am

tonto que eres! no manches ya pregunta otras cosas

Dieog
Publicado: 25/07/2009 3:06 pm

alguien sabe como indicar que cargue el mapa en una cierta posicion x e y de mi escenario? gracias

unijimpe
Publicado: 25/07/2009 5:22 pm

Puedes cambiar la posición del mapa cambiando las propiedades del componente. Otra opción es con action script cambiar la posición de componente:

map._x = 30;
map._y = 30;

Diego
Publicado: 28/07/2009 7:51 pm

Gracias, tengo el siguiente problema. Hice un mapa con todos los componenetes, un marcador, todo muy lindo, lo subo y anda perfecto si llamo al mapa.swf, pero si el mapa.swf lo cargo dentro de otro swf no anda. Yo tengo mi swf base donde se cargan otros swf segun corresponda, cuando intento cargar el mapa salen los textos que le puse pero no el mapa. Alguien sabe si se puede solucionar? Gracias

unijimpe
Publicado: 28/07/2009 8:08 pm

Diego, prueba colocando el componente en el SWF principal, esto sucede por que cuando un clip se carga en otro este trata de acceder el _root para encontrar el componente, entonces si el componente no esta en el SWF principal no se mostrará correctamente.

maimus
Publicado: 31/07/2009 5:55 am

Hola unijimpe, he colocado el mapa en flash con as2 y todo me funciona perfectamente.
Mi pregunta es como podria poner un marcador de referencia? el muñequito ese o la chincheta.

Graciaaaas

paula
Publicado: 27/08/2009 8:03 am

ana, he hecho lo que has dicho pero no pasa nada aun no me funciona a fuera del flahs…en local lo veo impeke pero lo subo y se ve mal….

hay algo mas? que se necesite?

kevin
Publicado: 23/09/2009 10:36 am

Hola:
Les cuento el problema, Tenia implementado el componente en una página y a mediados del mes de septiembre dejo de funcionar la carga de las imágenes desde google mostrándose opaco con el siguiente texto:

«we are but we dont have imagery at this zoom level for this region …try zooming out for a broader look»

Alguien podría decirme por que el componente ya no funciona, es problema de google?? o falta actualizar el componente??.

La situación es que la pagina está escrita en as2 por lo que no puedo implementar google maps original porque está hecho en as3.

Si tienen alguna solución, favor de responder el comentario pliss,
se los agradezco de antemano.

Diego
Publicado: 25/09/2009 5:36 pm

Hola!
Estoy teniendo el mismo inconveniente que Kevin.
También agradecería muchísimo si pudiesen dar una solución a este tema.

Mil gracias!

Diego
Publicado: 25/09/2009 5:46 pm

Kevin: Recién entré al sitio de AFComponents y encontré el siguiente mensaje para el componente Gmaps:

The GMap component has been discontinued and is no longer supported by AFComponents. Please upgrade your project to the Google Maps Flash API. We apologize for the inconvenience. The GMap component in property of Google.

Y no pude encontrar Google Maps Flash API…

kevin
Publicado: 29/09/2009 12:55 am

Diego:

Puedes migrar a Umap de AFComponents en la misma pagina hay un tutorial muy bueno , te explica para que sirve exactamente cada trozo de codigo

http://umap.s3.amazonaws.com/demo/gmap2umap/upgrade.html

O tambien puedes implementar google map para flash donde tambien estan todas las intrucciones de como hacerlo pero es un poco mas complicado para principiantes, porque hay que copiar librerias en determinados directorios de la version de flash que estas usando (sea cs3 o cs4), y tambien porque esta mas orientado para trabajar con flex.
de todas formas aqui te dejo el link:

http://code.google.com/intl/es-ES/apis/maps/documentation/flash/
ahi puedes encontrar toda la referencia que necesites.

PD: para la solucion de mi problema tengo dos opciones pasar toda la pagiana a as3 o usar javascript, no se me ocurrio ninguna otra :P …

Saludos.

Diego
Publicado: 02/10/2009 2:01 pm

Kevin, muchas gracias por tus sugerencias!!
Ya estoy revisando los links, de todas formas estoy con el mismo problema… mi sitio está en AS2.

Saludos!

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

Hola unijimpe, no tendrás alguna solución para los que tienen el map en as 2.0???? te lo agradecería a mil…

 

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>)