How to use Google Maps API in flash

Category: home/ActionScript
Date: 2010-08-19
Google offers a lot of free tools for us. One of them is really useful and easy to work with - GoogleMaps API. In this article I will show you how to import a map in Flash and place an icon in a specific place.

First of all you have to download the necessary libraries. You can do that from here. In the zip file you will find "map_1_18.swc" file which you have to import in Flash. Basically .swc files are designed to be used in Flex, but you can still add them in any .fla file. Copy the file to your Components directory. For Windows(XP) users the folder is located here:
C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components

Note that there is a separate directory for each language supported in Flash CS3. Place the SWC within whatever language directory you will be authoring Flash content. In other words {language} in the line above could be "en" for example.

For Mac users:
Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

You should restart Flash and open the Component panel (Ctrl+F7). The GoogleMapsLibraries should appear there.

How to use Google Maps API in flash

Drag the GoogleMapsLibraries component to your Library panel (F11). Now all the necessary classes are automatically added and they are available for use. Here is the code of the application:
package lib.document {
	import com.google.maps.overlays.Marker;
	import com.google.maps.overlays.MarkerOptions;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.display.MovieClip;
	
	public class App extends MovieClip {
		
		private var _map:Map;
		private var _icon:MovieClip;
		
		public function App(){
			trace("App");
			
			// creating the icon that will be placed on the map
			_icon = new Icon();
			_icon.buttonMode = true;
			_icon.mouseChildren = false;
			_icon.gotoAndStop(1);
			// setting events of the icon's MovieClip
			_icon.addEventListener(MouseEvent.MOUSE_OVER, onIconOver);
			_icon.addEventListener(MouseEvent.MOUSE_OUT, onIconOut);
			_icon.addEventListener(MouseEvent.CLICK, onIconClick);
			
			// creating the map
			_map = new Map();
			// setting the api key
			_map.key = "ABQIAAAAfBguyoRoviza91LOZY2cvhSp6DGTZp--f0ai0VME2kXYI48iIRS4M0numGI4YqWLBJHFT_n38jcACA";
			// setting the size of the map
			_map.setSize(new Point(500, 500));
			// adding events 
			_map.addEventListener(MapEvent.MAP_READY, onMapReady);
			_map.addEventListener(MapEvent.MAP_INITIALIZE_FAILED, onMapFailed);
			// adding the zoom control
			_map.addControl(new ZoomControl());
			// adding the position control
			_map.addControl(new PositionControl());
			// adding the map on the stage
			addChild(_map);
			
		}
		// this function calls when the map is loaded
		private function onMapReady(e:MapEvent):void {
			trace("onMapReady");
			// setting the center of the map. You should know the exact coords of the place. For example latitude=43.214597 and longitude=27.915716 is Varna, Bulgaria
			_map.setCenter(new LatLng(43.214597, 27.915716), 14, MapType.NORMAL_MAP_TYPE);
			// setting the zoom of the map
			_map.setZoom(5);
			// enable the scroll wheel 
			_map.enableScrollWheelZoom();
			// enable the continuous zoom
			_map.enableContinuousZoom();
			// adding the icon on the map
			_map.addOverlay(new Marker(new LatLng(43.214597, 27.915716), new MarkerOptions({icon:_icon})));
		}
		// this function calls when the map loading failed
		private function onMapFailed(e:MapEvent):void {
			trace("onMapFailed");
		}
		private function onIconOver(e:Event):void {
			trace("onIconOver");
			e.target.gotoAndStop(2);
		}
		private function onIconOut(e:Event):void {
			trace("onIconOut");
			e.target.gotoAndStop(1);
		}
		private function onIconClick(e:Event):void {
			trace("onIconClick");
		}
	}
}


Please notice that you should have a valid key(line:37) to be able to use the api. You should generate your own key depending on your domain. It's free and you can do it here.

The result could be seen here. Source files are available here. A detailed information regarding the API is located here.


blog comments powered by Disqus