Displaying Google Maps in Flash Using ActionScript 3.0

By Blue_Chi | Flash CS5 | ActionScript 3.0 | Intermediate

Using real interactive maps is one of the best ways to to illustrate location. This might be a cumbersome task if you had to create the whole map from scratch, luckily a number of companies such as Google and Yahoo have opened up the API to their maps and allow 3rd party developers to take advantage of these maps in their own projects. This tutorial will teach you the basics on how to display a Google Map in a Flash AS3 project to show the exact location of a place and to let users explore that area. This will be done by using the Google Maps API.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

This is an intermediate level tutorial that requires you know the basics of AS3 such as variables, functions, and event handling. Our tutorial will only teach you the basics on how to use a Google Map, you would have to explore the documentation of the API yourself in order to learn how to perform more advanced tasks.

Our tutorial will be divided into the following sections:

  1. Setting up the Google Maps component
  2. Basic display of the map
  3. Inserting a marker and the map controls

Setting up the Google Maps component

Google allows developers to make use of its maps data through a set of available APIs which are accessible through a downloadable component. You can learn a lot about using Google Maps by reviewing the material on the pages Google has on it.

The first step in acquiring this component is to sign up for an API key. This a reference that allows Google to know that the person requesting the map data is authorized. Singing up shouldn't take you more than a few seconds if you have a Google account. Once you have your API key save that reference somewhere.


The second step requires you to download the Google Maps component. You can do that directly from here. This zip file has a a couple of folders, you are only concerned with the lib folder. Inside this folder you would find the Flash CS component and the Flex component. You will have to copy the Flash CS component (map_1_18.swc)to your components folder which is found in the Common/Configuration/Components directory inside your Flash CS application folder.

AS3 - Google Maps - Component Installed

Optional: You can create a separate folder for your component if you want your component to have its own category in the Components Panel inside the Flash authoring tool.

Once you have the component copied in this folder, open your Flash authoring tool, or restart it if you have it already opened, and create a new ActionScript 3 Flash movie. Now if you go through Window>Component and you should find the GoogleMapsLibrary component under the Standard Component Folder as shown in the image below:

AS3 Google Maps

OK, our component is now ready, and we may start using it to display Google Maps inside a project. We will start by doing that in the next page.

Summary of this Page

In this section we did the following:

  1. Registered for an API Key.
  2. Downloaded the Google Maps Component.
  3. Installed the Component for the Flash authoring tool.

In the next section we will display a map using this component.

Next Page.