How to use Google Maps API with Flash AS3

核心提示：I was playing with Google Maps API for Flash when I noticed the tutorials in the official page are somehow not that smart, so I am going to clarify some things.

I was playing with Google Maps API for Flash when I noticed the tutorials in the official page are somehow not that smart, so I am going to clarify some things.

Follow these simple steps:

Sign up for a Google Maps API Key at this link. Once you submit the form, ignore everything you see on the page (it refers to javascript version), just write down the key.

Download the Google Maps API for Flash SDK at this link. Inside the archive you will find a lib directory with a file called map_1_8a.swc inside. The official Google docs refer to a map_1_7.swc file, so this file could be updated anytime. Just refer to the map_xxx.swf, no matter the version you are downloading.

Install the API SWC component to your Flash creating a Google folder with map_xxx.swf inside.

The path to this folder varies from CS3 to CS4, it should be placed in

\en\Configuration\Components

if you are running CS3 (watch out the en, it may differ according to your language) and

\Common\Configuration\Components

if you are running CS4.

Create a new Flash file and open the components window. You can find this window on Window -> Components menu. You should find a Google -> GoogleMapsLibrary compoent. Drag in on stage wherever you want (you will set its position later).

Don’t worry about the size.

Now it’s time to write the class.

Here it is:

package　{
　import　flash.display.Sprite;
　import　flash.events.Event;
　import　flash.geom.Point;
　import　com.google.maps.LatLng;
　import　com.google.maps.Map;
　import　com.google.maps.MapEvent;
　import　com.google.maps.MapType;
　public　class　googlemap　extends　Sprite　{
　　var　map:Map　=　new　Map();
　　public　function　googlemap()　{
　　　map.key　=　"ABQIAAAAF5GHwa7hgxz5etSP-jJVwhSK_rP-_Usta8fEpiVtC50gLzF69hQ6_VK0zgpArekpmdsRCJK2Vnp60A";
　　　map.setSize(new　Point(stage.stageWidth,　stage.stageHeight));
　　　map.addEventListener(MapEvent.MAP_READY,　onMapReady);
　　　this.addChild(map);
　　　function　onMapReady(event:Event):void　{
　　　　map.setCenter(new　LatLng(45.436319770227,12.33638048172),　13,　MapType.NORMAL_MAP_TYPE);
　　　}
　　}
　}
}

Line 4: importing the Point class in order to use a point later. This is not explained in the official tutorial as it writes the code directly into the timeline.

Lines 5-8: importing Google libraries

Line 10: declaring the new map type

Line 12: inserting the key API

Line 13: setting the size of the map to fill the entire stage, using the Point class

Line 14: listener for the map to be ready

Line 15: adding the map itself

Lines 16-18: once the map is ready, show us Venice!

Here it is:

http://www.emanueleferonato.com/2008/12/01/how-to-use-google-maps-api-with-flash-as3/

If you give me good feedback, I’ll show you how to create custom controls and some more tricks.