Google Maps API for Flash

登録して API キーを取得

Maps API for Flash
- デベロッパーガイド
  - チュートリアル
  - 基本
  - イベント
  - コントロール
  - オーバーレイ
  - サービス
- API リファレンス
- コードサンプル:
  - デモ
  - 例
- その他のリソース:

Maps API
- ホームページ
- ドキュメント

Mapplets Maps API
- ホームページ
- ドキュメント

Static Maps API
- デベロッパーガイド

Google Maps API for Flash - Flash CS3 チュートリアル

Flash CS3 のセットアップ
Maps API for Flash の「Hello World」の記述

このチュートリアルは、Flash CS3 アプリケーションを購入の上、インストール済みであることを前提としています。Flash オーサリングアプリケーションの詳細は、http://www.adobe.com/jp/products/flash/ を参照してください。

Flex を理解していなくても Flash CS3 内での開発はできます。逆に、Flex フレームワークを使用して Flash アプリケーションを開発したい場合は、FlexBuilder チュートリアル（英語のみ）または Flex SDK チュートリアル（英語のみ）のいずれかを参照してください。

Flash CS3 のセットアップ

Flash CS3 内で Google マップアプリケーションのオーサリングを行う前に、まず Google Maps API for Flash SWC コンポーネントを Flash CS3 に追加しておく必要があります。その手順は以下のとおりです。

現在 Flash CS3 を開いている場合は、アプリケーションを終了してください。
Google Maps API for Flash SDK を保存してある場所に移動し、Flex 以外のバージョンのインターフェースライブラリ (例: lib/map_1.7.swc) を探します。
次のいずれかの場所に "Google" ディレクトリを作成し、そこに SWC ファイルをコピーします。
- (Windows) C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components
  
  （Flash CS3 でサポートされる言語それぞれに対して個別のディレクトリがあります。Flash のオーサリングで使用する言語のディレクトリに SWC を置きます。）
- (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components
このファイルの Flex バージョンをコピーしないでください。Flex バージョンがサポートしているのは FlexBuilder や Flex SDK の開発のみです。

Flash CS3 は Google Maps API for Flash をサポートするためにセットアップされています。

Maps API for Flash の「Hello World」の記述

Flash CS3 の中で Google Maps API for Flash アプリケーションを作成する方法は、簡単な例を見ればすぐに理解できます。このチュートリアルでは、簡単な Flash ムービーを作成し、いくつかの ActionScript コードを追加します。また、そのファイルを、SWF ファイルとしてエクスポートし、目視確認できるようにブラウザ内部で起動します。

プロジェクトの作成

Google Maps API for Flash コンポーネントを Flash CS3 に追加したら、Flash アプリケーションを起動して、[Welcome] 画面で [Create New] -> [Flash File (ActionScript 3.0)] の順に選択します

([Welcome] 画面が表示されない場合は、[File] -> [New] の順に選択して、[New Document] ダイアログボックスから [Flash File (ActionScript 3.0)] を選択します)。

Flash CS3 が起動し、空白のキャンバス (「ステージ」という) が表示されます。[Timeline] パネルが表示されない場合は、[Window] -> [Timeline] の順に選択します。

[Window] -> [Components] の順に選択します。[Components] ダイアログボックスが表示されます。[Google] セレクタをクリックすると、[GoogleMapsLibrary] コンポーネントが表示されます。

[GoogleMapsLibrary] をクリックして、ステージにドラッグします。空白のステージに薄い青色の境界ボックスが表示されます。このボックスは実際の地図の配置とは関係ないため、このコンポーネントの正確な配置を気にする必要はありません。

コードの記述

Google Maps API for Flash の中の地図は、ActionScript 3.0 コードを使って操作します。ActionScript の詳細は、このチュートリアルでは説明しません。下記の ActionScript オンラインチュートリアルをご覧ください。

http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/（英語のみ）
http://www.adobe.com/jp/devnet/flex/quickstart/coding_with_mxml_and_actionscript/（英語のみ）

アクションエディタを開く

Flash CS3 の [Timeline] ウィンドウ内の選択したフレームの中で右クリックして、[Actions] オプションを選択します。[Actions - Frame] ダイアログボックスが表示されます。ドロップダウンメニューから ActionScript 3.0 が選択されていることを確認し、編集領域に以下のコードを入力します。(このコードについては以下のセクションで説明します。)

(以下のコードをコピーして貼り付けます。)

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

var map:Map = new Map();
map.key = "your_api_key";
map.setSize(new Point(stage.stageWidth, stage.stageHeight);
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:Event):void {
  map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}

簡単なコードスニペットですが、次のいくつかの点について注意が必要です。

com.google.maps.* 名前空間からライブラリセットをインポートする。
Map オブジェクトをインスタンス化して、map の API キーを設定する。
ステージのサイズに合わせて map のサイズを設定する。
地図が表示可能になったとき通知されるようにイベントリスナを追加する。
地図を Flash ムービーに添付する。
そのイベントリスナの中で、地図の中心をマンハッタンに合わせる。

これらの手順について、以下で詳しく説明します。

ライブラリのインポート

    import com.google.maps.LatLng;
    import com.google.maps.Map;
    import com.google.maps.MapEvent;
    import com.google.maps.MapType;

import 宣言をして ActionScript ライブラリをインポートします。上記のサンプルコードでは、複数の Google Maps Flash ライブラリをインポートしています。SWF ファイルを正常にコンパイルするには、必ずサンプルコードの中で使用するタイプに合ったライブラリをインポートしてください。クラスは必要なものだけインポートすることをお勧めします。

地図の宣言

var map:Map = new Map();
map.key = "your_api_key";

com.google.maps.Map オブジェクトは、Google Maps API for Flash ライブラリ内の基本オブジェクトです。ここで Map オブジェクトをインスタンス化して map 変数に割り当てます。次に、map の key プロパティを登録済みの API キーに設定します。

注: このチュートリアル内以外では、このドキュメントセットのコード例では Flex フレームワークを使用します。ほとんどの場合、そのコードは Flash CS3 の中で使用できます。ただし、少なくともここに示したような map 変数を作成して、Map インスタンスを参照する必要があります。また、このチュートリアルに従って map をセットアップし、Flash ムービーオブジェクトに直接アタッチする必要があります。

地図サイズの設定

map.setSize(new Point(stage.stageWidth, stage.stageHeight);

地図を Flash ステージのサイズに合わせてシンプルにしたい場合があります。この制限を強制するには、map のサイズをグローバルな stage オブジェクトの stageHeight および stageWidth プロパティに設定します。

注: このドキュメントセットに記載された Flex の例では、setSize メソッドを使ってサイズを明示的に設定する必要はありません。ただし、Flash CS3 デベロッパーがこれらの例を使用する場合は、このメソッドを追加する必要があります。

イベントリスナのセットアップ

map.addEventListener(MapEvent.MAP_READY, onMapReady);

ActionScript は JavaScript と同様、イベントドリブンのプログラミング言語です。Flash オブジェクト内部のユーザーインタラクションは、特定のイベントに合ったイベントリスナをオブジェクトに登録することによって処理します。

ここでは、MapEvent.MAP_READY イベント用のイベントリスナを Map オブジェクトに追加します。このイベントハンドラは、Google Maps API for Flash アプリケーションを初期化するための「フック」として機能します。地図はそのイベントを受け取ると、下記のように onMapReady 関数を呼び出します。

function onMapReady(event:MapEvent):void {
  setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}

この onMapReady() 関数は MapEvent タイプの event パラメータ (この場合は無視される) を渡し、指定されたパラメータ (位置、ズームレベル、表示する地図のタイプを定義する) を使って setCenter() を呼び出します。

注: それ以外に MapEvent.MAP_PREINITIALIZE イベントのインターセプト処理によって地図を初期化することもできます。このイベントについて詳しくは、MapOptions の説明をご覧ください。

イベントの詳細は、Google Maps Flash ドキュメントの Map Events セクションで説明します。

地図の添付

this.addChild(map);

最後に、map を Flash ムービーそのものに添付する必要があります。そのためには this.addChild(map) を呼び出します。this キーワードを使って Flash ルートコンポーネント (この場合は Timeline オブジェクト) に直接アクセスすることにご注意ください。

Flash ムービーのテスト

これで Flash ムービーの起動準備ができました。[Control] -> [Test Movie] の順に選択します。Flash CS3 は ActionScript コードをコンパイルし、デバッグのために内部 Flash プレーヤーを起動します。その結果、マンハッタンを中心とする小さな地図が表示されます。

この SWF ファイルは、ローカルファイルシステムを介してアクセスされることから、デバッグモードで表示されることにご注意ください。

SWF ファイルのエクスポート

すべてが意図したとおりであれば、SWF ファイルを作成して、公開されている Web サイトに投稿し、外部から利用することができます。その手順は以下のとおりです。

[File] -> [Export] の順に選択します。[Export Movie] ダイアログボックスが表示されます。
ファイルの名前 (たとえば. MapSimple.swf) を選択します。形式は Flash Movie のままにします。[Export Flash Player] ダイアログボックスが表示されます。
[Local playback security] は必ず [Access network only] に設定してください。これによって、Flash プレーヤーは Google のサーバーと通信し、Maps API ライブラリを取得できるようになります。

このファイルをダブルクリックすると、デフォルトのブラウザが起動するので、SWF ファイルを直接確認することができます。なお、このファイルは、ローカルファイルシステムを介してアクセスされることからデバッグモードで表示されます。

Web ページでの SWF ファイルのホスティング

Google Maps Flash SWF ファイルは、API キーを組み込んでコンパイルされていれば、スタンドアロンファイルとして簡単に表示することができます。これはテストには便利ですが、適正なページレイアウトのためには実用的ではないこともあります。そのような場合、HTML ページをセットアップして SWF ファイルを組み込もうということになるでしょう。SWF ファイルを Internet Explorer でも他のブラウザでも実行できるようにするには、必ず object と embed のどちらのタグにも SWF を追加してください。

MapSimple.swf ファイルを組み込んだ簡単な HTML ページは以下のように表示されます。地図を Web ページに表示するには、そのための領域を用意する必要があります。そのためにこの例では、名前付きの div 要素を作成し、それに object 要素を追加します。

  <div id="map_canvas" name="map_canvas">
    <object
      classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
      width="800px"
      height="600px">
      <param name="movie" value="MapSimple.swf">
      <param name="quality" value="high">
      <param name="flashVars" value="key=your_api_key">
      <embed
        width="800px"
        height="600px"
        src="MapSimple.swf"
        quality="high"
        flashVars="key=your_api_key"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        type="application/x-shockwave-flash">
      </embed>
    </object>
  </div>

flashVars パラメータの中に API キーパラメータを追加していることに注目してください。この登録メソッドは、ActionScript コードの中で (map.key 割り当てによって) キーを SWF ファイルに直接コンパイルする方法に代わるものです。ここで値を指定すると、SWF ファイルで指定された値はオーバーライドされます。API キーは SWF ファイルがホストされているドメインと一致する必要があります。HTML ファイルがホストされているドメインではありませんのでご注意ください。

結果として、下図のような HTML ページが表示されます。

Flash ファイル (SimpleMap.fla) をダウンロード

これで初めての Google Maps Flash アプリケーションが完成しました。


例: "ajax apis" または "オープンソース"

Google Maps API for Flash

Maps API for Flash

チュートリアル

コード サンプル:

その他のリソース:

Maps API

Mapplets Maps API

Static Maps API