MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

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 にはオプション機能があり、以下の表に示すような設定が可能です。

オプション 説明
draggable true を指定するとルート線をドラッグすることができ、ルートを変更することができます。
suppressMarkers true を指定するとマーカーが非表示になります。
suppressPolylines true を指定するとルート線が非表示になります。
suppressInfoWindows true を指定するとマーカーをクリックしても吹き出しが表示されません。
preserveViewport true を指定するとビューの移動(ルート全体を表示する)を行いません。
markerOptions マーカーの形状を変更します。
ただし、全て同じマーカーになってしまいます。
polylineOptions ルート線の形状(色や太さなど)を変更します。

 

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); 
    }
});

 

 

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

Full Screen

 

 

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

 

 

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

 

バイ

【関連記事】こんな記事も読まれています

2016.08.23

Google Maps でロングタップのイベントを発生させるには

みなさん、こんにちは!

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツール・・・

続きを読む

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

 - Google Maps Directions API, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)