CS3 版の Google Maps API for Flash でいろいろ遊んでみる

結構前の話ではあるんだけども、Flash でも Google Maps を利用することができる。

Google Maps API for Flash

Google が提供している Flash のための API ライブラリ。だが、これは、Flex 専用で、CS3 には対応していない（涙）
僕は、Flex は触ったことがなく、いつも CS3 で制作を行っているので、なくなく敬遠していたのだが、最近になって、CS3 版のライブラリがあることが判明！

xingxx - Flash CS3 でGoogle Maps API for Flash を使う

こちらの記事を頼りに探していくと、ファイル - Google Maps API For Flash | Google グループ からダウンロードができるようだ。

ここでダウンロードした SWC を Flash のコンポーネントのフォルダへコピーする。

Adobe\Adobe Flash CS3\ja\Configuration\Components\

コンポーネントのフォルダは基本的には上記のようなフォルダになるはず。
※ちなみに今回は「Google」というフォルダを作成しその中にファイルを格納した。

そうすると、コンポーネントパネルに、Google Maps のファイルが表示されているはず。後は、このコンポーネントをライブラリに入れれば準備完了。いつでもGoogle Maps を利用することができる。（ステージに配置しなくてOK。）

サンプル

ソース

package {
	
	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.google.maps.controls.OverviewMapControl;
	import com.google.maps.MapEvent;
	import com.google.maps.MapMouseEvent;
	import com.google.maps.Map;
	import com.google.maps.MapType;
	import com.google.maps.LatLng;
	import com.google.maps.LatLngBounds;
	import com.google.maps.ProjectionBase;
	import com.google.maps.interfaces.IProjection;
	import com.google.maps.interfaces.IMapType;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.overlays.Marker;
	import com.google.maps.overlays.MarkerOptions;
	import com.google.maps.styles.StrokeStyle;
	import com.google.maps.styles.FillStyle;
	
	public class Main extends MovieClip {
		
		const APP_ID:String = "Google Maps API key を記述";
		var mapContainer:MovieClip;
		var googleMap:Map;
		
		//コンストラクタ
		public function Main() {
			initMap();
		}
		
		//Google MAP 作成
		function initMap():void {
			//ムービークリップ作成
			mapContainer = new MovieClip();
			mapContainer.x = mapContainer.y = 0;
			//Google MAP 作成
			googleMap = new Map();
			googleMap.key = APP_ID;
			googleMap.language = "ja";
			googleMap.setSize(new Point(stage.stageWidth, stage.stageHeight));	//サイズ設定
			googleMap.addControl(new PositionControl());
			googleMap.addControl(new ZoomControl());
			googleMap.addControl(new MapTypeControl());
			googleMap.addControl(new OverviewMapControl());
			googleMap.addEventListener(MapEvent.MAP_READY, onMapReady, false, 0, true);	//イベント設定
			//配置
			addChild(mapContainer);
			mapContainer.addChild(googleMap);
		}
		
		//地図生成完了イベント
		function onMapReady(e:MapEvent):void {
			googleMap.removeEventListener(MapEvent.MAP_READY, onMapReady);
			//初期表示設定
			googleMap.enableScrollWheelZoom();
			googleMap.enableContinuousZoom();
			googleMap.setCenter(new LatLng(43.068229, 141.350956), 16, MapType.NORMAL_MAP_TYPE);
			//マーカー追加
			addMarkers();
			//ステージ設定
			initStage();
		}
		
		//マーカー配置
		function addMarkers():void {
			//マーカー1設定
			var marker1:Marker = new Marker(new LatLng(43.068229, 141.350956), new MarkerOptions({strokeStyle: new StrokeStyle({color: 0x987654}), fillStyle: new FillStyle({color: 0x223344, alpha: 1}), radius:10, hasShadow:true}));
			marker1.addEventListener(MapMouseEvent.CLICK, clicked, false, 1, true);
			//マーカー2設定
			var marker2:Marker = new Marker(new LatLng(43.064065,141.347914));
			marker2.addEventListener(MapMouseEvent.CLICK, clicked, false, 1, true);
			//マーカー配置
			googleMap.addOverlay(marker1);
			googleMap.addOverlay(marker2);
		}
		
		//マーカークリックイベント
		function clicked(event:MapMouseEvent):void {
			googleMap.panTo(event.target.getLatLng());
		}
		
		//ステージ設定
		public function initStage():void {
			stage.showDefaultContextMenu = false;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, stageResizeListener);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener, true);
		}
		
		//マウス移動イベント
		function mouseMoveListener(e:MouseEvent):void {
			//マウスの座標取得
			var nowLL:LatLng = googleMap.fromViewportToLatLng(new Point(mouseX, mouseY));
			//trace(nowLL.lat()+" , "+nowLL.lng());
		}
		
		//ステージリサイズイベント
		public function stageResizeListener(e:Event):void {
			googleMap.setSize(new Point(stage.stageWidth, stage.stageHeight));
		}
		
	}
}

マップさえ作成することができれば、あとは、いろいろと飽きるまで遊びまくるだけ（笑

Google Maps API ActionScript Reference
Google Maps API for Flash Demo Gallery

英語が分からなくても、上記のリファレンスとデモギャラリーが参考になると思う。

あと、この SWC は Google 公式のものではないので、一応、自己責任で、という感じですね。

PS.
このライブラリを利用してラボに「ココなにある？」をこっそり公開。

2008.11.10 追記

Google Maps API for Flash でも公式に CS3 版がリリースされたようです。基本的な使い方は変わりないようです。

この記事をブックマークしておく