2009年06月20日

Google Map APIでのルート案内サービス公開開始

表題の通り「Google Map APIでルート案内できるようになった」わけなんですが、面白い機能なので今後ブログなどで流行るかもしれません。だから、このエントリは、そのための技術メモというわけなのですが。

例題として何を取り上げようと考えているかといいますと、僕のいる会社は駅の近くというか、ロータリーの中なのでルート案内の説明には向かない、といいますか、簡単すぎるので、ちょっと趣向を変えて、こんな例を作ってみましょう。
  1. 「JR新前橋駅」前の会社を出て
  2. 「けやきウォーク前橋」に買い物に行き、
  3. 「前橋市役所」に寄ってから、
  4. 「松葉屋 前橋」でご飯を食べて、
  5. 「JR新前橋駅」前の会社に戻る。
という、僕のありふれた一日のようなコースをGoogle Map APIで表示させてみましょう。

Step.1 Google Map APIのKeyを取得しよう!
まずは、API Keyの取得が必要です。どうやら、Ver.3からはAPI Keyが不要になると言う情報を先日のGoogle Developer Dayで聞きましたが、今回のTipsはVer. 2.xの話なので、Keyが必要です。

http://code.google.com/intl/ja/apis/maps/signup.html

からどうぞ。ちなみに、ここで取得したキーを今後「APIKey」として表現します。

Step.2 ソースプログラムの雛形をGET!
GoogleはAJAX向けのとっても便利なAJAX APIS Playgroundってのを用意してくれていますので、これを使ってみましょう。

http://code.google.com/apis/ajax/playground/#map_directions_simple

「Edit HTML」でHTMLのコードを持ってきてしまうと、便利ですね。
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=APIKey"></script>
<script type="text/javascript">
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;

function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
</script>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
<div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div>
</body>
Step.3 いくつかの前提となるパラメータを抽出!
まず、Map APIのVer.2では動かないので、これを「2.x」にしなくてはいけません。
上記ソースの一番上、
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=APIKey"></script>
の「v=2」を「v=2.x」に変更します。あ、ちなみにAJAX Playgroundで動かす場合には、APIKeyを変更しないでくださいね。Playground用のAPI Keyなので、そのまま使わないと動きません。

次に地図の中心をどこにするか、ということを決めておきたいですね。上の例ではニューヨークが表示されます。ルート検索で強引に日本国内のルートを表示すると、自動的に表示がうまく調整されますが、一旦ニューヨークが表示されるのも気持ち悪いので、前橋市内を中心にしたいと思います。

具体的にそれはどうやって、調べるか、といえば、Google Mapで好きなところを選んだ後に、右上に「リンク」ってボタンがありますよね。これを押すと、「このリンクをメールに貼り付けて地図を共有できます」という部分にURLが表示されているかと思います。このURLの中に「ll=xx.xxxxxx,yyy.yyyyyy」というパラメータが出ていますよね。このxx.xxxxxxが緯度、yyy.yyyyyyが経度です。

今回は前橋駅付近を選んでみましたので、「ll=36.382734,139.073095」です。

ちなみに、「z=ww」というパラメータがあるとおもうのですが、このパラメータが地図のズームレベルを表すパラメータなので、これもメモしておきましょう。今回は「z=16」でした。

さて、この数値をソースに適用しましょうか。この部分
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
が、
map.setCenter(new GLatLng(36.382734,139.073095), 16);
と、なるわけです。ここまでは大丈夫ですよね?

Step.4 ルート案内を指定する。
まず、「新前橋駅」から「けやきウォーク前橋」までを探索してみましょう。
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
directions.load("from: 新前橋駅 to: けやきウォーク前橋", {locale: "ja_JP"});
とします。一応、日本語指定も加えてあるところに注意してください。さぁ、このあたりで、一度、AJAX Playgroundの「Run Code」を押してみてください。ルート案内が表示されませんか?うまく行かなかったときは、もう一度上から良く見直してください。

Step.5 経路を複数指定する。
それでは、「けやきウォーク前橋」の後で、「前橋市役所」に行くためにはどうすればいいのか、やってみましょう。これは、とっても簡単で、Step.4のソースが次のようになります。
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所", {locale: "ja_JP"});
おわかりいただけますでしょうか? 「to: けやきウォーク前橋」の次に「to: 前橋市役所」を加えただけです。単純に順番通りに並べていけばいいだけなんです。

次の問題は、「松葉屋」なんです。「松葉屋」は残念ながら、Googleで検索したときに、他の松葉屋が出てしまうので、僕の良く行く松葉屋を特定するような方法にしないといけません。Google検索で試しながら、「松葉屋 前橋」で検索すれば特定されるようなので、それを上記のソースに含めます。この場合、スペースはカンマに変更してください。したがって、
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋", {locale: "ja_JP"});
となります。で、最後に「新前橋駅」に戻るので、結果的にはこうなります。
directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋 to: 新前橋駅", {locale: "ja_JP"});
「Run Code」で、無事、表示されましたか?

Step.6 じゃぁブログに反映させてみよう。
ここからが、面倒くさいのですが、livedoorブログに貼る場合はどうしたらいいのか、見ていきましょう。
APIKeyを自分のブログ用に取得していますから、それを使うのを忘れずに。

上記のソースは<body>のonload時に読み込まれていますので、この辺をいじるのは大変ですから、ボタンのonclickで解決することにします。
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=APIKey"></script>
<script type="text/javascript">
  var map;
  var directionsPanel;
  var directions;
   
  function dispMap() {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(36.382734,139.073095), 16);
    directionsPanel = document.getElementById("route");
    directions = new GDirections(map, directionsPanel);
    directions.load("from: 新前橋駅 to: けやきウォーク前橋 to: 前橋市役所 to: 松葉屋,前橋 to: 新前橋駅", {locale: "ja_JP"});  }
</script>

<input type="button" value="地図を表示する" onClick="javascript:dispMap();"><br>

<div id="map_canvas" style="width: 360px; height: 360px; float:center; border: 1px solid black;"></div><br>
<div id="route" style="width: 360px; height:1200px; float:center; border; 1px solid black;"></div>
というソースをHTMLで書き込みます。

実際に書き込んだのは、矢印(↓)から下です。実験してみてください。
というわけで、今回のTipsは終了です!
自分のブログやホームページでも試して遊んでください。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓






dmatsu2005 at 11:45コメント(6)トラックバック(0) 
テクニック 

トラックバックURL

コメント一覧

1. Posted by mon   2009年06月20日 12:49
うわっ!おススメスポット案内が簡単に!

スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )
2. Posted by DAGGER   2009年06月20日 23:54
こいつは便利ですね。
ランニングコース等を保存するのにも便利そうです。

座標はこいつで簡単に見られますね。
http://www.toofactory.org/~mochi/gmap/
3. Posted by dmatsu2005   2009年06月21日 15:26
5 > うわっ!おススメスポット案内が簡単に!
>
> スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )

あはは、ホントだね。

自分の旅行日記を付けるときに旅程を書くのも面白いかもよ!
4. Posted by dmatsu2005   2009年06月21日 15:27
> こいつは便利ですね。
> ランニングコース等を保存するのにも便利そうです。
>
> 座標はこいつで簡単に見られますね。
> http://www.toofactory.org/~mochi/gmap/

情報ありがとうございます。

Ver.3になって、APIKeyが要らなくなったので、
もうちょっと環境が揃ってくれば、一気に普及が進むかもしれませんね。
5. Posted by DAGGER   2009年06月23日 01:34
ボタンはどうやって作るの??

見えてる画面が相当違ったりしますか?

本日のランニングコースを自慢したいDAGでした。
教わりに行きますので待っていてください

6. Posted by dmatsu2005   2009年06月23日 12:23
4 > ボタンはどうやって作るの??

ボタンは<input type="button" value="文字列" onClick="…">で作ってますよ。

> 見えてる画面が相当違ったりしますか?

一応、IE8、Firefox3、Chrome、Opera、Safariで確認していますが、あんまり違いはないかな、と。文字データのところが、ChromeとSafariで、おかしなことになってしまいますが。

> 本日のランニングコースを自慢したいDAGでした。
> 教わりに行きますので待っていてください

了解! 僕も近いうちに遊びに行きます。

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
livedoor プロフィール

アロハ

痩せないと死ぬよっていう宣告を受けてしまったので、ダイエットに目覚めたプログラマー(約95kg)

広告

レンタルサーバーなら使えるねっと


Google AdSense
Google検索
訪問者数
  • 今日:
  • 昨日:
  • 累計:

オススメの書籍