Googleマップの新機能「ルート案内API」を試す

ASCII.jpのWeb Professionalで『Googleマップ待望の新機能「ルート案内API」の使い方』という記事を見つけました。

var directions = new GDirections(map, document.getElementById('route'));
directions.load(
    "from: 東京都新宿区西新宿1丁目 to: 東京都新宿区西新宿4-34-7",
    { locale: "ja_JP" }
);

スタートとゴールを指定するだけみたいやし、思いのほか簡単そうってことで試しに設定してみることに・・・

といっても、ここのサイト&ブログでは案内する必要のある地図なんて無い訳で、うちの社長がマスターをしている『-CAFE・RETRO・LIVE- 東京タワー』って店の地図で試してみる事にしました。

 

-CAFE・RETRO・LIVE- 東京タワー』はMTカスタマイズをはじめてやったサイトです。
ま、ノーギャラやったんですが、ただ飯、ただ酒とかで回収してたりします(笑)

仕事と違って、予算の制限も無いし、題材としては面白いので、携帯版やiPhone版のサイトを書き出したりと色々実験的にいじったりしとります。

 

今回、ルート案内APIを試すのは『About:東京タワーについて』で公開していたGoogleMapsです。

もちろん、試すっていっても公開してるサイトですから、サーバ上のデータで試す訳にはいかないんで、とりあえずダウンロード。
さらにデータをコピーして、バックアップを作っておきます。

 

まずは、GoogleMapsお約束のはじめの呪文を変更。

1. APIを使う準備をする

Google Maps APIにはVer 2.xとVer 3がありますが(関連記事)、ルート案内APIはVer 2.xの最新版で使用できます。Ver 2.xの最新版を使うには、HTMLに以下のタグを追加します。

<script src="http://maps.google.com/maps?file=api&amp;v=2.x
&amp;sensor=false&amp;key=APIキー"
type="text/javascript">
</script>

もともと公開してたんで、はじめの呪文は数字を変更するだけ。

とりあえず、api&amp;v=2の部分を『api&amp;v=2.x』に変更し、問題ないかブラウザチェック。

ま、バージョンNo変えただけなんですが(・・;)

 

でもって、地図は表示されてるんで、今回公開された『ルート案内API』の設定を追加。

3. ルートを検索する

最後に、ルートを検索する処理を追加します。手順は次のとおりです。

1)経路を表示するために、HTMLに div要素を1つ追加します。
2)「GDirections」オブジェクトを作成します。作成の際のパラメータとして、地図のオブジェクトと、経路を表示する div要素を渡します。
3)GDirectionsオブジェクトの「load」メソッドで、経路を検索します。loadメソッドには、出発地と目的地の住所または緯度/経度を指定します。また、日本のルートを検索するには、loadメソッドのオプションとして、{ locale: “ja_JP” } を指定します。

とりあえずFromは津駅でToにはお店となるんですが、検索ででないんで座標を指定。

キーワードと座標の混在でも無事表示しました!(^_-)v

 

なんかあっさり出来過ぎてもの足りん(笑)

 

てなわけで、さらにカスタマイズする事に…

店にくるお客さんは、みんなが津駅からくる訳じゃないんだよね。
ユーザーが自分のいる場所(スタート地点)を入力できると便利じゃないか?

と考えたんですが、これがまた大変でした。

 

だって、Javascriptあんまりわからんのやもん(爆)

 

FLASHのActionScriptなら幾分理解しとりますが・・・
けど、ActionScriptとJavascriptは似てるって聞いた事有るし・・・

オイラのつたない知識とGoogle先生のおかげでなんとか形になりました。

JSをこんなにカスタマイズするのは始めてだったので、かなり疲れた(x_x;)

結果は『About:東京タワーについて』で・・・

 

-CAFE・RETRO・LIVE- 東京タワー

レトログッズに囲まれたお店で、週末はライブをしてたり、ライブの無い平日は自由にセッションしたり・・・と、とにかく趣味のお店。
東京タワーって名前は、昭和の象徴だからと・・・
社長の世代には結構な思い入れが有るんだとか(・・;)

面白い場所なんで、近くへお越しの際はお立ち寄り下さい<(_ _)>