2地点間のルートの表示方法 - Google maps API - | フロントエンド

ルート検索してマップ上に表示するための方法です。今回はフォームに【出発地点】と【到着地点】を入力してボタンを押したときにルートの検索結果を表示します。前回以前に引き続き使用しているのは「Google maps API」でその中でも今回は新しく【DirectionsService】【DirectionsRenderer】を使います！※PC推奨です。スマホの完全対応はしていません。今回のゴールはこんな感じです。

前回まではソースを引き続き使用していましたが、今回はマップの描画がされている段階からでOKです。マップが描画された状態のソースをダウンロード上記からダウンロードできるソースはAPIキーの部分のみ変更してもらえればマップの描画までが完了しています！

検索用のフォームの作成

ルートを検索するためのフォームを設置します。必要なのは

出発地点の入力フォーム
到着地点の入力フォーム
送信ボタン

の３つです。それぞれにID【from】【to】【btn】をつけます。

例

出発地<input type="text" id="from" value="">
到着地<input type="text" id="to" value="">
<input type="button" id="btn" value="ルートを表示">

今回こんな感じにスタイルをつけてみました。

HTML

<div class="form">
        <label>出発地
            <input type="text" id="from" value="国際センター駅（愛知）">
        </label>
        <span>&rarr;</span>
        <label>到着地
            <input type="text" id="to" value="五条街園">
        </label>
        <input type="button" id="btn" value="ルートを表示">
</div>

CSS

div.form{
        margin: 20px;
      }
      div.form span{
        margin: 0 30px;
      }
      div.form input[type="text"]{
        font-size: 18px;
        padding: 5px 10px;
      }
      div.form input[type="button"]{
        background-color: #2E2EFE;
        border: 0;
        padding: 8px 12px;
        color: #fff;
        margin-left: 20px;
        outline: none;
}

ルート検索のJavaScript

※マップを表示してある状態が前提です。　マップ表示ができていない場合はこちらからソースをダウンロードするかしたのソースでマップを表示することができます。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

今回新しく使うのが【DirectionsService】【DirectionsRenderer】ですが、何度かでてきますが長い部分もあるので変数にしておくのをおすすめします。

var DS = new google.maps.DirectionsService();
var DR = new google.maps.DirectionsRenderer();

DirectionsService	ルート検索を行う
DirectionsRenderer	ルート検索結果表示用のオブジェクトを生成

次にマップ自体をDirectionsRendererオブジェクトのsetMapメソッドを使ってDirectionsRendererオブジェクトを関連づけをします。

DR.setMap(map);

次にルート検索ですが、今回はクリックをした場合という前提のためクリックイベント内に書いていきます。

document.getElementById("btn").onclick = function() {
    //この中にルート検索のためのJSを記入
}

フォームからIDを使用してvalueを取得して変数にいれておきます。

var from = document.getElementById('from').value; var to = document.getElementById('to').value;

ルートを検索するためにはdirectionsServiceのrouteメソッドを使用します。使用する前にrouteメソッドに渡すリクエストを指定します。指定するのは

出発地点「origin」
到着地点「destination」
交通手段「travelMode（WALKING, DRIVING）」

の3つです。 travelModeに「WALKING」を渡した場合は徒歩でのルート、「DRIVING」を渡した場合は車でのルートが返ってきます。「origin」と「destination」は先ほど変数に入れたのでその変数を使用することで動的に変動できるように。

var request = { 
            origin: from, 
            destination: to,
            travelMode: google.maps.TravelMode.WALKING
};

最後にsetDirections()でルートを描画します。

DS.route(request, function(result, status) { 
|                DR.setDirections(result);
});

全体のJavaScriptのソースはこんな感じです。

function initMap() {

    var DS = new google.maps.DirectionsService();
    var DR = new google.maps.DirectionsRenderer(); 
     
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.170981, lng: 136.881556} ,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
     
    /* map を DirectionsRendererオブジェクトのsetMap()を使って関連付け */
    DR.setMap(map);
     
    document.getElementById("btn").onclick = function() {
        /* 開始地点と目的地点、ルーティングの種類を設定  */
        var from = document.getElementById('from').value;
        var to = document.getElementById('to').value;

        var request = { 
            origin: from, 
            destination: to,
            travelMode: google.maps.TravelMode.WALKING
        }; 
          
        DS.route(request, function(result, status) { 
                DR.setDirections(result);
        }); 
    }
}

今回のデモはこちら。

まだルート案内の表示（言葉で案内してくれるやつ）ができてないので次はそれにしようかと思います。

API

この記事を読んだ方におすすめ