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 地図全般の開発に関するお悩みごとがあれば、お問い合わせください。

 

バイ

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

2018.03.31

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

みなさん、こんにちは。

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

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

続きを読む

2016.09.20

Google Maps と 360°パノラマ画像の連携

みなさん、こんにちは。

 

Googleマップにあるストリートビューの機能ですが、カスタマイズすれば自分が撮影したパノラ・・・

続きを読む

2016.08.23

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

みなさん、こんにちは!

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

続きを読む

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

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

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

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