環境を整える(Adobe Flash Builder 4編
Google Maps API for Flashを利用するには、Flashをコンパイルすることができる開発環境が必要です。
ここでは、Adobe Flash Builder 4を使用する方法を紹介します。まずは試してみたい、という方は60日無料体験版を利用することが可能です。
インストールについては解説を行ないませんので、各自で行なってください。
Adobe Flash Builder 4
Google Maps API for Flash SDKのダウンロード
Google Maps API for Flashを使うためには、それをコンポーネントとして利用するためのSDKが必要になります。
SDKのダウンロードは、下記URLから行なうことができます。
Google Maps API for Flash SDK
http://maps.googleapis.com/maps/flash/release/sdk.zip
ダウンロード後にzipファイルを解凍すると、libディレクトリ内に2つのswcファイルがあります。
このmap_flex_1_xx.swc を環境に合わせて、コンポーネントのディレクトリにコピーします。
- Windowsの場合
C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\4.0.0\frameworks\libs - Mac OS Xの場合
Macintosh HD/Applications/Adobe Flash Builder 4/sdks/4.0.0/frameworks/libs
地図を表示してみる
まずはFlash Builder 4を起動します。
メニューの[ファイル] - [新規作成] - [Flex プロジェクト]をクリックして、適当にプロジェクトを作成します。
そのまま進んで、最後に[終了]ボタンを押すと、下図のようになります。
コンポーネントを確認すると、カスタムの中に"Map", "Map3D", "MapTypeControl"...などがあります。
"Map" コンポーネントをステージ上に配置します。
ソースコードの表示に切り替え、下記のコードを入力します。
[Google Maps API キー]としているところは、必ず置き換えてください。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="{init();}"
width="100%" height="100%"
xmlns:maps="com.google.maps.*" viewSourceURL="srcview/index.html">
<fx:Declarations>
<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
</fx:Declarations>
<maps:Map width="100%" height="100%" id="map_canvas" sensor="false"
key="[Google Maps API キー]" />
<fx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import mx.events.FlexEvent;
private function init() : void {
this.map_canvas.addEventListener(MapEvent.MAP_READY, mapCanvas_mapReady);
}
private function mapCanvas_mapReady(event : MapEvent) : void {
var init_pos : LatLng = new LatLng(35.65861, 139.745447);
var init_zoom : Number = 5;
this.map_canvas.setCenter(init_pos, init_zoom);
}
]]>
</fx:Script>
</s:Application>
実行すると、下図のような地図が表示されます。
