道案内サービスを利用する(途中経路にマーカを設置)

ここでは、Google Maps JavaScript APIで提供されている道案内サービス(DirectionsService)の利用方法を紹介します。

サンプル

このサンプルは、渋谷駅から新宿駅までの経路にMarkerを設置していきます。


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=true"
        type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map;
    var ds;
    
    // 初期化。bodyのonloadでinit()を指定することで呼び出してます
    function init() {

      // Google Mapで利用する初期設定用の変数
      var latlng = new google.maps.LatLng(39, 138);
      var opts = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

      // getElementById("map")の"map"は、body内の<div id="map">より
      map = new google.maps.Map(document.getElementById("map"), opts);

      // DirectionsRequest
      var req = {
        destination: "新宿駅",
        origin: "渋谷駅",
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      ds = new google.maps.DirectionsService();
      ds.route(req, directionsResultCallback);
    }
    
    function directionsResultCallback(result, status) {
      if (status != google.maps.DirectionsStatus.OK) {
        alert(status);
        return;
      }

      map.setCenter(result.routes[0].overview_path[0]);

      for (var i=0; i<result.routes.length; i++) {
        var r = result.routes[i];
        
        for (var j=0; j<r.overview_path.length; j++) {
          var latlng = r.overview_path[j];
          new google.maps.Marker({position:latlng, map:map});
        }
      }
    }

    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="map" style="width:100%; height:100%"></div>
  </body>

</html>

DirectionsServiceで道案内サービスを利用するには、google.maps.DirectionsService()コンストラクタでDirectionsServiceオブジェクトを生成し、route()メソッドを使います。 route()メソッドを利用するには、要求内容を記述するDirectionsRequestオブジェクトと、結果を返すためのコールバックfunctionを引数として渡します。

DirectionsRequestに設定する項目としては、このサンプルで利用しているorigin、destination、travelModeの3つが必須です。 originが出発地点、destinationが目的地、travelModeが経路の種類(移動方法)です。 originとdestinationとしては、文字列もしくはLatLngオブジェクトが利用可能ですが、このサンプルでは文字列を利用しています。 travelModeとしては、WALKING(歩き)、BICYCLING(自転車)、DRIVING(車)の3種類が利用可能です。 このサンプルでは、DRIVINGを利用しています。

route()メソッドで指定したコールバック用のfunctionの第一引数に経路情報(DirectionsResult)が入り、第二引数に結果(DirectionsStatus)が入ります。 DirectionsStatusが「OK」であれば成功ですが、それ以外の場合は失敗となります。

このサンプルでは、DirectionsResultに含まれる一つ目の経路の最初の地点を示す座標にsetCenter()を行って、地図の中心座標を移動させています。 その後、経路の各地点に対してMarkerを設置しています。

表示例

表示例です。