Google Mapでドラッグ可能なルートを作成する

引用先: Google Maps JavaScript API V3 サービス

DirectionsRenderer で動的に表示されたルートが「ドラッグ可能」である場合、ユーザーは地図上に表示された結果パスをドラッグしてルートを変更できます。レンダラの表示をドラッグ可能にするには、draggable プロパティを true に設定します。

ルートがドラッグ可能になっていると、表示された結果のパス（またはウェイポイント）を選択して、それらのコンポーネントを新しい場所に移動できます。変更後のパスは、DirectionsRenderer によって動的に更新されて表示されます。ドロップすると、暫定的なウェイポイント（白い小さなマーカー）が地図に追加されます。パス セグメントを選択して移動すると、ルートの該当区間が変更されます。一方、ウェイポイント マーカー（始点と終点を含む）を選択して移動すると、そのウェイポイントを通過するルートの区間が変更されます。

ドラッグ可能なルートはクライアント側で変更、表示されるため、表示されているルートをユーザーが変更したときの DirectionsRenderer の directions_changed イベントを、必要に応じてモニタおよび処理してください。

次に示すコードは、シドニーからニュー サウス ウェールズの奥地をめぐる旅です。このコードでは、directions_changed イベントをモニタして、旅の全区間の総移動距離を更新しています。

var rendererOptions = {
  draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var australia = new google.maps.LatLng(-25.274398, 133.775136);

function initialize() {
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: australia
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.directions);
  });

  calcRoute();
}

function calcRoute() {
  var request = {
    origin: "Sydney, NSW",
    destination: "Sydney, NSW",
    waypoints:[{location: "Bourke, NSW"}, {location: "Broken Hill, NSW"}],
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000.
  document.getElementById("total").innerHTML = total + " km";
}

Total Distance: