Implement a Map Using the Google Map API for Flash

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in May, 2009.

In this tutorial we'll see how we can create a map in Flash using the Google Map API. We'll cover some of the basics such as zooming in on the map and adding some controls. We'll also look at how we can add markers to our map and how we can load data using an XML file.

Step 1: The Google Map API Key

Before we can start creating our map in Flash we need to setup a few things. To use the Google Map API you will need a personal API Key. To get this go to http://code.google.com/intl/nl/apis/maps/documentation/flash/ and click the link on the right side of the page "Sign up for a Google Maps API Key".

Step 2: Sign Up

Clicking the "Sign up for a Google Maps API Key" link brings us to the next page where we can generate our personal API Key. Scroll down the page, agree with the terms and conditions (you could read these too if you're really interested) and add the url of the website where you want to use the application (you will need a different API Key for every domain where you want to place a map). After that, click "Generate API Key".

Step 3: Save It!

Now you'll see your personal API Key for the selected domain. Copy the API Key and paste or save it somewhere as we'll need it very soon.

Step 4: The Google Map SWC Component

Ok, now we have our API Key but we still need one more thing before we can start to create our map in Flash. We need to download the Google Map SWC component. To do so, go to http://code.google.com/intl/nl/apis/maps/documentation/flash/ and click "Download the Google Maps API for Flash SDK". A popup window will appear, choose to Save the "sdk.zip" file and download it.

Step 5: Install the SDK Component

Now we need to install the SDK component to use it in Flash. To do so, navigate to the location where you saved the Google Maps API for Flash SDK and find the non-Flex version of the interface library. In my case this is (lib/map_1_9.swc). Now copy the "map_1_9.swc" file.

Step 6: Folders

Afterwards, if you have Flash currently open, quit the application and search for this folder:

(Windows) C:\Program Files\Adobe\Adobe Flash CS3 (or your Flash version)\en (or your language)\Configuration\Components
(Mac OS X) Macintosh HD/Applications/Adobe Flash CS3 (or your Flash version)/Configuration/Components

Inside that folder create a new folder named "google" and Paste the "map_1_9.swc" file inside it. Flash is now set up to support the Google Maps API for Flash.

Step 7: New ActionScript 3.0 File

Ok. That's all done and dusted! Now we can finally start creating our map in Flash. Start Flash CS3 or CS4 and create a new ActionScript 3.0 file, default stage size (550 x 400).

Step 8: Save It!

Now simply save the file; hit "Ctrl+S" or go to File > Save in the menu. Save it to the location you want and name it whatever you want. I'll name it "google_map".

Step 9: The GoogleMapsLibrary

Open the Components panel "Ctrl+F7" or click Window > Components in the menu and drag the GoogleMapsLibrary onto the stage.

Step 10: The Actions Layer

Create a new layer, double-click on its name and rename it to "actions".

Step 11: Import..

Now with the actions layer selected open the actions panel by hitting "F9" or clicking Window > Actions. Add these lines of code:


import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

Step 12: Create the Map

Now let's add the map! When we load the movie this piece of code will create a map and set it on the stage. Inside the code we see the variable "map.key"; here we have to add our personal API Key. Open the file where you saved the API Key and Copy/Paste it into the variable.


// Create The Map
var map:Map = new Map();
map.key = "Your API Key here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
this.addChild(map);

Step 13: Test Movie

Ok, now go and test your movie "Ctrl+Enter" or click Control > Test Movie in the menu and you will see that you've just created a map.

Step 14: Controls

At this stage we can only drag the map around. That's not really what we're looking for, so let's add some controls to the map which will allow us to zoom and move about. To add controls to our map we need to update our code. First we need to call a few extra classes:

1
2	import com.google.maps.controls.ZoomControl;
3	import com.google.maps.controls.PositionControl;
4	import com.google.maps.controls.MapTypeControl;

After that we need to create a new function to call once the map is created. We name that function "onMapReady()". Inside this function we add our controls to the map.


function onMapReady(event:MapEvent):void {
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

Now we just need to call the "onMapReady()" function whenever our map is loaded. To do that we need to add a extra line to our first piece of code.

1
2	map.addEventListener(MapEvent.MAP_READY, onMapReady);

Our full code now looks like this:


import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;

// Create The Map
var map:Map = new Map();
map.key = "Your API Key Here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

Step 15: More..

Now test your movie "Ctrl+Enter" or click Control > Test Movie in the menu and you will see our map now has controls. We're able to zoom in and even change our map to Satellite, Hybrid and Terrain view. That's very cool but we want more..

Step 16: Latitude and Longitude

Let's zoom into a specific location once our map loads for the first time. Say I'm a surfer and I want to create a map of the surf spots in my home town. We don't want people to manually have to zoom in and search for the area, so we'll fix that in a sec. The only thing we have to add is one small line of code to our "onMapReady()" function.

1
2	map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

What we actually do here is create a new LatLng point on the map. First we specify 2 values: the "latitude" and the "longitude" from our region. Then we set our zoom value; I opted to use 9. The zoom ranges from 0 to about 16 (this can vary from region to region). Lastly we set the map type; I opted here for the HYBRID_MAP_TYPE.

Our "onMapReady()" function now looks like this:


function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

If we test our movie you can see that lots of things have changed. Once the map is loaded we zoom into our specific region and our map type is now Hybrid. To determine the latitude and longitude for your region you could use Google Earth or an online tool like http://itouchmap.com/latlong.html.

Step 17: Add a Marker

Now let's add a simple marker to our map. Just add 2 more classes:

1
2	import com.google.maps.overlays.MarkerOptions;
3	import com.google.maps.overlays.Marker;

and update the "onMapReady()" function with this piece of code:


var marker:Marker = new Marker(
							     new LatLng(28.74659, -13.93447)	     		           
		     		            );
map.addOverlay(marker);

Again we create a LatLng point with some specific latitude/longitude values for our location. Then we call the "addOverlay()" to put our marker on the map. Our full code now looks like this:


import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;

// Create The Map
var map:Map = new Map();
map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  
  var marker:Marker = new Marker(
							     new LatLng(28.74659, -13.93447)	     		           
		     		            );
  map.addOverlay(marker);
}

Go and test your movie. You'll see our marker on the map.

Step 18: Still More..

Now let's take everything to the next level. We have a map with zoom controls and a marker. What more do we need? Well I'll tell you. We need MORE MARKERS, TOOLTIPS, INFO WINDOWS and we want to load everything from an XML file. So let's get started. First we'll create our XML file. Open your Favorite XML editor and create this file:


<?xml version="1.0" encoding="utf-8"?>
 <map_xml>
 
  <location>
   <lat>28.74659</lat>
   <lon>-13.93447</lon>
   <name_tip>Majanicho</name_tip>
   <title_tip><![CDATA[Majanicho]]></title_tip>
   <content_tip><![CDATA[Majanicho is a very good surf spot for longboarding it offers very long rides.]]></content_tip>
  </location>
  
  <location>
   <lat>28.738764</lat>
   <lon>-13.955126</lon>
   <name_tip>Derecha de los Alemanes</name_tip>
   <title_tip><![CDATA[La Derecha de los Alemanes]]></title_tip>
   <content_tip><![CDATA[La Derecha de los Alemanes is another very good spot for longboarders but shortboarders will have some epic days out here to.]]></content_tip>
  </location>
  
  <location>
   <lat>28.741022</lat>
   <lon>-13.951821</lon>
   <name_tip>The Bubbel</name_tip>
   <title_tip><![CDATA[The Bubbel aka La Derecha]]></title_tip>
   <content_tip><![CDATA[The Bubbel is one of the most famouse waves in Fuerteventura its a really hollow reef break and it has some epic barrels on offer.]]></content_tip>
  </location>
 
 </map_xml>

Step 19: onMapReady()

Once our map is loaded we need to pull the XML data into our Flash file. Create a new function named "xmlLoader()" and we'll call that function in our "onMapReady()" function. First we need to delete the code we added to create our marker just a few steps before. Then we'll add the line to call the "xmlLoader()" function. Our "onMapReady()" function should now look like this:


function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  xmlLoader();
}

Next we want to create the "xmlLoader()" function.

1
2	function xmlLoader(){
3
4	}

In the next step we'll fill it up.

Step 20: Load XML

Ok here we are. Let's load our XML data. Inside the "xmlLoader()" function we add this code:


 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
 }// end of loadXML function

 var xmlLoader:URLLoader = new URLLoader();
 xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 xmlLoader.load(new URLRequest("xml.xml"));

This will get us our XML data to work with.

Step 21: Loop Through the Locations

As we have 3 locations in our XML file we'll need to create a "For" loop and store all the data in some Arrays. Inside our "loadXML()" function we add this piece of code to create the For loop:


for (var i:Number = 0; i < map_xml.location.length(); i++){
		 trace(map_xml.location[i].title_tip);
		 		
	 }// end of for loop

To test if things are working for us we'll trace the "title_tip" variable. Test your movie and you should get the following output:

Step 22: Variables

Next we have to create some variables to store our data loaded from the XML file. Inside our For loop we add these variables:


var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
var tip = map_xml.location[i].name_tip;
var myTitle:String = map_xml.location[i].title_tip;
var myContent:String = map_xml.location[i].content_tip;

If you want you can delete the "trace()" line we used before. Our For loop now looks like this:


for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;		 		
	 }// end of for loop

Step 23: Additional Markers..

Ok! We need to add a marker to the map for each of our three locations. Now that we have all the data stored in our variables we'll have to create a new function named "createMarker()". Inside our "loadXML()" function we add this new function:


// Add Markers On The Map
function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
               return i;
}// end function createMarker

We still need to call this "createMarker()" function in order to see our markers on the map. To do that we need to add a extra line of code at the end of our For loop:

1
2	map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));

This is what our "loadXML()" function should look like now:


function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
	 
	 for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;
		 
		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }// end of for loop
	 
	 // Add Markers On The Map
	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
               return i;
      }// end function createMarker
 }// end of loadXML function

Test your movie and you will see the markers on the map! Note that our 3 points are very close to each other so you may want to zoom in a bit to see them more clearly.

Step 24: Info Windows

Finally we need to add some Info Windows. If we click on the markers we'll then get some information about their locations. To do so we need to add 2 more classes:

1
2	import com.google.maps.InfoWindowOptions;
3	import com.google.maps.MapMouseEvent;

..a little more code to our "createMarker()" function..


i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
        {
         map.openInfoWindow(event.latLng, new InfoWindowOptions({
                                      titleHTML: ""+myTitle, 
                                      contentHTML: ""+myContent
                                                               }));
																			  											 
		});

Now test your movie and you'll see that our markers are now clickable and that they create an info window with text from the XML file.

Conclusion

Thats it! Take a look at our final code:


import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

// Create The Map
var map:Map = new Map();
map.key = "Your API Key Here";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
  xmlLoader();
}

function xmlLoader(){
 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true; 
	 var map_xml:XML = new XML(e.target.data);
	 
	 for (var i:Number = 0; i < map_xml.location.length(); i++){
		 
		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);
		 var tip = map_xml.location[i].name_tip;
		 var myTitle:String = map_xml.location[i].title_tip;
		 var myContent:String = map_xml.location[i].content_tip;
		 
		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }// end of for loop
	 
	 // Add Markers On The Map
	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var i:Marker = new Marker(
										 latlng,
										 new MarkerOptions({ 
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                           })
										 );
			   i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 
																			  {
																			  map.openInfoWindow(event.latLng, new InfoWindowOptions({
																																	 titleHTML: ""+myTitle, 
																																	 contentHTML: ""+myContent
																																	 }));
																			  											 
																			  });
               return i;
      }// end function createMarker
 }// end of loadXML function

 var xmlLoader:URLLoader = new URLLoader();
 xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 xmlLoader.load(new URLRequest("xml.xml"));
}

Test your movie Ctrl+Enter to check the outcome. You'll have your own xml based Flash map! You can use it on your website, edit the locations as you want, it's up to you. Go ahead and experiment, if you have any cool results be sure to share them with us.

I hope you liked this tutorial, thanks for reading!