Googleマップが道案内になる！

Googleマップ待望の新機能「ルート案内API」の使い方

2009年07月08日 14時00分更新

文● 藤本壱

　6月19日、Googleマップ日本語版に「ルート案内API」が追加されました。ルート案内APIを使うと、設定した出発地から目的地までの経路を地図上に簡単に表示できます。

　たとえば、企業のWebサイトに最寄駅から自社までの道案内を掲載したり、観光名所を巡るツアーガイドのサイトを作ったりと、さまざまな利用が考えられます。もちろん静的なWebページだけでなく、ユーザーが入力した出発地点から目的のお店までの行き方を検索する、といったWebアプリケーションにも活用できます。

ルート案内APIの基本的な使い方

　ルート案内APIの基本的な使い方を手順を追って紹介しましょう。

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キー」の部分は、自分のAPIキーに置き換えてください。APIキーを取得していない場合は、以下のページで取得できます。

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

3. 地図を表示する

　次に、GoogleマップのAPIを使って地図を表示します。手順は通常のGoogleマップの表示と同じ（関連記事）ですが、地図の中心とズームは指定する必要はありません。ルート検索に成功すれば、ルートを最適に表示できるように地図の中心とズームが自動的に調節されます。

3. ルートを検索する

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

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

　たとえば、以下のような条件でルートを検索・表示したいと仮定しましょう。

地図のオブジェクトを変数「map」に割り当てる
経路をID名「route」のdiv要素に表示する
東京都新宿区西新宿1丁目（新宿駅西口）から、東京都新宿区西新宿4-34-7（アスキー・メディアワークス）までのルートを表示する

　この場合は、次のようにスクリプトを書きます。


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

　上記のサンプルは、筆者のWebサイト（http://www.h-fj.com/ascii/gmap_route/sample1.html）で公開しています。HTMLやスクリプト全文はこのページのソースコードを参照してください。