Displaying and integrating Google maps in adobe Flash

Nov 10 2009

This is a simple tutorial which explains how to incorporate Google maps in Adobe Flash with markers and controls

Get the Google maps API key

Follow the instruction from Google and get Google map API key by signing up. Click here for details. For testing the flash here is a sample API Key.

ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g

Download the Google maps API SDK for flash

You can download Google maps API SDK from here.
Unzip the file and copy map_1_9 Flash Component file to component folder of flash.
For windows copy to this location

C:\Program Files\Adobe\Adobe Flash CS3 (or your Flash version)\en (or your language)\Configuration\Components

For Mac OS X copy to this location

Macintosh HD/Applications/Adobe Flash CS3 (or your Flash version)/Configuration/Components

If you wish to make components organized make a new folder name it say Google and paste into it.

Inserting Google maps API flash component

Open new flash document (Ctrl + N)

newflash

Open Component panel, if not open click (Ctrl + F7). The Components panel will appear with a Google Maps API node. Drag Google Maps Library component to the stage and give the instance name as gmaps

flash-google-componet

Insert AS3 code for Google maps

Insert new layer and name it as actions. Select the first key frame and open the action panel (press F9) and follow the code.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
// Importing Map Controls
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.OverviewMapControl;
// Importing Map markers amd map mouse events
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;

// Creating The Map
var gmaps:Map = new Map();
gmaps.key = "ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g";
// Setting the size to component to stage size
gmaps.setSize(new Point(stage.stageWidth, stage.stageHeight));
gmaps.addEventListener(MapEvent.MAP_READY, onMapReady);
// Adding component to stage
this.addChild(gmaps);

function onMapReady(event:MapEvent):void {
// Setting Longitude and Latitude and the type of view
  gmaps.setCenter(new LatLng(40.68913,-74.0446), 17, MapType.HYBRID_MAP_TYPE);
// Adding zoom, position, map type and small pan window map controls
  gmaps.addControl(new ZoomControl());
  gmaps.addControl(new PositionControl());
  gmaps.addControl(new MapTypeControl());
  gmaps.addControl(new OverviewMapControl());
// Loading the Xml marker file
  xmlMarkerLoader();
}

function xmlMarkerLoader(){
 function loadXML(e:Event):void{
	 XML.ignoreWhitespace = true;
	 var mapMarker_xml:XML = new XML(e.target.data);

	 for (var i:Number = 0; i < mapMarker_xml.location.length(); i++){

		 var latlng:LatLng = new LatLng(mapMarker_xml.location[i].lat, mapMarker_xml.location[i].lon);
		 var tip = mapMarker_xml.location[i].name;
		 var myTitle:String = mapMarker_xml.location[i].title;
		 var myContent:String = mapMarker_xml.location[i].content;
		 // Calling Marker
		 gmaps.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));
	 }

	 // 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 {
				gmaps.openInfoWindow(event.latLng, new InfoWindowOptions({titleHTML: ""+myTitle, contentHTML: ""+myContent }));
				});
               return i;
      }
 }

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