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.
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.
-
import com.google.maps.*;
-
-
var lat:Number = -12.04144;
-
var lon:Number = -77.023188;
-
var zoom:int = 17;
-
-
var map:Map = new Map();
-
map.key = "tu_api_key";
-
map.setSize(new Point(500, 350));
-
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);
-
}
En el ejemplo hemos creado un mapa de 500x350 pixels con un zoom de 17 y estamos mostrando el mapa normal.
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:
-
import com.google.maps.*;
-
import com.google.maps.controls.*;
-
-
var lat:Number = -12.04144;
-
var lon:Number = -77.023188;
-
var zoom:int = 17;
-
-
var map:Map = new Map();
-
map.key = "tu_api_key";
-
map.setSize(new Point(500, 350));
-
map.addEventListener(MapEvent.MAP_READY, onMapReady);
-
this.addChild(map);
-
-
function onMapReady(event:Event):void {
-
map.setCenter(new LatLng(lat,lon), zoom, MapType.HYBRID_MAP_TYPE);
-
map.addControl(new PositionControl());
-
map.addControl(new ZoomControl());
-
}
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.
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.
-
import com.google.maps.*;
-
import com.google.maps.controls.*;
-
import com.google.maps.overlays.*;
-
-
var lat:Number = -12.04144;
-
var lon:Number = -77.023188;
-
var zoom:int = 17;
-
-
var map:Map = new Map();
-
map.key = "your_api_key";
-
map.setSize(new Point(500, 350));
-
map.addEventListener(MapEvent.MAP_READY, onMapReady);
-
this.addChild(map);
-
-
function onMapReady(event:Event):void {
-
map.setCenter(new LatLng(lat,lon), zoom, MapType.SATELLITE_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: "Plaza de Toros de Acho", content:"Lima, Perú"}));
-
});
-
map.addOverlay(marker);
-
}
Ahora tenemos un marcador en nuestro mapa y al hacerle click mostramos un mensaje personalizado que puede indicar el lugar que estamos visualizando.
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.
- Google Maps API for Flash - Flash CS3 Tutorial
- Google Maps API ActionScript Reference
- Google Maps for Flash - Articles
Posts Relacionados
Comentarios Total 15 comentarios
Publicado: 05/10/2009 2:39 am
[...] Read the rest here: Insertar Google Maps en Flash [...]
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 ^^
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.
Publicado: 08/10/2009 10:36 am
[...] Enlace: Como insertar google maps en flash [...]
Publicado: 12/10/2009 8:44 am
Genial metodo!, agradezco muchisimo la información.
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…
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.
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?
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) [...]
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?
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.
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 …
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”…. =(
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.
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!