GDirectionでルート検索を行い、各ポイントに説明用のマーカーを設置する

サンプルの実行方法

StartとToを入力して、[ルート検索]ボタンを押してください。
ルート検索が行われ、正常に処理が行われれば、検索結果が表示されます。

(コードの解説は、ページの一番下)

<html>
<head>
  <script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]" type="text/javascript"></script>
  <script type="text/javascript">
  
  var directions, map_canvas;
  
  //アイコンを作成
  var iconBase = new GIcon();
  iconBase.shadow = "http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/icons/dithshadow.gif";
  iconBase.shadowSize = new GSize(37, 34);
  iconBase.imageSize = new GSize(32, 32);
  iconBase.iconAnchor = new GPoint(16, 32);
  iconBase.infoWindowAnchor = new GPoint(16, 8);

  function initialize () {
    if (GBrowserIsCompatible()) {
      var init_pos = new GLatLng(34.703741, 137.734442);
      var init_zoom = 7;
      map_canvas = new GMap2(document.getElementById("map_canvas"));
      map_canvas.setCenter(init_pos, init_zoom);
      map_canvas.addControl(new GLargeMapControl3D());
      
      //ディレクションオブジェクトを作成
      var div_panel = document.getElementById("directions_panel");
      directions = new GDirections(map_canvas, div_panel);
      GEvent.addListener(directions, "load", onDirectionsLoad);
      GEvent.addListener(directions, "error", onDirectionsError);
    }
  }
  function doDirection(formObj) {
    //ルート検索
    map_canvas.clearOverlays();
    directions.load("from:" + formObj.startPos.value + " to:" + formObj.endPos.value);
  }
  function onDirectionsLoad () {
    //ルートの各ポイントに説明を表示する
    var route = directions.getRoute(0);
    var stepCnt = route.getNumSteps();
    for (var i = 0; i < stepCnt; i++) {
      var dStep = route.getStep(i);
      var latlng = dStep.getLatLng();
      var htmlStr = dStep.getDescriptionHtml();
      var marker = createMarker(latlng, i + 1, htmlStr);
      map_canvas.addOverlay(marker);
    }
  }
  function onDirectionsError () {
    //エラーについて調べる
    var status = directions.getStatus();
    for(var i in status) {
      GLog.write(i + " : " + status[i]);
    }
    switch(status.code) {
      case G_GEO_SUCCESS:
        GLog.write("正常に終了");
        break;
      case G_GEO_BAD_REQUEST:
        GLog.write("リクエストが不正");
        break;
      case G_GEO_SERVER_ERROR:
        GLog.write("Googleのサーバー側でエラー");
        break;
      case G_GEO_MISSING_QUERY:
        GLog.write("経由地が未指定");
        break;
      case G_GEO_UNKNOWN_ADDRESS:
        GLog.write("住所が分からない");
        break;
      case G_GEO_UNAVAILABLE_ADDRESS:
        GLog.write("法的または契約の事情で結果が返せない");
        break;
      case G_GEO_UNKNOWN_DIRECTIONS:
        GLog.write("ルートが検索できない");
        break;
      case G_GEO_TOO_MANY_QUERIES:
        GLog.write("リクエストが多すぎのため制限された");
        break;
    }
  }
  function createMarker(latlng, markerIdx, htmlStr) { 
    //マーカーを作る
    var markerIcon = new GIcon(iconBase,
         "http://gmaps-samples.googlecode.com/svn/trunk/markers/red/marker" + markerIdx + ".png");
    var markerOpts = {
      icon : markerIcon
    };
    var marker = new GMarker(latlng, markerOpts);
    marker.bindInfoWindowHtml(htmlStr);
    return marker; 
  }
  GEvent.addDomListener(window, "load", initialize);
  GEvent.addDomListener(window, "unload", GUnload);
</script>

</head>
<body>
  <div id="map_canvas" style="width:65%; height:100%; float:left"></div>
  <div id="side_panel" style="width:30%; height:100%; float:right">
    <div style="width:100%">
      <form id="form">
        <table>
        <tr>
          <th>Start</th>
          <td><input type="text" name="startPos" size="15" value="大阪駅" /><td>
        </tr>
        <tr>
          <th>To</th>
          <td><input type="text" name="endPos" size="15" value="大阪城" /><td>
        </tr>
        </table>
        <input type="button" onclick="doDirection(this.form);" value="ルート検索"/>
      </form>
    </div>
    <div id="directions_panel"></div>
  </div>
</body>
</html>

コード解説

Google Maps API v2の GDirectionsクラスを使うと、Google のルート検索サービス（ディレクション）をプログラムから利用することができます。

まずは、GDirectionsクラスのインスタンスを作成します。
このときに
　第1引数にGMap2クラスのインスタンス
　第2引数に説明を表示するためのDOM要素
を渡すと、地図にルートを自動で表示して、DOM要素内に説明を表示してくれます。
　dicrections = new GDirections(map_canvas, div_panel);

directions.load()メソッドに出発地と目的地を文字列で渡します。
　directions.load("from:<出発地> to:<目的地>");

directions.load()メソッドが実行されると、結果を返すイベントが発生します。
あらかじめ、GEvent.addListenerでリスナーを登録しておきます。
　成功時：loadイベント
　エラー時：errorイベント

ルート検索の結果は、directions.getRoute()で取得できます。
ルートは複数返されることもあります。
サンプルでは、常に１つめのルートについてのみ取得しています。
　var route = directions.getRoute(0);  //GRouteオブジェクトが返される

GRouteオブジェクトは、GStepクラスのオブジェクトを含みます。
GStepは、ルートの各経由地に関する情報を含んでいます。
ループでそれぞれを取得し、各ポイントにマーカーを作成します。

　var stepCnt = route.getNumSteps();
　for (var i = 0; i < stepCnt; i++) {
　　var dStep = route.getStep(i);
　　var latlng = dStep.getLatLng();
　　var htmlStr = dStep.getDescriptionHtml();
　　var marker = createMarker(latlng, i + 1, htmlStr);
　　map_canvas.addOverlay(marker);
　}

Start
To