Google Mapsパワーアップテクニック

2009年1月8日(木)
古本 光司

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に表示させてみましょう。サンプルは、会員限定特典としてダウンロードできます。記事末尾をご確認ください。サンプルでは図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()」でマーカーを追加していきます。

  • 「Google Mapsパワーアップテクニック」サンプルプログラム(1)

  • 「Google Mapsパワーアップテクニック」サンプルプログラム(2)

  • 「Google Mapsパワーアップテクニック」サンプルプログラム(3)

株式会社24-7

Webディレクター/Flashクリエイター。1995年に初めてインターネットの世界に触れ、1999年に独学で個人サイトの運営を始める。その後、本格的にWeb業界へと転身し、クリエイター、ディレクター、プランナー、講師業務、セミナーなど幅広く従事。また、個人的にもパブリッシャーとして活動中。より効果の高いWebの活用術を日々勉強中。『いざ高みへ!』1ka2ka.com:http://1ka2ka.com/ 株式会社24-7:http://www.24-7.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています