環境を整える(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>

ソースコードのダウンロードはこちら



実行すると、下図のような地図が表示されます。

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

Get Adobe Flash Player






サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら