Search

Google Maps JavaScript API v3The Google Directions API（ルート検索）

  1. The Google Directions APIについて〔ルート検索〕
  2. 指定した2地点間のルートを検索〔交通手段（travelMode）、ルート表示・非表示〕
  3. 都内のお買いものスポットをルート検索〔waypointsで経由地点指定〕
Google Maps JavaScript API V3

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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop