Google Maps API V3で、google.maps.DirectionService で 得たルート上の標高をgoogle.maps.ElevationServiceを使って調べるサンプルプログラム。google.maps.DirectionService の route() のコールバック関数の第1引数で返ってくる DirectionsResult の routes[0].overview_path が全行程の緯度経度を含んでいますので、それを利用しています。(DirectionsRequest で provideRouteAlternatives を true にしていなので、routes は1つということで)
overview_pathの各点の標高を ElevationService の getElevationForLocations() 得てみるとこんな感じ。
// 複数のgoogle.maps.Markerに吹き出しをつける function attachMessage(marker, msg) { google.maps.event.addListener(marker, "click", function(event) { new google.maps.InfoWindow({ content: msg }).open(marker.getMap(), marker); }); } var map = new google.maps.Map(document.getElementById("map"), { zoom: 7, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); new google.maps.DirectionsService().route({ origin: new google.maps.LatLng(35.631089,139.266776), // 清滝駅 destination: new google.maps.LatLng(35.631105,139.256127), // 高尾山駅; travelMode: google.maps.DirectionsTravelMode.WALKING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { new google.maps.DirectionsRenderer({ map: map, suppressMarkers: true }).setDirections(result); new google.maps.ElevationService().getElevationForLocations({ locations: result.routes[0].overview_path }, function(results, status) { if (status == google.maps.ElevationStatus.OK) { for (var i in results) { if (results[i].elevation) { var elevation = results[i].elevation; var marker = new google.maps.Marker({ position: results[i].location, map: map }); attachMessage(marker, "標高 " + elevation + "m"); } } } else if (status == google.maps.ElevationStatus.INVALID_REQUEST) { alert("ElevationRequestに問題アリ!渡している内容を確認せよ!!"); } else if (status == google.maps.ElevationStatus.OVER_QUERY_LIMIT) { alert("短時間にElevationRequestクエリを送りすぎ!落ち着いて!!"); } else if (status == google.maps.ElevationStatus.REQUEST_DENIED) { alert("このページでは ElevationRequest の利用が許可されていない!・・・なぜ!?"); } else if (status == google.maps.ElevationStatus.UNKNOWN_ERROR) { alert("ElevationServiceで原因不明のなんらかのトラブルが発生した模様。"); } else { alert("えぇ~っと・・、ElevationService バージョンアップ?"); } }); } else if (status == google.maps.DirectionsStatus.INVALID_REQUEST) { alert("DirectionsRequestに問題アリ!渡している内容を確認せよ!!"); } else if (status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) { alert("DirectionsRequestのDirectionsWaypointsが多すぎ!"); } else if (status == google.maps.DirectionsStatus.NOT_FOUND) { alert("DirectionsRequestのorigin,destination,waypointsのいずれかのジオコーディングに失敗!"); } else if (status == google.maps.ElevationStatus.OVER_QUERY_LIMIT) { alert("短時間にDirectionsRequestクエリを送りすぎ!落ち着いて!!"); } else if (status == google.maps.ElevationStatus.REQUEST_DENIED) { alert("このページでは DirectionsRequest の利用が許可されていない!・・・なぜ!?"); } else if (status == google.maps.ElevationStatus.UNKNOWN_ERROR) { alert("DirectionsServiceで原因不明のなんらかのトラブルが発生した模様。"); } else if (status == google.maps.ElevationStatus.ZERO_RESULTS) { alert("DirectionsServiceでorigin,destinationを結ぶ経路が見つかりません。"); } else { alert("えぇ~っと・・、DirectionsService バージョンアップ?"); } });
次に、overview_path を path として、getElevationAlongPath() に渡してみるとこんな感じです。サンプル数は overview_path に含まれる点の数に合わせてみています(このページの作成時では34でした)。
// 複数のgoogle.maps.Markerに吹き出しをつける function attachMessage(marker, msg) { google.maps.event.addListener(marker, "click", function(event) { new google.maps.InfoWindow({ content: msg }).open(marker.getMap(), marker); }); } var map = new google.maps.Map(document.getElementById("map"), { zoom: 7, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); new google.maps.DirectionsService().route({ origin: new google.maps.LatLng(35.631089,139.266776), // 清滝駅 destination: new google.maps.LatLng(35.631105,139.256127), // 高尾山駅; travelMode: google.maps.DirectionsTravelMode.WALKING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { new google.maps.DirectionsRenderer({ map: map, suppressMarkers: true }).setDirections(result); new google.maps.ElevationService().getElevationAlongPath({ path: result.routes[0].overview_path, samples: result.routes[0].overview_path.length }, function(results, status) { if (status == google.maps.ElevationStatus.OK) { for (var i in results) { if (results[i].elevation) { var elevation = results[i].elevation; var marker = new google.maps.Marker({ position: results[i].location, map: map }); attachMessage(marker, "標高 " + elevation + "m"); } } } else if (status == google.maps.ElevationStatus.INVALID_REQUEST) { alert("ElevationRequestに問題アリ!渡している内容を確認せよ!!"); } else if (status == google.maps.ElevationStatus.OVER_QUERY_LIMIT) { alert("短時間にElevationRequestクエリを送りすぎ!落ち着いて!!"); } else if (status == google.maps.ElevationStatus.REQUEST_DENIED) { alert("このページでは ElevationRequest の利用が許可されていない!・・・なぜ!?"); } else if (status == google.maps.ElevationStatus.UNKNOWN_ERROR) { alert("ElevationServiceで原因不明のなんらかのトラブルが発生した模様。"); } else { alert("えぇ~っと・・、ElevationService バージョンアップ?"); } }); } else if (status == google.maps.DirectionsStatus.INVALID_REQUEST) { alert("DirectionsRequestに問題アリ!渡している内容を確認せよ!!"); } else if (status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) { alert("DirectionsRequestのDirectionsWaypointsが多すぎ!"); } else if (status == google.maps.DirectionsStatus.NOT_FOUND) { alert("DirectionsRequestのorigin,destination,waypointsのいずれかのジオコーディングに失敗!"); } else if (status == google.maps.ElevationStatus.OVER_QUERY_LIMIT) { alert("短時間にDirectionsRequestクエリを送りすぎ!落ち着いて!!"); } else if (status == google.maps.ElevationStatus.REQUEST_DENIED) { alert("このページでは DirectionsRequest の利用が許可されていない!・・・なぜ!?"); } else if (status == google.maps.ElevationStatus.UNKNOWN_ERROR) { alert("DirectionsServiceで原因不明のなんらかのトラブルが発生した模様。"); } else if (status == google.maps.ElevationStatus.ZERO_RESULTS) { alert("DirectionsServiceでorigin,destinationを結ぶ経路が見つかりません。"); } else { alert("えぇ~っと・・、DirectionsService バージョンアップ?"); } });