PR

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()」でマーカーを追加していきます。

Think IT会員限定特典
  • 「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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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