2009年06月20日
Google Map APIでのルート案内サービス公開開始
表題の通り「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のコードを持ってきてしまうと、便利ですね。
まず、Map APIのVer.2では動かないので、これを「2.x」にしなくてはいけません。
上記ソースの一番上、
次に地図の中心をどこにするか、ということを決めておきたいですね。上の例ではニューヨークが表示されます。ルート検索で強引に日本国内のルートを表示すると、自動的に表示がうまく調整されますが、一旦ニューヨークが表示されるのも気持ち悪いので、前橋市内を中心にしたいと思います。
具体的にそれはどうやって、調べるか、といえば、Google Mapで好きなところを選んだ後に、右上に「リンク」ってボタンがありますよね。これを押すと、「このリンクをメールに貼り付けて地図を共有できます」という部分にURLが表示されているかと思います。このURLの中に「ll=xx.xxxxxx,yyy.yyyyyy」というパラメータが出ていますよね。このxx.xxxxxxが緯度、yyy.yyyyyyが経度です。
今回は前橋駅付近を選んでみましたので、「ll=36.382734,139.073095」です。
ちなみに、「z=ww」というパラメータがあるとおもうのですが、このパラメータが地図のズームレベルを表すパラメータなので、これもメモしておきましょう。今回は「z=16」でした。
さて、この数値をソースに適用しましょうか。この部分
Step.4 ルート案内を指定する。
まず、「新前橋駅」から「けやきウォーク前橋」までを探索してみましょう。
Step.5 経路を複数指定する。
それでは、「けやきウォーク前橋」の後で、「前橋市役所」に行くためにはどうすればいいのか、やってみましょう。これは、とっても簡単で、Step.4のソースが次のようになります。
次の問題は、「松葉屋」なんです。「松葉屋」は残念ながら、Googleで検索したときに、他の松葉屋が出てしまうので、僕の良く行く松葉屋を特定するような方法にしないといけません。Google検索で試しながら、「松葉屋 前橋」で検索すれば特定されるようなので、それを上記のソースに含めます。この場合、スペースはカンマに変更してください。したがって、
Step.6 じゃぁブログに反映させてみよう。
ここからが、面倒くさいのですが、livedoorブログに貼る場合はどうしたらいいのか、見ていきましょう。
APIKeyを自分のブログ用に取得していますから、それを使うのを忘れずに。
上記のソースは<body>のonload時に読み込まれていますので、この辺をいじるのは大変ですから、ボタンのonclickで解決することにします。
実際に書き込んだのは、矢印(↓)から下です。実験してみてください。
というわけで、今回のTipsは終了です!
自分のブログやホームページでも試して遊んでください。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ツイート
例題として何を取り上げようと考えているかといいますと、僕のいる会社は駅の近くというか、ロータリーの中なのでルート案内の説明には向かない、といいますか、簡単すぎるので、ちょっと趣向を変えて、こんな例を作ってみましょう。
- 「JR新前橋駅」前の会社を出て
- 「けやきウォーク前橋」に買い物に行き、
- 「前橋市役所」に寄ってから、
- 「松葉屋 前橋」でご飯を食べて、
- 「JR新前橋駅」前の会社に戻る。
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&v=2&sensor=false&key=APIKey"></script>Step.3 いくつかの前提となるパラメータを抽出!
<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>
まず、Map APIのVer.2では動かないので、これを「2.x」にしなくてはいけません。
上記ソースの一番上、
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&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&v=2.x&sensor=false&key=APIKey"></script>というソースをHTMLで書き込みます。
<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>
実際に書き込んだのは、矢印(↓)から下です。実験してみてください。
というわけで、今回のTipsは終了です!
自分のブログやホームページでも試して遊んでください。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
トラックバックURL
コメント一覧
1. Posted by mon 2009年06月20日 12:49
うわっ!おススメスポット案内が簡単に!
スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )
スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )
2. Posted by DAGGER 2009年06月20日 23:54
こいつは便利ですね。
ランニングコース等を保存するのにも便利そうです。
座標はこいつで簡単に見られますね。
http://www.toofactory.org/~mochi/gmap/
ランニングコース等を保存するのにも便利そうです。
座標はこいつで簡単に見られますね。
http://www.toofactory.org/~mochi/gmap/
3. Posted by dmatsu2005 2009年06月21日 15:26
> うわっ!おススメスポット案内が簡単に!
>
> スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )
あはは、ホントだね。
自分の旅行日記を付けるときに旅程を書くのも面白いかもよ!
>
> スタンプラリーMAP作成依頼が来たらこれにしましょう( ´∀` )
あはは、ホントだね。
自分の旅行日記を付けるときに旅程を書くのも面白いかもよ!
4. Posted by dmatsu2005 2009年06月21日 15:27
> こいつは便利ですね。
> ランニングコース等を保存するのにも便利そうです。
>
> 座標はこいつで簡単に見られますね。
> http://www.toofactory.org/~mochi/gmap/
情報ありがとうございます。
Ver.3になって、APIKeyが要らなくなったので、
もうちょっと環境が揃ってくれば、一気に普及が進むかもしれませんね。
> ランニングコース等を保存するのにも便利そうです。
>
> 座標はこいつで簡単に見られますね。
> http://www.toofactory.org/~mochi/gmap/
情報ありがとうございます。
Ver.3になって、APIKeyが要らなくなったので、
もうちょっと環境が揃ってくれば、一気に普及が進むかもしれませんね。
5. Posted by DAGGER 2009年06月23日 01:34
ボタンはどうやって作るの??
見えてる画面が相当違ったりしますか?
本日のランニングコースを自慢したいDAGでした。
教わりに行きますので待っていてください
見えてる画面が相当違ったりしますか?
本日のランニングコースを自慢したいDAGでした。
教わりに行きますので待っていてください
6. Posted by dmatsu2005 2009年06月23日 12:23
> ボタンはどうやって作るの??
ボタンは<input type="button" value="文字列" onClick="…">で作ってますよ。
> 見えてる画面が相当違ったりしますか?
一応、IE8、Firefox3、Chrome、Opera、Safariで確認していますが、あんまり違いはないかな、と。文字データのところが、ChromeとSafariで、おかしなことになってしまいますが。
> 本日のランニングコースを自慢したいDAGでした。
> 教わりに行きますので待っていてください
了解! 僕も近いうちに遊びに行きます。
ボタンは<input type="button" value="文字列" onClick="…">で作ってますよ。
> 見えてる画面が相当違ったりしますか?
一応、IE8、Firefox3、Chrome、Opera、Safariで確認していますが、あんまり違いはないかな、と。文字データのところが、ChromeとSafariで、おかしなことになってしまいますが。
> 本日のランニングコースを自慢したいDAGでした。
> 教わりに行きますので待っていてください
了解! 僕も近いうちに遊びに行きます。