WEB Flex + Google Map


ブラウザでダウンロード
map_flex_1_7a.swc (2008/10/07)
以前調べた時は、Map コントロール なんてのは無かったと思ったのですが、
CS3 バージョンも追加され、進化していました。

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

※ 同梱しているのは、デバッグモード用(localhost)です
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
001.<?xml version="1.0" encoding="utf-8"?>
002.<mx:Application
003.    xmlns:mx="http://www.adobe.com/2006/mxml"
004.    initialize="initData();"
005.    xmlns:maps="com.google.maps.*"
006.>
007. 
008.<mx:Style source="Style.css" />
009. 
010.<mx:Script>
011.<![CDATA[
012. 
013.    import com.google.maps.*;
014.    import com.google.maps.controls.*;
015. 
016.    import mx.controls.*;
017.    import mx.events.*;
018.    import mx.formatters.*;
019.    import flash.external.*;
020. 
021.    // *********************************************************
022.    // ログ表示
023.    // *********************************************************
024.    public function firebug(data:Object):void {
025.     
026.        var fmt:DateFormatter = new DateFormatter();
027.     
028.        fmt.formatString = "YYYY/MM/DD HH:NN:SS";
029.        var logdt:String = fmt.format( new Date );
030.     
031.        ExternalInterface.call(
032.            "console.log", logdt,
033.            data+""
034.        );
035.     
036.    }
037. 
038.    // *********************************************************
039.    // アプリケーションの初期化
040.    // *********************************************************
041.    public function initData():void {
042. 
043.    }
044. 
045.    // *********************************************************
046.    // 地図表示
047.    // *********************************************************
048.    private function DisplayMap(event:MapEvent):void {
049. 
050.        event.target.setCenter(
051.            new LatLng(49.345704, 154.721317),
052.            13,
053.            MapType.HYBRID_MAP_TYPE
054.        );
055. 
056.        event.target.addControl(new ZoomControl());
057.        event.target.addControl(new PositionControl());
058.        event.target.addControl(new MapTypeControl());
059. 
060.        firebug("MAP 作成完了");
061. 
062.    }
063.    private function DisplayMap2(event:MapEvent):void {
064. 
065.        event.target.setCenter(
066.            new LatLng(-22.795173, -67.833195),
067.            13,
068.            MapType.HYBRID_MAP_TYPE
069.        );
070. 
071.        event.target.addControl(new ZoomControl());
072.        event.target.addControl(new PositionControl());
073.        event.target.addControl(new MapTypeControl());
074. 
075.        firebug("MAP 作成完了");
076. 
077.    }
078. 
079. 
080.]]>
081.</mx:Script>
082. 
083.<mx:HBox
084.    width="100%"
085.    height="100%"
086.>
087.    <mx:Panel
088.        title="北方の島"
089.        horizontalAlign="center"
090.        width="100%"
091.        height="100%"
092.    >
093.    <maps:Map
094.        xmlns:maps="com.google.maps.*"
095.        id="map"
096.        mapevent_mapready="DisplayMap(event)"
097.        width="100%"
098.        height="100%"
099.        key="ABQIAAAANc_xfYlGdGgZ2C4X0OjT8xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS5ErnmZ_0qSaG35yIjTwpK61fvbA"
100.    />
101.    </mx:Panel>
102. 
103.    <mx:Panel
104.        title="Laguna Verde"
105.        horizontalAlign="center"
106.        width="100%"
107.        height="100%"
108.    >
109.    <maps:Map
110.        xmlns:maps="com.google.maps.*"
111.        id="map2"
112.        mapevent_mapready="DisplayMap2(event)"
113.        width="100%"
114.        height="100%"
115.        key="ABQIAAAANc_xfYlGdGgZ2C4X0OjT8xT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS5ErnmZ_0qSaG35yIjTwpK61fvbA"
116.    />
117.    </mx:Panel>
118.</mx:HBox>
119. 
120.</mx:Application>
Flex Book に組み込んでみたのですが、WEB 上で動作しませんでした。
ページめくらなければ表示されるのですが、意味無いし。

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

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