Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法

おじいちゃん

2014.12.02

Web制作

こんにちは、フロントエンジニアのおじいちゃんです。

今回は、任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。

Googleマップ描画

サンプルとして、任意に入力した場所からLIGまでの、徒歩でのルートを描画することにしたいと思います。

まずは通常のGoogleマップを設置します。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js/sensor=TRUE"></script>

 <div id="map_canvas" style="width: 800px; height: 600px;"></div>
 <div class="searchBox">
    <form>
        <input id="mapSearch" type="text">
        <input id="mapButton" type="button" value="検索">
    </form>
 </div>

var mapdiv = document.getElementById('map_canvas');
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;

//オプション設定
var myOptions = {
    zoom: 17,
    center: new google.maps.LatLng(35.7102849, 139.77714030000004),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
};

//マップを描画
var map = new google.maps.Map(mapdiv, myOptions);

任意に入力した場所のルートデータを取得する必要があるので、テキストエリアとボタンも作りました。

googlemap_01

プレイス情報を取得

PlacesServiceライブラリを使うことで、定義された領域にある施設や地理的位置などを取得することができます。

PlacesServiceのtextSearch()メソッドを呼び出し、入力した位置のプレイス情報を取得します。

なお、PlacesServiceを利用するためには、Googleマップを読み込んでいるsrcにLibrariesパラメータを追記してあげる必要があります。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>

function getPlace(){
    var mapSearch = document.getElementById('mapSearch');
    if(mapSearch.value){
        var service = new google.maps.places.PlacesService(map);
        var searchValue = mapSearch.value;
        var placeRequest = {
            query: searchValue, //入力したテキスト
        }

        //リクエストを送ってあげるとプライス情報を格納したオブジェクトを返してくれます。
        service.textSearch(placeRequest,function(results,status){
            var places = results[0];
            toGeocode(places);
        });
    }
}

PlacesServiceに渡したリクエストは下記になります。

query（必須）	「restaurant」などの検索するテキスト文字列。プレイスサービスは、この文字列と合致する候補を関連性の高い順に並べ、結果として返します。

プレイス情報をあいまいなキーワードで検索した場合、該当したものをすべて配列にして返してきます。

何度か試したところ、最初に返してきたオブジェクトで問題なさそうだったので、そちらを使ってみることにします。

取得したプレイス情報のgeocodeに変換

取得したプレイス情報をgeocodeに変換します。

function toGeocode(places){
    //取得したplacesオブジェクトから緯度と経度をgeocodeとして渡します。
    var latlng = new google.maps.LatLng(places.geometry.location.lat(),places.geometry.location.lng());
    //ルート取得
    getRoute(latlng);
}

geocodeからルート情報を取得

geocodeからルート情報を取得するには、directionsServiceのrouteメソッドを利用します。

directionsService.route()に渡すリクエストは下記になります。

var request = {
        origin: latlng, //入力地点の緯度、経度
        destination: ligLocation.position, //到着地点の緯度、経度
        travelMode: google.maps.DirectionsTravelMode.WALKING //ルートの種類
    }

origin（必須）	ルートの計算の開始位置を指定します。この値は、String 値（「シカゴ、イリノイ」など）か LatLng 値として指定できます。
destination（必須）	ルートの計算の終了位置を指定します。この値は、String 値（「シカゴ、イリノイ」など）か LatLng 値として指定できます。
travelMode（必須）	ルート計算に使用する交通手段を指定します。（有効な値については、下記をご覧ください。）

travelModeでは交通手段を指定できる方法が4つあります。
WALKINGを渡した場合は徒歩でのルート、DRIVINGを渡した場合は車でのルートを返してきます。

google.maps.TravelMode.DRIVING（デフォルト）: 道路網を利用した標準の運転ルートです。
google.maps.TravelMode.BICYCLING: 自転車専用道路と優先道路を使用した自転車ルートをリクエストします。
google.maps.TravelMode.TRANSIT: 公共交通機関を使用したルートをリクエストします。
google.maps.TravelMode.WALKING: 歩行者専用道路と歩道を使用した徒歩ルートをリクエストします。

なお、残念なことに、日本で対応してるものは「TravelMode.DRIVING」と「TravelMode.WALKING」の2つのみになります。残念です。

//ルート描画用
function getRoute(latlng){
    var request = {
        origin: latlng, //入力地点の緯度、経度
        destination: ligLocation.position, //到着地点の緯度、経度
        travelMode: google.maps.DirectionsTravelMode.WALKING //ルートの種類
    }
    directionsService.route(request,function(result, status){
        toRender(result);
    });
}

ルート情報をGoogleマップに描画

DirectionsRendererを利用することで、Googleマップにルートを描画できます。

function toRender(result){
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setDirections(result); //取得した情報をset
    directionsDisplay.setMap(map); //マップに描画
}

googlemap_3