Inicio > Actionscript 3, Flash > Tutorial Actionscript 3 – How To Google Maps API

Tutorial Actionscript 3 – How To Google Maps API

domingo, 19 de julio de 2009 miguelMoraleda Dejar un comentario Ir a comentarios

En esta ocacion voy a explicar brevemente como utilizar el API de google Maps.

1.- Lo primero que deben hacer es conseguir una API Key para poder conectarse.
Para solicitar la key deben ir a http://code.google.com/apis/maps/signup.html

En ese sitio, luego de leer y aceptar los terminos y condiciones deben especificar el dominio de su pagina. Para luego obtener su key.

googleMaps

2.- El siguiente paso es descargarse el kit de google con las librerias para actionscript y flex.
El kit lo pueden descargar directamente haciendo click aca
El kit contiene dos archivos .swc, uno para flash y el otro para flex. En este ejemplo yo utilize el de flash.

3.- Con la key y la api ya estamos listos para empezar a trabajar. Lo primero que deben hacer es crear un nuevo proyecto y configurar su Flash IDE para que incluya el archivo .swc de la API. Para hacer eso deben ir a edicion-preferencias-actionscript-actionscript 3 se les abrira una ventana que contiene todos los class path a sus distintas librerias y en la parte para las librerias deben agregar la carpeta que contiene el .swc de la API de google.

4.- Ahora directo al codigo.

1
2
3
4
5
6
7
8
9
10
11
var _map:Map = new Map();
_map.key = "ACA DEBEN PONER SU KEY";
_map.language = "es";
_map.setSize(new Point(stage.stageWidth, stage.stageHeight));
_map.addEventListener(MapEvent.MAP_READY, onMapReady);
_map.y = 50;
addChild(_map);
 
function onMapReady(event:Event):void {
	_map.setCenter(new LatLng(40.736072, -73.992062), 14, MapType.NORMAL_MAP_TYPE);
}

Con estas pocas lineas ya tenemos en nuestra aplicacion conectandose a google maps y mostrando el mapa del mundo.

googleMapsExample

Ojala este pequeño post le sirva a alguien. Cualquier duda, consulta o sugerencia sera bien recibida.

VER EJEMPLO
DESCARGAR EJEMPLO



Categories: Actionscript 3, Flash Tags:
  1. miércoles, 18 de noviembre de 2009 a las 01:46 | #1

    Hola Miguel, el tutorial es impresionante….ya era hora de que alguien hiciese esto tan sencillo como tú…y sobre todo gracias por compartirlo. No obstante tengo una pequeña duda. Ya lo tengo todo y funcionando en un archivo nuevo…con sus coordenadas y el zoom y todo, pero quisiera que cuando se abre el mapa por primera vez ya apareciese el marcador en el sitio de las coordenadas. Es decir que apareciese el mapa con el sitio “clavado”, porque sólo sale cuando hago la busqueda desde la barra superior. Otra cosita…se podría cambiar el marcador por otra cosa?
    Gracias y un saludo

  2. RO
    domingo, 13 de diciembre de 2009 a las 17:27 | #2

    Hola Miguel:
    Cuando construyes el mapa dentro de un archivo as y no en flash, ¿Sabes si hay algun conflicto con el evento RESIZE?
    Tengo una clase que crea un mapa. El mapa está contenido dentro de un holder(MovieClip) y este se reposiciona cuando el browser se redimensiona. Una vez que el mapa está cargado, dependiendo del zoom value en el setCenter, el holder desaparece de la pantalla.
    Tienes alguna idea de porqué?. Sabes algún ejemplo de un diseño en as3 del tipo liquidlayout que integre google maps api?
    un saludo

  3. domingo, 13 de diciembre de 2009 a las 18:56 | #3

    Mi ejemplo usa el evento resize, solo esta cambiando el tamanio, pero podria cambiar la posicion tambien. Saludos

*

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes