- GoogleMap
- 2013-08-26 - 更新:2013-09-12
この記事は最終更新日から1年以上経過しています。
GoogleのGoogleMap APIを使ってルート検索をすることができます。
まず、ルート検索のプロパティを指定します。
// Route Request Property var request = { origin: null, // 出発地点のLatLngオブジェクト destination: null, // 到着地点のLatLngオブジェクト travelMode: google.maps.DirectionsTravelMode.DRIVING, avoidHighways: true, // true に設定すると、高速道路を可能な限りルートの計算から除外するように指定されます。(省略可能) avoidTolls: true // true に設定すると、有料道路を可能な限りルートの計算から除外するように指定されます。(省略可能) };
トラベルモードについては
DRIVING=自動車 BICYCLING=自転車 TRANSIT=電車 WALKING=徒歩
出発地点と到着地点を設定します。
request.origin = new google.maps.LatLng(34.73307796637832, 135.49859046936035); //新大阪駅 request.destination = new google.maps.LatLng(35.681003987351055, 139.76703643798828); //東京駅
DirectionsServiceのインスタンスを生成
var directionsService = new google.maps.DirectionsService();
ルート表示のオブジェクトを作成し、プロパティを設定します。
ここではGoogleMapオブジェクト、「map
」は作成済とします。
directionsDisplay = new google.maps.DirectionsRenderer({ "map": map, "preserveViewport": true, // ルート全体を表示せず、指定した座標とズームレベルで表示させたい場合にtrue "draggable": true // 経路をドラッグで変更の可/不可 });
実際にルート検索を実行します。
返ってきたレスポンスを、先程作成した表示用のオブジェクトに渡します。
directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } });
【経由地を設定する場合】
経由地の配列を作成します。
myWaypoints = []; myWaypoints.push( { location: new google.maps.LatLng(35.65535197094431, 139.7486392810783), stopover: true // このウェイポイントが実際の停止地点であるのか(true)、経由を希望しているだけなのか(false)を指定します。デフォルト:true }); myWaypoints.push( { location: new google.maps.LatLng(35.629313313361514, 139.88454606758023) });
ルート検索のプロパティを以下のように設定
// Route Request Property var request = { waypoints: myWaypoints, // 経由地点の配列(最大8か所) optimizeWaypoints: true, // 経由地点最適化の有無 origin: null, // 出発地点のLatLngオブジェクト destination: null, // 到着地点のLatLngオブジェクト travelMode: google.maps.DirectionsTravelMode.DRIVING, avoidHighways: true, avoidTolls: true };
参考URL
https://developers.google.com/maps/documentation/javascript/directions?hl=ja
5,924 views