Integrate Google Maps into Flash CS4

An article by Fahadh    1 Comment

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. In this tutorial you’ll learn how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it’s extremely powerful.

1 [DOWNLOAD THE GOOGLE MAPS API]
The first step in adding Google Maps to your Flash application is to first download the necessary files. Go to http://code.google.com/apis/maps/documentation/flash in your browser. This site is where you can find all of the information on using Google Maps inside of Flash, so be sure to bookmark it. Find the section on the right called “How do I start?” and download the Software Development Kit (SDK) using the link posted in the second item on the list. Unzip the downloaded file to your desktop.

2 [INSTALLING THE API]
In the sdk/lib folder of the SDK you’ll find a file named “map_1_9.swc.” Copy (Command-C [PC: Ctrl-C) this file to the clipboard. If you’re on a Mac navigate to [user folder]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components (create a new folder named “Components” if you don’t already have one). If you’re on a PC navigate to [user folder]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components (create a new folder named “Components” if you don’t already have one). Create a new folder named “Google” and paste (Command-V [PC: Ctrl-V) the SWC file into this new directory. If you had Flash open you’ll need to restart it before trying to work with the API.

3 [OPEN THE FLA FILE]
Download the tutorial files for this article at www.layersmagazine.com. Open the map.fla file in Flash CS4. In the Library there’s a movie clip of the Adobe logo that you’ll be placing on the map at the Adobe offices in San Francisco. There’s a single layer in the Timeline named “actions.” The actions layer is where you’ll be placing all the ActionScript code for this project. This project will be built entirely using ActionScript and you won’t be adding anything to the Stage.

4 [ADD THE GOOGLE MAPS COMPONENT]
Before you can start using Google Maps you first need to add the component to your application. Open the Components panel by selecting it from the Window menu. You should see the Google folder that you created earlier. Twirl down the folder and you should see the GoogleMapsLibrary component. Drag the component into the Library to add it to your project. You’ll now be able to access all of the Google Maps APIs.

5 [CREATE A BASIC MAP]
Select the first keyframe of the actions layer and open the Actions panel (Window>Actions). Enter in the code shown in the image above. The first three lines import the Google Maps libraries. Line 5 creates a new instance of the Map class, which is the main object that creates the map. Line 6 is where you’ll need to add your API key, which we’ll get to in the next step. Line 7 sets the size of the map to the same size as the Flash stage. Finally, line 8 adds the map to display list so we can see it.

6 [GET AN API KEY]
One of the things that you have to do when using Google Maps is to get an API key. Even though it works without one, you need to get one to prevent breaking the license agreement. Go back to the API website and click on the link in the first item in the list. Agree to the terms and then enter in the website that you’ll be using the map on. If you don’t know, just enter http://localhost. Click the Generate API Key button and then copy the resulting key to the clipboard (it will ask you to sign into your Google Account if you’re not already signed in). Now replace MY_API_KEY in the code with your key.

7 [TESTING THE MAP]
Go ahead and test your application (Control>Test Movie) to make sure that you’re seeing the basic map. You should see a zoomed out map of the world but without any of the controls, such as a zoom slider or map type selector, that you’re used to seeing on Internet maps. These will be added in the next step. You must wait until the map ready event fires before adding any controls to the map. Enter in the highlighted code shown above into the Actions panel. The onMapReady function is where you’ll begin manipulating the map.

8 [ADD SOME CONTROLS]
Now you’re ready to begin adding some controls to the map so users can manipulate it. Add the highlighted code into the Actions panel as shown above. The first line of code adds a new ZoomControl to the map. This adds a slider that the user can use to zoom in and out on the map. The second line adds a MapTypeControl that allows users to select between the different map types available such as satellite or hybrid. Press Command-Return (PC: Ctrl-Enter) to test the movie and try out the map controls.

9 [CENTER THE MAP]
At this point the map is centered on the world map and is zoomed all the way out. Now you’ll reposition the map so that it’s centered at the Adobe offices in San Francisco. Enter in the above highlighted code into the Actions panel. To the setCenter method we send in three items: the latitude and longitude of the Adobe office, the desired zoom level, and the type of map. The user can, of course, change these things, but this is how we want the map to show at the start. Test your application to see the new center.

10 [HOW TO FIND LATITUDE AND LONGITUDE]
You may be wondering how I found the coordinates for the Adobe office. There are numerous ways to get this information. The easiest is to first search for an address on the Google Maps site (http://maps.google.com). Once the map is centered on the address, simply type javascript:void(prompt(”,gApplication.getMap().getCenter())); in your browser’s address bar and hit Return (PC: Enter). You’ll see a pop-up with the coordinates that you can paste into Flash. The Google Maps API has the ability to do this directly from Flash, but that’s out of the scope of this tutorial.

11 [ADD A MARKER]
Enter the above highlighted code into the Actions panel. The first line creates a new Marker object at the Adobe offices. There are many different options available for how the marker will look and behave. For now we’ll just keep everything at their default values. The second line of code adds the new marker to the map. Test the application to see the default marker. Now wherever you move the map, the marker will always be visible at the Adobe office. In the next step we’ll customize this marker with the Adobe logo.

12 [CUSTOMIZE THE MARKER]
In the Library panel you’ll see a movie clip named “marker.” Double-click on it to enter edit mode. You’ll see an image of the Adobe logo surrounded by a custom marker graphic. It’s important that the point of the marker is on the crosshairs of the registration point. This movie clip has been set up with a class name of “marker” so we can attach it at runtime. Click on Scene 1 at the top left of the Stage to exit edit mode. Add the highlighted code to the Marker object to tell it to use the custom marker (note the changes made at the end of line 16). Test your application.

13 [OTHER MARKER OPTIONS]
In the last step you customized the look of the marker but there’s much more that you can do. Since the marker is just a regular movie clip, it can contain animation, video, or any other type of interactive content that’s supported in Flash. Markers are not the only types of overlays either. You can draw lines and shapes and add them to the map to create rich, interactive mapping applications.

14 [WHERE TO GO FROM HERE]
In this tutorial you’ve created a very simple mapping application in Flash but have only scratched the surface of what’s possible with the Google API. There’s a full geocoding API that allows you to get latitude and longitude coordinates for points on the map or from addresses. You can also get directions between two points or addresses on the map. You can find the full API reference by clicking on the link in item 4 on the API website that you downloaded the SDK from.