Displaying Google Maps in Flash - Page 1
       by gaurav pandey  |  4 May 2009

You have probably seen Google Maps running in your browser, and it was probably displayed using a combination of HTML and JavaScript (AJAX) to do its thing. While HTML and JavaScript are used by default, the actual data is flexible enough to be displayed in a whole host of different technologies...such as Flash!

 At the end of the tutorial, you will have learned how to incorporate the Google Maps API to display the direction between two points using nothing but ActionScript:

With the map, you have the ability to pan around. More traditional navigation methods such as zooming in and such hasn't been implemented in this example, but that is OK for this introductory tutorial.

Getting Everything Set Up
Creating an app like this seems complicated, but it is actually fairly simple. You just need to get an API key and download the Google Maps API to the correct location on your computer.

To sign up for a Google Maps API Key, click here and follow the instructions on Google's site. If you don't feel like using your own key, for testing purposes, you can use the one that I have created:

ABQIAAAAwk8Uo9ZkiYLo0bvznt5qbxSIV5tnHDoabJrKPiVale6sm5IJBBS2C3Ww9LHmZUrLpe104a4FUKqH9g

Be sure to copy the entire string from the above text field, and do remember to get your own key before creating a production application, for the above key will only work when you are testing from inside Flash via Ctrl + Enter. The key is tied to the domain this app will be displayed on, so my key will certainly not work, so click here.

Next up, you need to download the Google Maps API for Flash. Once you have downloaded this file, extract its contents to a location you can easily browse through and access. There will be two folders - docs and lib. Look inside your lib directory, and find the map_1_9 Flash Component file:

[ the extracted files on my disk ]

Copy this file. Now that you've copied the map_1_9 file, where do you go to paste it? The place you go to paste depends on the version of Flash you are using. For Flash CS3, paste your copied file into the following location: C:\Program Files (x86)\Adobe\Adobe Flash CS3\language\Configuration\Components

For Flash CS4, paste your copied file into this location: C:\Program Files (x86)\Adobe\Adobe Flash CS4\Common\Configuration\Components\

I created a folder called Google Maps API and pasted my component file in there. You don't have to do that, but it does help keep your components organized. Flash will not care either way.

[ the GoogleMapsLibrary Component ]

This is probably pretty anticlimatic, for all I really wanted to show you was that the Google Maps API is recognized by your application. Let's do some slightly more interesting things on the next page!

Onwards to the next page!

1 | 2