How to Use Google Maps in Flash

Add a custom Google Map to Flash websites to give the visitor a unique experience.

Many websites feature a Google Maps location map to show their visitors where various points of interest are located. The Google Map can be included in a Flash website using various lines of code to control the map's functions, the user interface options, and various other layovers and special effects. The coding part of integrating the map is fairly extensive because of the high level of customization available. However, adding the basic default map to the Flash site is not overly complicated.

Things You'll Need

• Flash CS3+
• Google ID
• Google API key
• Google SDK file

Instructions

Preparation

1. Open a web browser and navigate to the Google Code: Maps page (see Resources).

2. Click on "Sign Up for an API Key" in the left navigation bar.

3. Scroll down to the bottom to check the terms and conditions box and enter the exact URL of the domain where the map will be hosted. Click "Generate API Key."

4. Copy the API keys to a Notepad document for later use.

5. Download the SDK files from the Google Code page (see Resources) and unzip the file to the desktop.

6. Open the googleMapsApi/lib/ folder on the desktop and copy the map_#_#.swc file to the appropriate Flash installation folder. For CS3 use: C:\Program Files\Adobe\Adobe Flash CS3\Language\Configuration\Components\. For CS4 use: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components\.

Integrating the Map into Flash

1. Open a new Flash (Actionscript 3.0) document.

2. Select "Window," "Component" and choose "Google" from the available options.

3. Drag the "GoogleMapsLibrary" component to the stage, and center it using the "Align" panel which can be accessed by pressing CTRL+F3.

4. Press F9 to open the "Actionscript Panel" and import the map libraries by entering the following:
   import com.google.maps.LatLng;
   import com.google.maps.Map;
   import com.google.maps.MapEvent;
   import com.google.maps.MapType;

5. Identify the map to Flash with the unique API code by entering the next lines of code after the libraries import:
   var map:Map = new Map();
   map.key = "your_api_key";

6. Establish the size of the map:
   map.setSize(new Point(stage.stageWidth, stage.stageHeight));

7. Assign event listeners to the map:
   map.addEventListener(MapEvent.MAP_READY, onMapReady);

8. Target the map to a specific location when it is first initialized:
   function onMapReady(event:MapEvent):void {
   setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
   }

9. Attach the map to the Flash movie for export:
   this.addChild(map);

10. Press "CTRL"+"Enter" to test the finished movie and see the basic Google map.

Tips & Warnings

• This is the full code:

• import com.google.maps.LatLng;

• import com.google.maps.Map;

• import com.google.maps.MapEvent;

• import com.google.maps.MapType;

• var map:Map = new Map();

• map.key = "your_api_key";

• 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(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);

• }

References

• Google Code Tutorial

Resources

• API Key Generator
• SDK Download