Googleマップ上に経路を表示する方法

タイトルのGoogleマップ上で経路を表示するとは、以下のようなイメージを最終目標としてる。

下の画像では開始から終了まで経路をすべて表示しているけど、実際には、画面下に表示される「Next」ボタンで経路と説明は順番に表示されるようになる。

動画だとこんな感じ。

では、実際に使い方を以下にまとてみる。

手順は大きくわけて以下の通り。

1. 経路の位置情報リストを作る
2. 位置情報リストを貼り付ける

以下、詳細。

1. 経路の位置情報リストを作る

以下が、位置情報リストを作成するURLになる。

位置情報リスト作成

開くと、以下のようなGoogleマップを含むページが表示される。

拡大や移動などの機能を使って、経路としたい点をマウスでクリックしていく。

たとえば、東京から名古屋への経路であれば、以下のようになる。
大きな欠点がひとつあって、間違えてもやり直しが出来ないのが問題だ。

経路を描けたら画面下部にある「出力」ボタンを押すと、

ボタンの下に経路の位置情報が出力されるので、コピーしておく。

2. 位置情報リストを貼り付ける

コピーした位置情報を貼り付けるソースコードを以下から取得する。

地図表示

開いたらブラウザ上で右クリックして「ページのソースを表示」などでソースコードを表示する。

開いたら、コードの中に「位置情報リスト」という部分があるので、それをコピーしておいたリストと置き換える。

以下の画像参照。

置き換えられたら、拡張子をhtmlで保存する。
たとえば、「sample.html」など。
あとは、保存したファイルをブラウザで開けば経路情報を表示できる。

上でも書いたけど地図表示がオデュッセウスの経路のサンプルなのでそちらでどんな感じになるのか確認出来る。

補足

位置情報リストには、位置情報の他に、「コメント」と「連続表示処理の有無」の項目がある。

「コメント」にはサンプルのようにhtmlで画像を表示することも出来る。
「連続表示処理」の項目に、"1"などと何か入れておくと、一度の「Next」で連続して進められる。