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

Tutorial Actionscript 3 – How To Google Maps API

The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps (just like on the http://maps.google.com web page) and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

In this post I will explain how to use the Google Maps API.

1.- The first thing that you need is to get your API KEY
Go to http://code.google.com/apis/maps/signup.html

After read and accept the terms and conditions and give your domain name. You will get your key.

googleMaps

2.- The next step is download the library kit of google maps for actionscript and flex.
To download the kit CLICK HERE
The kit contains 2 .swc files with the library.

3.- With the key and api we are ready to start with the code. Create a new project and config the library path to read the swc file downloaded. In your Flash IDE press edit-preferences-actionscript- actionscript 3 and add the folder with your swc files.

4.- THE CODE.

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

With this simple code we have our example working.

googleMaps

I hope this post help you to understand how works the google maps API. Any question or suggestions are welcome

VIEW EXAMPLE
DOWNLOAD EXAMPLE



Categories: Actionscript 3, Flash Tags:
  1. November 18th, 2009 at 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
    December 13th, 2009 at 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. December 13th, 2009 at 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