Google Maps API
for Flashで何か

Google Maps API for Flash

Google Maps API
for Flash

公式サイト

• 2008/5/14に公開(現在はVersion 1.5)
• ActionScript3.0で利用できる
• SWCコンポーネント形式で提供
• 現在はFlex SDKとBuilderからのみ使える
• MAP画像をbitmapとして加工・フィルタは無理！
• MAP本体（Sprite）に対する回転とかの操作はOK

非公式で一応CS3からも使える

Googleグループのフォーラムにある非公式Wrapper

JavaScript版の忠実な移植に近い

とりあえず表示してみる

とりあえず表示してみる

package
{
	import flash.events.Event;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.LatLng;
	
	public class Main extends Map
	{
		public function Main():void
		{
			super();			
			addEventListener(MapEvent.MAP_READY, onMapReady);
		}
		
		private function onMapReady(event:MapEvent):void {
			setCenter(new LatLng(40.730672, -73.992062), 14, MapType.NORMAL_MAP_TYPE);
		}
	}
}
   

API KEYを外部から渡す

     <object
      classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
      width="50%"
      height="50%">
      <param name="movie" value="./swf/Main.swf">
      <param name="quality" value="high">
      <param name="flashVars" value="key=APIキーとか">
      <embed
        width="50%"
        height="50%"
        src="./swf/Main.swf"
        flashVars="key=APIキーとか"
        quality="high"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        type="application/x-shockwave-flash">
      </embed>
    </object>
   

API KEYを内部にも持てる

	public class Main2 extends Sprite
	{
		private var map:Map;
		private var key:String;
		
		public function Main2() 
		{
			stage.scaleMode = "showAll";
			key = "MAPのAPIキーをここに書く";
			
			map = new Map();
			map.key = key;
			map.setSize(new Point(640, 480));
			map.addEventListener(MapEvent.MAP_READY, onMapReady);
			addChild(map);
		}
		
		private function onMapReady(event:MapEvent):void
		{
			map.setCenter(new LatLng(35.16999, 136.908031), 14, MapType.NORMAL_MAP_TYPE);
		}
	}
   

コントロールの追加

コントロールの追加

// import部分
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.ZoomControlOptions;
   

// クラス内
private function onMapReady(event:MapEvent):void
{
	map.setCenter(new LatLng(35.16999, 136.908031), 14, MapType.NORMAL_MAP_TYPE);
	
	map.addControl(new PositionControl());
	map.addControl(new MapTypeControl());
	map.addControl(new ZoomControl());
	//map.addControl(new ZoomControl(new ZoomControlOptions( { hasScrollTrack:false } )));
	
}
   

カスタムコントロールの追加

カスタムコントロールの追加

public class ControlTextualZoom extends ControlBase
{
	// 画像の読込み
	[Embed(source="search_plus.png")] private var PlusImage:Class;
	[Embed(source="search_minus.png")] private var MinusImage:Class;
	
	public function ControlTextualZoom() 
	{
		// コントロールの表示する位置を指定
		super(new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 7, 7));
	}
	
	public override function initControlWithMap(map:IMap):void
	{
		// ボタンの作成
		createButton(1, 0, 0, function(event:Event):void{ map.zoomIn(); } );
		createButton(2, 0, 60,function(event:Event):void{ map.zoomOut(); } );
	}

カスタムコントロールの追加（続き）

	private function createButton(type:Number,x:Number,y:Number,callback:Function):void
	{
		var button:Sprite = new Sprite();
		var img:Bitmap;
		
		if (type == 1) {
			img = new PlusImage() as Bitmap;
		} else {
			img = new MinusImage() as Bitmap;
		}
		
		button.addChild(img);
		button.x = x;
		button.y = y;
		
		button.addEventListener(MouseEvent.CLICK, callback);
		addChild(button);
	}
}
   

カスタムコントロールの追加

// メインクラス内
private function onMapReady(event:MapEvent):void
{
	map.setCenter(new LatLng(35.16999, 136.908031), 14, MapType.NORMAL_MAP_TYPE);
	map.addControl(new ControlTextualZoom());
}

複数のマップ配置

何か（仮）

９パズルを作ってみた

PLAY!

ありがとうございました