Google Maps JavaScript API v3The Google Directions API（ルート検索）
- The Google Directions APIについて〔ルート検索〕
- 指定した2地点間のルートを検索〔交通手段（travelMode）、ルート表示・非表示〕
- 都内のお買いものスポットをルート検索〔waypointsで経由地点指定〕
The Google Directions APIについて
ルート検索
2013/4/15
Google Maps JavaScript API v3 - Directions Service
Directionsサービスは、指定した出発地点から目的地点までのルート検索ができるサービス。 Google Maps APIのルートサービスからのルート検索結果をマップ上に描画できます。 結果のルート情報は、自身で表示することもできますが、DirectionsRendererオブジェクトを使うと簡単にHTML出力できます。
オプションで、交通手段や経由地点の指定も可能です。
指定した2地点間のルートを検索
交通手段（travelMode）、ルート表示・非表示
2013/4/15
originに出発地点、destinationに到着地点を指定すると、その間のルートを検索することができます。
ルート検索の出発地点と到着地点は、文字列（例：東京駅）、あるいはLatLngオブジェクト（例：new google.maps.LatLng(35.681382,139.766084)）で指定します。
以下のサンプルでは、「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。
右カラムにあるボタンでルートの表示・非表示、プルダウンで交通手段（自動車、自転車、電車、徒歩）を切り替えられます。
交通手段は4種類あります。省略した場合はデフォルトのDRIVING（自動車）が適用されます。
| TravelMode | 説明 |
|---|---|
| google.maps.DirectionsTravelMode.DRIVING | 自動車。 自転車専用道路と優先道路を使用した自転車ルート。 |
| google.maps.DirectionsTravelMode.BICYCLING | 自動車。 自転車専用道路と優先道路を使用した自転車ルート。 |
| google.maps.DirectionsTravelMode.TRANSIT | 電車。 公共交通機関を使用したルート。 |
| google.maps.DirectionsTravelMode.WALKING | 徒歩。 歩行者専用道路と歩道を使用した徒歩ルート。 |
var request={
origin:startSpot, /* 出発地点 */
destination:endSpot, /* 到着地点 */
travelMode:mode /* トラベルモード */
};
directionsService.route(request, function(response, status) {
if (status==google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function(){
var renderFLG=false;
var directionsDisplay;
var directionsService=new google.maps.DirectionsService();
var map,mode;
var currentDirections=null;
var startSpot="東京駅";
var endSpot="六本木ヒルズ";
initialize();
/* 地図初期化 */
function initialize() {
var myOptions={
zoom:14,
center: new google.maps.LatLng(35.670236,139.749832),//虎の門
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* 地図オブジェクト生成 */
map=new google.maps.Map(document.getElementById("map"), myOptions);
if(!renderFLG) render();
calcRoute(startSpot,endSpot);
}
/* ルート検索結果を描画 */
function render(){
dbg("render:"+renderFLG);
renderFLG=true;
/* ルートをレンダリング */
directionsDisplay=new google.maps.DirectionsRenderer({
"map": map,
"preserveViewport": true,
"draggable": true
});
/* 右カラムにルート表示 */
directionsDisplay.setPanel(document.getElementById("directions_panel"));
/* 出発地点・到着地点マーカーが移動された時 */
google.maps.event.addListener(directionsDisplay, 'directions_changed',function() {
currentDirections=directionsDisplay.getDirections();
var route=currentDirections.routes[0];
var s="";
for(var i=0; i<route.legs.length; i++) {
var routeSegment=i+1;
s+=route.legs[i].start_address+'to';
s+=route.legs[i].end_address+'\n';
s+=route.legs[i].distance.text;
}
dbg("directions_changed:"+s);
});
}
/* モード変更 */
$("#mode").bind("change",function(){
$(".button-group button").removeClass("active");
calcRoute(startSpot,endSpot);
$("#show").addClass("active");
});
/* ルート算出 */
function calcRoute(startSpot,endSpot){
switch($("#mode").val()){
case "driving":
mode=google.maps.DirectionsTravelMode.DRIVING;
break;
case "bicycling":
mode=google.maps.DirectionsTravelMode.BICYCLING;
break;
case "transit":
mode=google.maps.DirectionsTravelMode.TRANSIT;
break;
case "walking":
mode=google.maps.DirectionsTravelMode.WALKING;
break;
}
if(!renderFLG) render();
var request={
origin:startSpot, /* 出発地点 */
destination:endSpot, /* 到着地点 */
travelMode:mode /* 交通手段 */
};
/* ルート描画 */
directionsService.route(request, function(response, status) {
if (status==google.maps.DirectionsStatus.OK) {
dbg(response);
directionsDisplay.setDirections(response);
}else{
dbg("status:"+status);
}
});
}
/* ルート表示・非表示切り替え */
$(".button-group button").click(function(e){
$(".button-group button").removeClass("active");
var id=$(this).attr("id");
if(id=="show"){
calcRoute(startSpot,endSpot);
$(this).addClass("active");
}else{
$(this).addClass("active");
reset();
}
});
/* ルート削除 */
function reset(){
currentDirections=null;
directionsDisplay.setMap(null);
renderFLG=false;
}
});
var dbg=function(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
</script>
<style>
#map { float:left; width:70%; height:100%; }
#side { float:right; width:30%; height:100%; }
#side .inner { padding:10px; overflow:auto; }
</style>
</head>
<body>
<h1>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</h2>
<p>「東京駅」から「六本木ヒルズ」までルートを検索し、右カラムにルート検索結果を表示します。 出発地点A・到着地点Bのマーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。</p>
<div id="map"><!-- 地図の埋め込み表示 --></div>
<div id="side">
<div class="inner">
<p>
<label for="mode">モード：<select id="mode" name="mode">
<option value="driving" selected>DRIVING（自動車）</option>
<option value="bicycling">BICYCLING （自転車）</option>
<option value="transit">TRANSIT（電車）</option>
<option value="walking">WALKING（徒歩）</option>
</select></label>
</p>
<div class="button-group">
<button id="show" class="button active">ルート表示</button>
<button id="hide" class="button">ルート非表示</button>
</div>
<div id="directions_panel" style="width:100%"></div>
</div>
</div><!-- #side -->
<br clear="all" />
</body>
</html>
都内のお買いものスポットをルート検索
waypointsで経由地点指定
2013/4/15
waypointsを指定すると、出発地点から目的地点までのルートに経由地点をマーカーでたてられます。
ZERO_RESULTS： リクエストした交通手段でのルート検索結果がない場合は、ZERO_RESULTSが返ります。 下記のサンプルでは、自転車ルートで検索すると「ZERO_RESULTS」が返ることがあります。
MAX_WAYPOINTS_EXCEEDED： 出発地点・到着地点に加えて、waypointsに指定できる経由地点は最大8か所までです。 つまり、マーカーは最大10か所立てられます。 それ以上指定すると、多すぎるよとMAX_WAYPOINTS_EXCEEDEDが返ります。 （Google Maps API for Businessでは23か所まで指定できるみたい）
以下のサンプルでは、東京駅から渋谷駅までの間にある、渋谷ヒカリエなど、メジャーな都内のお買いものスポットを経由地点としてwaypointsに指定してルートを検索してみました。 右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。
各経由地点のルートのリンク押すと、その区間のルートのみ地図上に表示します。
var request={
waypoints:_waypts, /* 経由地点の配列（最大8か所） */
optimizeWaypoints:true, /* 経由地点最適化の有無 */
origin:curStartSpot, /* 出発地点 */
destination:curEndSpot, /* 到着地点 */
travelMode:mode /* 交通手段 */
};
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function(){
/* waypts（最大8か所） */
var ary=[
"東京ソラマチ",
"お台場",
"東京ミッドタウン",
"六本木ヒルズ",
"赤坂サカス",
"恵比寿ガーデンプレイス",
"表参道ヒルズ",
"渋谷ヒカリエ"
];
var waypts=[];
for (var i=0; i<ary.length; i++) {
waypts.push({
location:ary[i],
stopover:true
});
}
var renderFLG=false;
var directionsDisplay;
var directionsService=new google.maps.DirectionsService();
var map,mode;
var oldDirections=[];
var currentDirections=null;
var defaultStartSpot="東京駅";
var defaultEndSpot="品川駅";
var curStartSpot,curEndSpot;
initialize();
/* 地図初期化 */
function initialize() {
var myOptions={
zoom:12,
center: new google.maps.LatLng(35.654071,139.749838),//芝公園
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* 地図オブジェクト生成 */
map=new google.maps.Map(document.getElementById("map"), myOptions);
if(!renderFLG) render();
$("#roots").empty();
var s="";
for(var i=0; i<ary.length; i++){
if(i==0){
start=defaultStartSpot;
end=ary[i];
}else if(i==(ary.length-1)){
start=ary[i];
end=defaultEndSpot;
}else{
start=ary[i];
end=ary[i+1];
}
s+="<li><a href='#' rel='"+start+"==="+end+"'>"+start+"==="+end+"</a></li>";
}
$("#roots").empty().append(s);
curStartSpot=defaultStartSpot;
curEndSpot=defaultEndSpot;
calcRoute();
}
/* ルート検索結果を描画 */
function render(){
//dbg("render:"+renderFLG);
renderFLG=true;
/* ルートをレンダリング */
directionsDisplay=new google.maps.DirectionsRenderer({
"map": map,
"preserveViewport": true,
"draggable": true
});
/* 右カラムにルート表示 */
directionsDisplay.setPanel(document.getElementById("directions_panel"));
/* 出発地点・到着地点マーカーが移動された時 */
google.maps.event.addListener(directionsDisplay, 'directions_changed',function() {
currentDirections=directionsDisplay.getDirections();
var route=currentDirections.routes[0];
var s="";
for(var i=0; i<route.legs.length; i++) {
var routeSegment=i+1;
s+=route.legs[i].start_address+'to';
s+=route.legs[i].end_address+'\n';
s+=route.legs[i].distance.text;
}
//dbg("directions_changed:"+s);
});
}
/* モード変更 */
$("#mode").bind("change",function(){
$(".button-group button").removeClass("active");
calcRoute();
$("#show").addClass("active");
});
/* ルート算出 */
function calcRoute(){
switch($("#mode").val()){
case "driving":
mode=google.maps.DirectionsTravelMode.DRIVING;
break;
case "bicycling":
mode=google.maps.DirectionsTravelMode.BICYCLING;
break;
case "transit":
mode=google.maps.DirectionsTravelMode.TRANSIT;
break;
case "walking":
mode=google.maps.DirectionsTravelMode.WALKING;
break;
}
if(!renderFLG) render();
if(curStartSpot==defaultStartSpot && curEndSpot==defaultEndSpot){
console.log("全ルート");
//全ルート
_waypts=waypts;
}else{
//一部ルート
_waypts=[];
}
var request={
waypoints:_waypts,
optimizeWaypoints:true,
origin:curStartSpot, /* 出発地点 */
destination:curEndSpot, /* 到着地点 */
travelMode:mode /* 交通手段 */
};
/* ルート描画 */
directionsService.route(request, function(response, status) {
dbg(response);
if (status==google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}else{
alert("その交通手段はリクエスト結果がありません\nstatus:"+status);
}
});
}
/* 区間を選択した時 */
$("#roots").on("click","a",function(e){
var rel=$(this).attr("rel").split("===");
curStartSpot=rel[0];
curEndSpot=rel[1];
calcRoute();
return false;
});
/* ルート表示・非表示切り替え */
$(".button-group button").click(function(e){
$(".button-group button").removeClass("active");
var id=$(this).attr("id");
if(id=="show"){
calcRoute();
$(this).addClass("active");
}else{
$(this).addClass("active");
reset();
}
});
/* ルート削除 */
function reset(){
currentDirections=null;
directionsDisplay.setMap(null);
renderFLG=false;
}
});
var dbg=function(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
</script>
<style>
#map { float:left; width:70%; height:100%; }
#side { float:right; width:30%; height:100%; }
#side .inner { padding:10px; overflow:auto; }
</style>
</head>
<body>
<h1>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</h2>
<p>都内のお買いものスポットのルートを検索し、右カラムにルート検索結果を表示します。マーカーをドラッグすると、それぞれの地点を変更されます。右カラムにあるボタンでルートの表示・非表示、プルダウンでトラベルモード（自動車、自転車、電車、徒歩）を切り替えられます。</p>
<div id="map"><!-- 地図の埋め込み表示 --></div>
<div id="side">
<div class="inner">
<p>
<label for="mode">モード：<select id="mode" name="mode">
<option value="driving" selected>DRIVING（自動車）</option>
<option value="bicycling">BICYCLING （自転車）</option>
<option value="transit">TRANSIT（電車）</option>
<option value="walking">WALKING（徒歩）</option>
</select></label>
</p>
<div class="button-group">
<button id="show" class="button active">ルート表示</button>
<button id="hide" class="button">ルート非表示</button>
</div>
<ol id="roots">
</ol>
<div id="directions_panel" style="width:100%"></div>
</div>
</div><!-- #side -->
<br clear="all" />
</body>
</html>