第1回 Google Mapsパワーアップテクニック

Google Mapsの準備

　Google Maps API for FlashのCS3版が正式にリリースされたことで、Flash CS3でもGoogle Mapsを簡単に導入することができるようになりました。地図を利用したコンテンツは、視覚的にもわかりやすく、また、Flashで作成する場合は、Ajaxのようにブラウザの互換性を考慮しなくても良いという点と、Flashの強みでもあるアニメーションを地図上に表現できるメリットが挙げられると思います。

　今回は、Google Mapsコンテンツでよく利用されるマーカークラスを継承したカスタムクラスを作成し、地図上に情報を表示させるマーカーを自由自在にカスタマイズできる方法を紹介します。

　まずは、Google Maps API for Flashサイト（http://code.google.com/apis/maps/documentation/flash/index.html）へアクセスし、ページ右部にある「2. Download the Google Maps API for Flash SDK」の「SDK」文字のリンクをクリックしてライブラリファイルをダウンロードします。ファイルを解凍すると「lib」フォルダに中に「map_1_8b.swc」というファイルがあります（2008年12月現在）。

　そのファイルをWindowsの場合は「C:\Program Files\Adobe\Adobe Flash CS3\ja\Configuration\Components」に、Mac OS Xの場合は「Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components」に格納します。

　ファイルを格納後、Flash CS3を起動すると、コンポーネントパネルに「GoogleMapsLibrary」が現れるので、これをライブラリパネルへドラッグ＆ドロップします。図1-1のようにライブラリパネル内に「GoogleMapsLibrary」が表示されれば準備完了となります（ステージ上に配置しなくても大丈夫です）。

Google Mapsを表示させる

　それではGoogle MapsをFlashに表示させてみましょう。こちらからサンプルをダウンロード（http://tedia.jp/member/download/detail.php?id=104）してください（762_1.zip/331 KB）。サンプルでは図1-2のようなコンテンツが表示されます。

　まずはドキュメントクラスである「Main.as」をご覧ください。Google Maps APIを利用するためにはAPI Keyの取得が必要になります。API Keyは「Sign Up for the Google Maps API（http://code.google.com/apis/maps/signup.html）」から取得可能です。

const API_KEY:String = "[あなたの API Keyを記述]";

　API Keyを取得後、定数「API_KEY」に格納させておきます。Flash CS3の「制御 → ムービープレビュー」で確認する場合、デバッグモードでの表示となるためAPI keyを設定しなくてもGoogle Mapsが表示されます。

　ムービーが再生されるとコンストラクタで「initMap()」が実行されます。「initMap()」では、Mapクラスのインスタンスを生成し、API Keyや言語、サイズなどの基本設定を行います。また必要に応じてナビゲーションコントロールの表示設定を行います。これらの設定後に、以下のように、MAP_READYイベントをリスナー登録し、addChild()でMapオブジェクトを配置します。MAP_READYイベントは、マップの初期化処理が完了した時に発生するイベントで、今回のサンプルでは「onMapReady()」が実行されます。

googleMaps.addEventListener(MapEvent.MAP_READY, onMapReady);
addChild(googleMaps);

　「onMapReady()」では、中心座標やズームレベルなどのマップの初期表示設定や操作系の設定などを行い、「addMarkers()」でマーカーを追加していきます。