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

 

バイ

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2016.12.22

未来の交通状況を考慮したルート検索

みなさん、こんにちは。

 

Google Maps API では、指定した日時の交通状況を予測したかたちでルート検索を行・・・

続きを読む

2018.01.13

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

みなさん、こんにちは。

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

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

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