経由地点を指定してルート案内

広告

loadメソッドの場合は起点と終点だけを指定していましたが、経由地も指定してルート案内を行うことができます。GDirectionsクラスのloadFromWaypointsメソッドを使います。 

loadFromWaypoints(waypoints:Array, queryOpts?:GDirectionsOptions)

1 つのクエリ文字列の代わりに経由地点の配列を入力して、新しいルート クエ
リを発行します。この配列には最大 25 の経由地点エントリが含まれます。配
列内の各エントリは、入力住所または緯度/経度の地点を示す文字列です。この
メソッドの動作の詳細については、GDirections.load() を参照してください。

1番目の引数に起点、経由地、終点を含む配列を指定します。配列に指定可能な地点の上限は25です。2番目の引数にはloadメソッドの場合と同じくルート案内のオプションを指定します。

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

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

var pointArray = ['東京都港区芝公園4-2-8', 
                  '東京都港区六本木6丁目', 
                  '東京都渋谷4-4-25'];
directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});

また住所などの代わりに座標を指定することもできます。 

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

var point1 = new GLatLng(35.62758190931674,139.88754272460938);
var point2 = new GLatLng(35.63100031817364,139.77622032165527);
var point3 = new GLatLng(35.66489743718014,139.76690769195557);

var pointArray = [point1, point2, point3];
directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});

サンプルプログラム

では簡単なサンプルで試してみます。

code4_1.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 step = document.getElementById("step").value;
  var to = document.getElementById("to").value;

  directions.clear();

  var pointArray = [from,step,to];
  directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});
}

map4_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>サンプル：経由地点を指定してルート案内</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/code4_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form>
    <input type="text" size="20" id="from" value="東京駅" />
    --><input type="text" size="20" id="step" value="赤坂見附" />
    --><input type="text" size="20" id="to" value="渋谷駅" />
    <input type="button" id="btn1" 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を見てみます。

p4-1

テキストボックスに左から順に「東京都港区芝公園4-2-8」「東京都港区六本木6丁目」「東京都渋谷4-4-25」と入力してからルート案内ボタンを押すと次のように表示されます。

p4-2

サンプルプログラム

もう1つ座標を指定する場合のサンプルも試しておきます。

code4_2.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'));

    var point1 = new GLatLng(35.62758190931674,139.88754272460938);
    var point2 = new GLatLng(35.63100031817364,139.77622032165527);
    var point3 = new GLatLng(35.66489743718014,139.76690769195557);

    var pointArray = [point1, point2, point3];
    directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});
  }
}

map4_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>サンプル：経由地点を指定してルート案内</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/code4_2.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を見てみます。

p4-3

( Written by Tatsuo Ikura )