ひよっこ。

I want to…

GoogleMapAPI For Flashを試行中

Posted by hikaruworld : 2009 8月 12

いまさらながら、GoogleMapAPI For Flash を利用してみました 。
目的としては、逆ジオコーディング とルート検索を利用したかったのでその辺りを中心に試してみています。
とりあえず、インストールからの簡単な流れで説明をば。

なお、環境としてはFlexBuilder3 を利用してAdobeAirでサンプルを作成しています。

インストール

1. GoogleMapAPIのサイトに行き登録URLとAPIkeyを取得します。
2. GoogleMapAPI For Flash のSDKをダウンロードします。
3. SDKを展開して、FlexBuilderで作成されたAirプロジェクトのlibs以下にmap_flex_1_16.swcをコピーします。

地図を描画

メインとなる.mxmlに以下のようなコードを追記します。

urlはインストール時に登録したURL、keyはその際に取得したAPIkeyを指定します。
languagesに関しては基本的にはブラウザのデフォルト設定依存で良いと思いますが(ローカライズ参照)、
FlashDevelopなどを利用している場合はlocaleがenに設定されているはずなので、
明示的にjaを指定したほうが確実でしょう。

mapevent_mapreadyはマップオブジェクトの初期化が完了した際にディスパッチされるイベントハンドラの定義(詳細はイベントを参照)になります。

<mx:Script>
    <!&#91;CDATA&#91;
    import com.google.maps.MapEvent;

    private function onMapReady(event:MapEvent):void {
        trace("onMapReady...");
    }
    &#93;&#93;>
</mx:Script>
<maps:Map xmlns:maps="com.google.maps.*"
		id="map"
		languages="ja" 
		mapevent_mapready="onMapReady(event)" width="100%" height="100%" 
		url="https://prepro.wordpress.com/" key="hoegpiyo..."/>

Web版GoogleMap化

とりあえず上記の設定でGoogleMapは描画されますが、それだけだと面白くもなんともないので、
各種コントロールを追加して行きます。

GoogleMapAPI For Flashでいうところの標準コントロールに関しては、Mapオブジェクト初期化時に初期化されたインスタンスに対してaddControl()というメソッドを利用して行うことが可能です。

ためしに、Web版のGoogleMapが標準で持っている機能の一部を追加してみます。

<mx:Script>
    <!&#91;CDATA&#91;
    import com.google.maps.MapEvent;

    private function onMapReady(event:MapEvent):void {
        trace("onMapReady...");
        // 各種コントロールを定義
        this.map.addControl(new PositionControl());
        this.map.addControl(new MapTypeControl());
        this.map.addControl(new ZoomControl());
    }
    &#93;&#93;>
</mx:Script>

こんな感じで表示されます。

逆ジオコーディングサンプル

GoogleMapAPI For Flash のデベロッパガイドから抜粋。

ジオコーディングとは、住所 (「1600 Amphitheatre Parkway, Mountain View, CA」など) を地理座標 (緯度 37.423021、経度 -122.083739 など) に変換する処理のことです。地理座標を使用して、マーカーを配置したり地図の位置決めを行うことができます。

というわけで、ここではジオコーディングの逆、逆ジオコーディング(地理座標を住所に変換する)を試してみます。
とりあえず、既存のサンプルを流用して任意の箇所をクリックした際にその座標を逆ジオコーディングするように実装しました。
主な流れは以下の通りです。

  1. ClientGeocoderをインスタンス化
  2. GeocodingEventに対するGeocodingEvent.GEOCODING_SUCCESS及び、GeocodingEvent.GEOCODING_FAILUREイベントのイベントハンドラを定義する。
  3. ClientGeocoder#reverseGeocode(LatLng)メソッドを実行する。
    以下はソースになります。
private function onMapReady(event:MapEvent):void
{
    // 各種コントロールを定義
    this.map.addControl(new PositionControl());
    this.map.addControl(new MapTypeControl());
    this.map.addControl(new ZoomControl());

    // Map上をクリックした際のイベントハンドラを定義
    this.map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}
/**
  * マウスクリック時のイベントハンドラを定義
  */
private function onMapClick(e:MapMouseEvent):void
{
    trace("緯度:", e.latLng.lat(), "経度:", e.latLng.lng() );

    var cg:IClientGeocoder = new ClientGeocoder();
    cg.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, function(success:GeocodingEvent):void {
        trace(e.response.name);
        trace(e.response.placemarks);
    });
    cg.addEventListener(GeocodingEvent.GEOCODING_FAILURE, function(fault:GeocodingEvent):void {
            trace(fault);
    });
    cg.reverseGeocode(e.latLng);
}

ルート検索

これが本題。
ルート検索はDirectionsをインスタンス化し、directions#load(String)を実行します。
loadに渡す引数はGoogleMapを検索するときのように、自由形式(ex)東京から大阪)でも解釈してくれます。
以下該当箇所だけ抜粋。

// Directionsに任意のOptionを渡す。travelModeでルート検索の行動方法?を指定可能
var options:DirectionsOptions = new DirectionsOptions( {
	language: 'jp',
	countryCode: 'ja',
	travelMode: DirectionsOptions.TRAVEL_MODE_DRIVING
});
// 1.インスタンス化
var dist:IDirections = new Directions(options);
var query:String = "福井市から富山市";

// 2.イベントリスナを定義
dist.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, function(success:DirectionsEvent) {
	trace("directionHandler loaded...");
	var dir:Directions = e.directions;

	// ルートを地図上に描画する。
	map.clearOverlays();
	map.addOverlay(dir.createPolyline());

});
dist.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, function(e:DirectionsEvent):void {
	trace(e.directions.status);
});
// 3.実行
dist.load(query);

ここで問題発生。
上記のソースコードで指定されているルートだと正常に検索が実行されず、エラーStatus:604が返却されてしまいました。
(※まれに602のケースもあった)

APIリファレンスを見るとそれぞれのエラーコードは以下のようになっている。

名前 説明
GEO_UNKNOWN_ADDRESS 602 住所が未知または不正であることを示すステータス コード
GEO_UNKNOWN_DIRECTIONS 604 ルートが計算できなかったことを示すステータス コード

ようするに正しく名称が取得できなかったということかと推測。
では、ためしにジオコーディングした情報を渡してみました。上記のqueryを以下のように書き換えます。

//var query:String = "福井市から富山市";
var query:String = "from:36.0651779, 136.2215269 to:36.6952907, 137.2113383";

再実行したが604で落ちました。ためしにfrom-toにアメリカ国内の住所を指定してみます。

var query:String = "ニューヨークからサンフランシスコ";

うまくルート検索できました。

では、アメリカ-日本間で指定してみます。

var query:String = "東京からニューヨーク"			//OK.
var query:String = "大阪からニューヨーク"			//OK
var query:String = "名古屋からニューヨーク"		//NG
var query:String = "東京から大阪"		//NG

なんでだか、日本国内のみの検索が正常に動かないように見えます。
うーん、アメリカ国内でしか利用できないルート検索なんて使い道がない。
バグかなとおもってissueを検索したらこんなのを発見。
Issue 1553: The directions function doesn’t work in Japan.

むぅ、残念。
とりあえずStarは付けておきましたー。

# ちなみにjavascript版 & Webからだと正常に動くようです。なぜに?

コメント / トラックバック6件 to “GoogleMapAPI For Flashを試行中”

  1. YUJI said

    はじめまして。大学で情報工学を専攻している者です。最近FlexBuilder3にてGoogle Map API for Flashを始めました。
    当ページを参考にさせていただいております。

    Google Map API for Flashにて日本国内のルート検索が出来ずに困っておりました。同じくエラーstatus 604が出ます。

    ルート検索機能を使ったソフトを作ろうと思ったのですが、日本国内間のルート検索が可能になる日は来るのでしょうか?
    可能になるにはどのくらいの期間がかかると思いますか?

    Flexでのソフト開発をしたいと思ってるのですが、卒論発表までにソフトを作らないといけないので、国内間のルート検索が可能なJavaScript版での開発にしようか悩んでいます。

    よろしければ、返信コメントお願いします。

  2. prepro said

    > YUJI さん
    コメントありがとうございます。

    > ルート検索機能を使ったソフトを作ろうと思ったのですが、日本国内間のルート検索が可能になる日は来るのでしょうか?
    > 可能になるにはどのくらいの期間がかかると思いますか?
    んー、さすがにいつ頃かはわかりませんが…(汗
    一度FixされてからConfirmedしていますので手間取っているようですね。
    Starを付けておくと開発者の優先度も上がるかもしれませんのでその辺りはアピールしたほうが良いと思います。

    > 国内間のルート検索が可能なJavaScript版での開発にしようか悩んでいます。
    FlexのexternalInterfaceを利用して実装すれば、GoogleMapの箇所のみJavascriptで実装を行うことが可能かと思います。
    (但し、externalInterfaceにも癖がありますし、IE8だとGoogleMapAPIがうまく動かない可能性もあるようです。)
    この辺りをインターフェイス化して疎結合にしておけば出た時点で差し替えることも可能かと思いますし。

  3. YUJI said

    >prepro様
    プログラム初心者の質問でしたが早速の返信を頂き、ありがとうございました。

    まだ、ソフトの計画段階なので国内ルート検索がFlexに対応することを願っています。
    ソフト開発の時点で未実装の場合はexternalInterfaceを利用しようと思います。

    Google Map API javascript版のプログラミングについては、書籍や解説サイトが多いですがFlash版はまだ少ないので試行錯誤しながら勉強しようと思います。
    おすすめのサイトや書籍、学習法があれば、紹介いただけると助かります。

  4. prepro said

    > YUJI さん

    > おすすめのサイトや書籍、学習法があれば、紹介いただけると助かります。
    私の場合は、Googleの公式サイトのAPIとサンプルを見ながらですね(日本語化されましたし)。
    サンプルもわかりやすいので、今回のようなバグにあたらない限りは比較的簡単に実装出来ると思いますよ。
    がんばってください。

  5. YUJI said

    >Prepro様

    自分も公式サイトのサンプルをFlexBuilderで動かして実装方法を覚えているところです。
    Google Maps API ActionScriptリファレンスを見ても実装方法がよくわからないときがあるので、解説書などがあれば購入しようと考えていました。

    これからも当サイトを参考にさせていただきます。
    この度は色々とありがとうございました。

  6. […] 他にも多くの方々が検証されてるようなので、一部掲載。 The directions function doesn’t work in Japan. ひよっこ。 […]

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。