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

 

 

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

ルート検索レンダリングのカスタマイズ

 

 

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

 

 

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

 

バイ

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

2018.03.31

Googleマップに地域メッシュを描画する

みなさん、こんにちは。

今回は、地域メッシュを Google マップ上に描画してみたいと思います。

地域メッシュは、Wik・・・

続きを読む

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2017.08.20

Google Static Maps API の使い方

みなさん、こんにちは!

今回は、今まで紹介していなかった「Google Static Maps API」の使い方を紹介いたします。

続きを読む

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

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

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