GDirectionsクラスのオブジェクトを作成

広告

ルート案内を取得するにはGDirectionsクラスを使用します。まずはGDirectionsクラスのオブジェクトを取得するところまでを確認します。

下記は単に地図を表示する場合のXHTML文書とJavaScriptのコードです。これらをベースに必要なコードを追加していきます。 

<!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/code1_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.7724,140.72628), 12);
  }
}

現在地図を表示するエリアがXHTML上に確保されていますがルート案内では地図上にルートを表示するのとは別に、テキストを使ってルート案内を表示することができます。そこでルート案内をテキストで表示するためのエリアを別に用意します。 

<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>

ルートをテキスト表示するエリアは「ID」属性を「route」としてあります。またルート案内で表示される経路数によって必要な大きさが違いますので「overflow: scroll」を指定してスクロールバーを表示するようにしてあります。

GDirectionsクラスのコンストラクタ

続いてGDirectionsクラスのオブジェクトを取得します。GDirectionsクラスで用意されているメソッドを使うことで、ルートを取得して地図上にルートをポリゴン表示したりテキストのルート案内を表示させることができます。

GDirectionsクラスのコンストラクタ関数は次の通りです。 

GDirections(map?:GMap2, panel?:Element)

ルート結果をリクエストおよび保存するために、ルート オブジェクトの新しい
インスタンスを作成します。このルート オブジェクトはその後、
GDirections.load() メソッドを使用してクエリに答えるルートを作成できます。

コンストラクタは、(計算されたルートのポリラインを表示するために) オプ
ションのマップ オブジェクトおよび/または (テキストのルート結果を表示す
るために) パネル DIV 要素を使用します。

map 引数を渡すと、新しいルート結果が計算されている場合は、結果に関連付
けられたポリラインとマーカーが自動的にオーバーレイとして地図上に追加さ
れます。同様に、panel 引数を渡すと、結果に関連付けられたテキストのルー
トが表示される DIV に追加され、DIV の既存のコンテンツを置き換えます。

これらの引数のどちらかが null の場合、GDirections.load() メソッドで明示
的にリクエストされない限り、関連付けられた要素は取得されません(下記参照)。

1番目の引数にはGMap2クラスのオブジェクトを指定し、2番目の引数にはテキストのルート案内を表示する要素を指定します。例えば次のように記述します。 

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

ここまでがルート案内を利用するための基本部分となります。次のページ以降ではGDirectionsクラスの各メソッドを使ってルートを取得する方法などを確認します。

code1_1.js 

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.7724,140.72628), 12);

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

map1_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>サンプル：GDirectionsクラスのオブジェクトを作成</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/code1_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>

( Written by Tatsuo Ikura )