WEB Flex + Google Map

map_flex_1_7a.swc (2008/10/07)

以前調べた時は、Map コントロール なんてのは無かったと思ったのですが、
CS3 バージョンも追加され、進化していました。

API KEY を 属性として指定するようになっていて、
localhost KEY で、ファイルシステムでもデバッグモードで動作します。

※ 同梱しているのは、デバッグモード用(localhost)です

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns:maps="com.google.maps.*"
>

<mx:Style source="Style.css" />

<mx:Script>
<![CDATA[

	import com.google.maps.*;
	import com.google.maps.controls.*;

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import flash.external.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

	}

	// *********************************************************
	// 地図表示
	// *********************************************************
	private function DisplayMap(event:MapEvent):void {

		event.target.setCenter(
			new LatLng(49.345704, 154.721317),
			13,
			MapType.HYBRID_MAP_TYPE
		);

		event.target.addControl(new ZoomControl());
		event.target.addControl(new PositionControl());
		event.target.addControl(new MapTypeControl());

		firebug("MAP 作成完了");

	}
	private function DisplayMap2(event:MapEvent):void {

		event.target.setCenter(
			new LatLng(-22.795173, -67.833195),
			13,
			MapType.HYBRID_MAP_TYPE
		);

		event.target.addControl(new ZoomControl());
		event.target.addControl(new PositionControl());
		event.target.addControl(new MapTypeControl());

		firebug("MAP 作成完了");

	}


]]>
</mx:Script>

<mx:HBox
	width="100%"
	height="100%"
>
	<mx:Panel
		title="北方の島"
		horizontalAlign="center"
		width="100%"
		height="100%"
	>
	<maps:Map
		xmlns:maps="com.google.maps.*"
		id="map"
		mapevent_mapready="DisplayMap(event)"
		width="100%"
		height="100%"
		key="ABQIAAAANc_xfYlGdGgZ2C4X0OjT8xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS5ErnmZ_0qSaG35yIjTwpK61fvbA"
	/>
	</mx:Panel>

	<mx:Panel
		title="Laguna Verde"
		horizontalAlign="center"
		width="100%"
		height="100%"
	>
	<maps:Map
		xmlns:maps="com.google.maps.*"
		id="map2"
		mapevent_mapready="DisplayMap2(event)"
		width="100%"
		height="100%"
		key="ABQIAAAANc_xfYlGdGgZ2C4X0OjT8xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS5ErnmZ_0qSaG35yIjTwpK61fvbA"
	/>
	</mx:Panel>
</mx:HBox>

</mx:Application>

Flex Book に組み込んでみたのですが、WEB 上で動作しませんでした。
ページめくらなければ表示されるのですが、意味無いし。

そして、何故かローカルファイルシステムでは動くという・・・???

( AIR では GoogleMAP API は動きません。未対応のようです )
↑書いた時は無かったんですが、今はあります