2点間のルート案内

広告

2つの地点を指定してルートを取得するにはGDirectionsクラスのloadメソッドを使います。 

load(query:String, queryOpts?:GDirectionsOptions)

このメソッドは新しいルート クエリを生成します。query パラメータは、「from: Seattle to: 
San Francisco」や「from: Toronto to: Ottawa to: New York」などの有効なルート クエリを含む
文字列です。デフォルトでは、地図が GDirections オブジェクトの構築中に指定されると、クエリ
はポリライン結果をリクエストします。同様に、テキスト パネルが指定されると、クエリは詳細な
テキスト結果をリクエストします。指定されない場合、結果には検出された経路の要約情報しか含ま
れません。

この動作を上書きするために (たとえば、このオブジェクトに地図が添付されていなくてもポリライ
ン情報をリクエストするなど)、呼び出し元は queryOpts オプション パラメータを使用できます。
詳細は、GDirectionsOptions のドキュメントを参照してください。

ルート結果を受け取ると、このオブジェクトは古い結果をクリアし、新しい結果に置き換えて地図お
よび/またはパネルを新しい結果で更新します。ルート結果は、複数の経路で構成されています
（GRoute タイプのオブジェクト）。クエリで指定された経由地点/住所の連続ペアごとに 1 つです。
同様に、経路も複数のステップで構成されています (GStep タイプのオブジェクト)。

load() が新しく呼び出されたときに、以前の load() リクエストが完了していない場合、以前のリ
クエストはキャンセルされます。このため、1 つの GDirections オブジェクトを使用して複数のルー
ト リクエストを連続的に発行できますが、複数のリクエストを同時に発行するには、複数の 
GDirections オブジェクトを使用する必要があります。

1番目の引数にルートを取得する対象の2つの地点を文字列で指定します。フォーマットは次の通りです。 

from: 起点 to: 終点

起点や終点には住所や略称などを記述します。

2番目の引数にはルート案内のオプションを指定します。GDirectionsOptionsクラスで定義されているプロパティを使ってオブジェクトリテラルとして指定します。どのようなオプションがあるのかは別途確認しますが、取り合えずlocaleプロパティにロケールを表す文字列を指定しておいて下さい。 

locale: 'ja_JP'

実際には次のように記述します。 

var directions = new GDirections(map, document.getElementById('route'));
directions.load('from: 東京駅 to: 渋谷駅', {locale: 'ja_JP'});

loadメソッドを呼び出すとルートを取得し地図上にルートをポリゴンとして表示すると共にテキストでルートを表示します。

実際には2点間に限らず「from: 起点 to: 経由地 to: 終点」などのように記述することで経由する地点を含めてルート案内を取得することが可能です。ただ経由地などがある場合にはloadメソッドよりもloadFromWaypointsメソッドの方が適しているのではと思います。

サンプルプログラム

では実際に試してみます。

code2_1.js 

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.681379,139.765577), 13);

    var directions = new GDirections(map, document.getElementById('route'));
    directions.load('from: 東京駅 to: 渋谷駅', {locale: 'ja_JP'});
  }
}

map2_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：2点間のルート案内</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="route" style="width: 500px; height: 200px;overflow: scroll"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p2-1

地図上に起点と終点にマーカーが表示され、ルートがポリゴンとして表示されています。また起点から終点までのルートがテキストでも表示されていることが分かります。

サンプルプログラム

今度はフォームを使って起点と終点を入力してルート案内を表示するようにしてみます。

code2_2.js 

var map;
var directions;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.681379,139.765577), 13);

    directions = new GDirections(map, document.getElementById('route'));
  }
}

function dispRoute() {
  var from = document.getElementById("from").value;
  var to = document.getElementById("to").value;

  directions.clear();

  str = 'from: ' + from + ' to: ' + to;
  directions.load(str, {locale: 'ja_JP'});
}

map2_2.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：2点間のルート案内</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code2_2.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form>
    from：<input type="text" id="from" size="20" value="東京駅" />
    to：<input type="text" id="to" size="29" value="渋谷駅" />
    <input type="button" id="btn" value="ルート案内" onclick="dispRoute()" />
    </form>

    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="route" style="width: 500px; height: 200px;overflow: scroll"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p2-2

起点を「東京駅」、終点を「名古屋城」で検索してみると次のように表示されます。

p2-3

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索