Google maps directions api 使い方

2018.08.02

Directions と Directions Advanced の違い

みなさん、こんにちは。

7月16日より、Google Maps APIs は Google Maps Platform と名前を変え、新しい価格体系に変更されました。

その中で、みなさんがよく利用する Directions API （ルート検索）は、２つの価格体系に分かれました。１つは、Directions で、もう１つが Directions  Advanced です。

Google Maps Platform の料金表

では、この２つは何が違うのか簡単に解説いたします。

Google のルート検索では、出発地、目的地以外に経由地を設定することができます。その経由地の数が、11個以上になると、Directions Advanced としての価格になります。

また、経由地点を設定した場合、最適なルートを検索するオプションがあります。こちらも Directions Advanced の対象です。なお、最適なルート検索とは、適当な順番で経由地を設定しても効率よい順番でルート検索してくれる機能のことです。

詳しくは、下記ブログを参照ください。動作をお試しすることができます。

Directions API で巡回セールスマン問題を解決する

また、Google の一番の特徴である、現在・過去の交通状況を考慮したルート検索を行うと、Directions Advanced になります。交通状況を考慮したルート検索とは、例えば夜中に車で移動する場合と、朝8時頃に移動する場合では、当然同じルートでも到着までの時間は変わるはずですよね。あるいは、日中だったらこっちのルートの方が早く到着するとか。このように、時間帯や日付などを考慮することができるのです。

詳しくは、下記ブログをご参照ください。動作をお試しすることができます。

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

まとめると、違いは以下の3つです。

・経由点を11個以上設定する。
・ルートの最適化を有効にする。
・交通状況を考慮したルート検索を行う。

個人的には、ルート検索する際に、交通状況を考慮しないで行うことはありえないと思っていたので、価格が高くなるのは、少し残念です。しかし、Google としては、”価値”のある検索を行うことには、費用を払ってほしいという思いがあるのではと推測します。

UBER のようなアプリでは、おそらく Directions Advanced を利用しているでしょう。他のアプリと差別化するためにも必要なことなのかなと感じているところです。

みなさんも是非、色々な”価値”を考えながらご利用ください。

バイ！

マッピィでは、Google社が提供しているGoogle Maps API[1]の利用方法に特化した情報を提供しています。

Google Mapsを自分のサイトやWebアプリケーションとして利用できるようにGoogle社が提供しているのがGoolge Maps APIです。

これまで「Google Maps API Standard Plan（無償版）」と「Google Maps APIs Premium Plan（有償版）」に分かれていたものが、2018年7月16日から「Google Maps Platform（従量制料金）」という新しいサービスに統合されました。Google Maps Platformを利用するには、まずGoogle Cloudへ登録する必要があります。

従量制料金については、毎月200 USドル分は無料でGoolge Maps APIを利用することができます。相当数のアクセスを無料枠でカバーできます。

Google Cloudへ登録後、API Keyを取得することで「Maps JavaScript API・Geocoding API・Directions APIなど」が利用可能となります。

マッピィではAPIを利用したスクリプトのサンプルを交え解説しています。利用方法の基礎を中心に情報を提供しています。

Google Maps APIでできること

Google Maps APIを使うと任意の座標(経度・緯度情報や住所情報)の地図を表示させることが簡単にでき、目印としてマーカー(カスタマイズの可能)を地図上に表示させたり指定の線を地図上に描くことができます。またデータベースなどを利用して地図情報アプリケーションを作成することもできます。

ルート案内では歩行・車など利用する手段による最短ルートを瞬時に地図上に表示することができ、マーカーも必要に応じドラックで移動するこも可能です。同時に地図情報もリアルタイムに取得できます。

※リクエストを制限することが可能（課金設定で制限を設けたり解除もでき、細かな設定が可能です。）
APIは、従来のパソコン用ブラウザ アプリケーションとしてだけでなく、スマートフォンなどの携帯端末でも快適に動作するように設計されています。

スクリプト サンプル

よく利用されるマーカーの表示・マーカーをまとめて追加（利用度地図の任意の場所に複数のマーカを表示）する方法

便利な機能として、指定の2点間ルートを案内する・ルート案内と距離を表示などのスクリプトを掲載しています。 特に優れている機能はマーカーをドラッグすると、そのタイミングで随時ルート情報・移動距離・直線距離が更新可能なことです。

役に立ちそうなサンプルを公開しています。

[1]^Google Maps API は Google LLC. に帰属するシステム＆サービスで当サイト(マッピィ)とは一切関係はありません。

ルート案内

2点間のルート案内

・ルート（各種の交通手段を使用）は、DirectionsService オブジェクトを使用して計算できます。このオブジェクトは Google Maps API ルート サービスと通信し、サービスはルート リクエストを受信して計算した結果を返します。これらのルート結果をユーザー自身で処理することも、DirectionsRenderer オブジェクトを使用して結果をレンダリングすることもできます。

・ルートでは、原点と目的地をテキスト文字列（「東京、大阪」、「名古屋、静岡、京都」など）または LatLng 値として指定できます。ルート サービスは一連のウェイポイントを使用して、複数の部分からなるルートを返すことができます。ルートは、地図上にルートを描画するポリラインとして表示されるか、要素内のテキストによる説明として表示されます（「Williamsburg Bridge ランプを右折」など）。

・ルート リクエストルート サービスへのアクセスは、Google Maps API が外部サーバーへの呼び出しを行う必要があるため、非同期に行われます。このため、コールバック methodを渡してリクエストの完了時に実行する必要があります。このコールバック methodにより結果が処理されます。ルート サービスは、独立した routes[] の配列として複数のルートを返すことがあります。

・ルートを使用するには、タイプ DirectionsService のオブジェクトを作成して DirectionsService.route() を呼び出してルート サービスを開始し、入力用語を含む DirectionsRequest オブジェクト リテラルとレスポンスの受信時に実行するコールバック methodを渡します。

DirectionsRequest オブジェクト定数には次のフィールドがあります。

交通手段：ルートを計算する際、使用する交通手段を指定する必要があります。現時点でサポートされている交通手段は次のとおりです。

注: 徒歩ルートには明確な歩行者用道路が含まれないことがあるため、徒歩ルートから DirectionsResult に警告が返されます。デフォルトの DirectionsRenderer を使用していない場合は、これを表示する必要があります。

単位系：デフォルトでは、ルートは出発地の国または地点の単位系を使用して計算され、表示されます。たとえば、「東京、日本橋」から「大阪、梅田」へのルートはマイルを使用して表示され、この逆のルートはキロメートルで表示されます。この単位系は、次の DirectionsUnitSystem 値のいずれかを使用してリクエスト内で明示的に設定することでオーバーライドできます。

注: 単位系設定は、ユーザーに表示されるテキストにのみ影響します。

var request = {
origin: "東京",
destination: "大阪",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
//ドライビングモード指定（車）
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
//単位km表示
optimizeWaypoints: true,//最適化された最短距離にする。
avoidHighways: false,//trueで高速道路を使用しない
avoidTolls: false //trueで有料道路を使用しない
};

サンプルコード

サンプル.js

rendererOptions = {
draggable: true,
preserveViewport:false
}
var directionsDisplay = 
  new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = 
  new google.maps.DirectionsService();
var map;

function initialize() {
 var zoom = 7;
 var mapTypeId = google.maps.MapTypeId.ROADMAP
 var opts = {
 zoom: zoom,
 mapTypeId: mapTypeId
 }
 map = new google.maps.Map
 (document.getElementById("map_canvas"),opts);
   directionsDisplay.setMap(map);
 google.maps.event.addListener(directionsDisplay,
   'directions_changed', function(){
 })
 calcRoute();
}

function calcRoute() {
 var request = {
 origin: "東京",
 destination: "大阪",
 travelMode: google.maps.DirectionsTravelMode.DRIVING,
 unitSystem: google.maps.DirectionsUnitSystem.METRIC,
 optimizeWaypoints: true,
 avoidHighways: false,
 avoidTolls: false
 }
 directionsService.route(request,
  function(response,status){
  if (status == google.maps.DirectionsStatus.OK){
  directionsDisplay.setDirections(response)}
  })
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API 2点間のルート案内</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>2点間のルート案内 マーカードラッグでルート情報が更新</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例 2点間のルート案内 マーカードラッグで情報が更新されます。

 地図サンプルイメージ 
 2点間のルート案内 
 サンプルではルートが表示 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル > 2点間のルート案内

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ルート案内サンプル

地図上をクリックすると、マーカーが現れ2点間の移動距離と直線距離およびルートを地図上に表示します。

マーカー表示後はドラッグ可能で、ドラッグした場合は再計算を行います。３点目以降をクリックすると、最後の表示マーカーを用いて再検索します。

サンプルコード

サンプル.js

var myMap;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
var myMarkers = [];

function reRender() {
if (myMarkers.length == 1) {
 return;
}
var myTravelMode =
 (document.getElementById('TravelMode').value == 'DRIVING')
 ? google.maps.DirectionsTravelMode.DRIVING :
 google.maps.DirectionsTravelMode.WALKING;
directionsService.route({
 origin: myMarkers[0].getPosition(), 
 destination: myMarkers[1].getPosition(),
 travelMode: myTravelMode
}, function(result, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 directionsRenderer.setDirections(result);
 document.getElementById("journey").value =
  (result.routes[0].legs[0].distance.value >= 1000)
 ? (result.routes[0].legs[0].distance.value / 1000)
 + 'km' : result.routes[0].legs[0].distance.value + 'm';
 } else {
 alert('ルート検索できませんでした');
 }
})
var d = Math.round
 (google.maps.geometry.spherical.computeDistanceBetween
 (myMarkers[0].getPosition(), myMarkers[1].getPosition()));
 document.getElementById("distance").value = (d >= 1000)
 ? (d / 1000) + 'km' : d + 'm';
}

function putMarker() {
var neoMarker = new google.maps.Marker({
 position: arguments[0],
 map: myMap,
 draggable: true
})
neoMarker.setMap(myMap);
google.maps.event.addListener(neoMarker,'dragend',
function(mouseEvent) {
 reRender();
})
myMarkers.push(neoMarker);

if (myMarkers.length == 1) {
 return;
} else if (myMarkers.length == 3) {
 myMarkers.shift().setMap(null);
}
reRender();
}

$(document).ready(function() {
var param = new Array();
var a = window.location.search.substring(1);
var b = a.split('&');
var mm = new Array();
for (var i in b) {
 var vals  = new Array(2);
 vals = b[i].split('=', 2);
 if (vals[0] == 'm'){
  if (vals[1].match(/^(-?\d+\.?\d*),(-?\d+\.?\d*)$/)) {
  mm.push(new google.maps.LatLng(RegExp.$1,RegExp.$2,true));
 }
}
param[vals[0]] = vals[1];
}
delete b;
delete a;

var opts = {
 zoom: (('z' in param) && (parseInt(param['z']) >= 0))
 ? parseInt(param['z']) : 11,
 center: (('c' in param) && 
 (param['c'].match(/^(-?\d+\.?\d*),(-?\d+\.?\d*)$/)))
 ? mapCenter = new google.maps.LatLng
 (RegExp.$1, RegExp.$2, true):
 new google.maps.LatLng(35.68,139.7),
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: true,
 scaleControl: true,
 navigationControlOptions: true,
 disableDoubleClickZoom: true,
 scrollwheel: false,
 zIndex: 0
 }
 myMap = new google.maps.Map
 (document.getElementById("map_canvas"),opts);
 for (var i in mm) {
  putMarker(mm[i]);
 }

 delete mm;
// クリックでマーカー設置
google.maps.event.addListener(myMap, 'click',
function(mouseEvent) {
	putMarker(mouseEvent.latLng)
})

directionsRenderer = new google.maps.DirectionsRenderer	({
map: myMap, suppressMarkers: true });
document.getElementById("journey").disabled = true;
document.getElementById("distance").disabled = true;
})

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ルート案内と距離表示</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
input.value {height:26px;background-color: #fff;color:#000;font-weight:bold;text-align:right}
select {height:26px;}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="サンプル.js"></script>
</head>
<body>
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ルート案内と距離表示
<br><span style="color:#B22222;font-weight:700">最初にスタート地点とエンド地点をクリック</span>
<br>マーカードラッグまたは地図上をクリックで情報が更新されます。</p>
<p>移動手段 <select id="TravelMode" onchange="reRender()">
<option value="WALKING" selected>徒歩</option>
<option value="DRIVING">車</option></select></p>
<p>移動距離 <input type="text" id="journey" class="value" value="">
直線距離 <input type="text" id="distance" class="value" value="">
</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例 ルート案内と距離表示 マーカードラッグまたは地図上をクリックで情報が更新されます。

 地図サンプルイメージ 
 ルート案内と距離表示 
 サンプルではルートが表示 

サンプルイメージ地図は地理院タイル （標高タイル）を加工して作成

Google Maps サンプル > ルート案内と距離表示

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

Google Maps APIの機能は？

Google Maps APIの一覧は？

Google Maps APIの無料枠は？

Google API 何ができる？