View an Example of this article before you get started.

Google has just released a Flash edition of the Google Maps API. In this tutorial you will how to install the necessary components and build a very basic map.

This tutorial will be done using Adobe Flex Builder, but you are also able to use the Flex SDK if you prefer. Google has information regarding that process on their site.

Start off by downloading the Google Maps SDK and applying for a developers API key. Once you have both of these pieces, you can start setting up your work environment.

Locate the "sdk.zip" file that you downloaded (normally on your Desktop) and unzip the contents. Inside the "sdk/lib" directory you will find a map_flex_1_1.swc file. Copy this file to a known location on your computer. Most often your documents directory. This file will be loaded into Flex later on in the process.

Now that you have the SWC moved out of the sdk directory, start Flex Builder and create a new project (File > New Flex Project).

Once the "GoogleMaps Sample" project is created, you need to include the maps swc you downloaded. To do this you right click on the project entry in the "Flex Navigator" and choose Properties. Choose "Flex Build Path" and then click "Add SWC.." in the Properties dialog box. In this new dialog, click "Browse" and navigate to where you copied the swc file. With the swc file selected, click "Open" and "Ok". Then finally click "Ok" one more time to save the changes to the project.

Now that the Google Maps code is available to Flex, you can start building the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
		<![CDATA[
				
		]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>

The above code set an event on the Application tag, as well as a width and height attribute. The UIComponent will be where the map is loaded into. You must give this component a unique ID, otherwise Flex will be unable to reference it.

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

Now that the display portion of the code is completed, the next step is to load in the necessary classes for the map.

private var gMap:Map;

Then define a private variable that will reference the map instance.

private function init():void
{
	gMap = new Map();
	gMap.key = "{YOUR_API_KEY_HERE}";
	gMap.width = 600;
	gMap.height = 400;
	gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
	
	mapContainer.addChild(gMap);
}

The next step is to define the init() function, which is called when the Flex app is loaded. The function creates a new map instance and sets the required properties. Once the properties are set, you need to add an event handler for when the map is fully loaded and finally attach the map instance to the container.

private function mapReadyHandler(e:MapEvent):void
{
	gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
	gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
}

The last bit of code is the event handler that is called when the map is fully loaded. This bit of code centers the map coordinates and sets the size to the width and height of the application.

You can now test the application in debug mode. If you run the application locally the map will be overlayed with "DEBUG", as shown below. However, all other functionality will exist.

In case you didn't notice, Google shipped the documentation for these classes along with the SDK, so start digging and build cool map-based applications.

Note: At the time of this writing Google Maps cannot be used in AIR applications due to a TOS (terms of service) violation. However, you can show your support on this feature request over on the Issue tracker.

Here is the complete application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
	<![CDATA[

	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.LatLng;
		
	private var gMap:Map;

	private function init():void
	{
		gMap = new Map();
		gMap.key = "{YOUR_API_KEY_HERE}";
		gMap.width = 600;
		gMap.height = 400;
		gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

		mapContainer.addChild(gMap);
	}
	
	private function mapReadyHandler(e:MapEvent):void
	{
		gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
		gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
	}
		
	]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>

Hope you enjoyed this article, stay tuned for more great Flex Builder related tutorials.