前回はルートサービスを使って出発地と目的地の２地点間の徒歩ルートを表示しました。今回は、経由地も複数選択できるようにし、散策ルートなどを表示できるようにしました。

デモとコードサンプルはこちら。
　

サンプルコードの内容

　
１）経由地を設定（スクリプト）
　
Selectタグで入力された経由地を取得して配列に設定します。経由地は位置情報だけでなく、stopover属性も指定します。この属性は、この経由地が実際の停止地点であるのか（true）、経由を希望しているだけなのか（false）を指定します。

var ways = [];
for (var i = 0; i < routePoints.ways.length; i++) {
  ways.push({
    location:routePoints.ways[i].latlng,
    stopover:true
  });
};

　
２）ルート計算の条件を設定
　
前回の設定に１）の経由地の属性を指定します。

var request = {
  origin: start,
  destination: end,
  waypoints: ways,
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.WALKING
};

上記以外は前回と同様です。

関連記事の目次