マルティスープ
Staff Blog

2018.04.20

Google マップでルート検索のレンダリングをカスタマイズ

みなさん、こんにちは！

Google Maps JavaScript API でルート検索を行い、その結果を地図上にレンダリングするとき、マーカーを非表示にしたり、ルート線の色を変更したいと思ったことはありませんか？

私も最近知りました。ちゃんとリファレンスを読まないとダメですね…

通常、ルート検索を行い、結果を地図上に反映するときは、以下のように行います。

// 地図初期化
var map = new google.maps.Map(document.getElementById("map"), {
    zoom : 10,
    center: new google.maps.LatLng(35.7, 139.7),
    mayTypeId: google.maps.MapTypeId.ROADMAP
});

var directionsService = new google.maps.DirectionsService;
var directionsRenderer = new google.maps.DirectionsRenderer;

// ルート検索を実行
directionsService.route({
    origin: "東京駅",
    destination: "新宿駅",
    travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
    console.log(response);
    if (status === google.maps.DirectionsStatus.OK) {
        // ルート検索の結果を地図上に描画
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(response); 
    }
});

DirectionRenderer にはオプション機能があり、以下の表に示すような設定が可能です。

directionsRenderer.setDirections を行う前に、directionsRenderer.setOptions を設定すると適用されます。

// オプション設定
directionsRenderer.setOptions({
    suppressMarkers: false,
    suppressPolylines: true,
    suppressInfoWindows: false,
    draggable: true,
    preserveViewport: false,
    markerOptions: {
        icon: 'pin_01.png'
    },
    polylineOptions: {
        strokeColor: '#ff0000',
        strokeOpacity: 0.5,
        strokeWeight: 3
    }
});

また、吹き出しに表示されるテキストを変更する方法は、色々調べましたが標準機能ではなさそうです。しかし、無理やりですが、ルート検索結果に含まれる「start_address」「end_address」を置き換えることで、変更できることがわかりました。

directionsService.route({
    origin: "東京駅",
    destination: "新宿駅",
    travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
    console.log(response);
    if (status === google.maps.DirectionsStatus.OK) {
        // ルートの所要時間
        var time = response.routes[0].legs[0].duration.text;  
        // ルートの距離
        var dist = response.routes[0].legs[0].distance.text; 
        // start_address のテキストを変更
        response.routes[0].legs[0].start_address = '出発地点：' + start; 
        // end_address のテキストを変更
        response.routes[0].legs[0].end_address = '目的地点：' + end + '出発地点からの距離：' + dist + '出発地点からの所要時間：'+ time;
        // ルート検索の結果を地図上に描画
        directionsRenderer.setMap(map);
        directionsRenderer.setDirections(response); 
    }
});

以下がサンプルのページです。メニューから変更したい項目をチェックしルート検索を実行してください。

ちょっとした見た目の変更であれば、上記の方法でも構いませんが、もっと細かく変更したい場合は、マーカーやライン、吹き出しを自分で描画するしかないと思います。それ程、難しいことではありませんので、チャレンジしてみてください。

Google Maps API 地図全般の開発に関するお悩みごとがあれば、お問い合わせください。

バイ