イベント(load, addoverlay, error)の利用

GDirectionsクラスのオブジェクトは3つのイベントを発行します。

load          ルート結果が正常に返されたときに、オーバーレイ要素が地図やパネルに
              追加される前にトリガされます。
addoverlay    ポリラインまたはテキストのルート コンポーネント、あるいはその両方
              が、地図または DIV 要素、あるいはその両方に追加された後にトリガさ
              れます。
error         ルート リクエストでエラーが発生した場合にトリガされます。

例えばルート案内の結果が返されてからルートの情報を個別に取得したい場合は、loadイベントを取得するように設定しておき、呼び出される関数の中で処理を記述します。

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

var directions = new GDirections(map, document.getElementById("route"));
GEvent.addListener(directions, "load", onGDirectionsLoad);
GEvent.addListener(directions, "addoverlay", onGDirectionsAddOverlay);
GEvent.addListener(directions, "error", onGDirectionsError);

function onGDirectionsLoad(){ 
  /* .. */
}

function onGDirectionsAddOverlay(){ 
  /* .. */
}

function onGDirectionsError(){ 
  /* .. */
}

なおエラーが発生した場合にはGDirectionsクラスのgetStatusメソッドを使ってエラー内容を取得できます。getStatusメソッドはオブジェクトを返します。オブジェクトには「code」プロパティと「request」プロパティが含まれます。

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

var directions = new GDirections(map, document.getElementById("route"));
GEvent.addListener(directions, "error", onGDirectionsError);

function onGDirectionsError(){ 
  var errCode = directions.getStatus().code;
  alert(errCode);
}

サンプルプログラム

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

code8_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"));

    GEvent.addListener(directions, "load", onGDirectionsLoad);
    GEvent.addListener(directions, "addoverlay", onGDirectionsAddOverlay);
    GEvent.addListener(directions, "error", onGDirectionsError);
  }
}

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

  directions.clear();

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

function onGDirectionsLoad(){ 
  alert("ルート案内の表示を開始します");
}

function onGDirectionsAddOverlay(){ 
  alert("ルート案内の表示が終了しました");
}

function onGDirectionsError(){ 
  var errCode = directions.getStatus().code;
  document.getElementById('route').innerHTML = "エラーが発生しました:" + errCode;
}

map8_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>サンプル：イベント(load, addoverlay, error)の利用</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/code8_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="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を見てみます。

p8-1