今回はGoogle Mpas APIsの新機能「移動時間の予測」について紹介します。
以前までの「移動時間の予測」は出発時刻の直前の場合のみで、
Google Maps for Worksに契約されているユーザーのみが利用できる機能でした。
今回紹介する「移動時間の予測」は近い未来から遠い未来までの
交通状況、日時に合わせて自動時間を予測してくれる機能で、全てのユーザーが利用できます。
この機能はDirections APIとDistance Matrix APIで利用することができます。
「移動時間の予測」はGoogle Maps JavaScript APIで簡単に利用できます。
■移動時間の予測
ここからは「移動時間の予測」方法を簡単に説明します。
※Google Maps JavaScript APIを用いたGooglマップの表示は
参考サイトのGoogle API 第5回で紹介しているので参照してください。
まずルートを表示するために使用するオブジェクトを作成します。
var directionsRenderer = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
次にルートのテキスト表示設定とルートのマップを表示する設定をします。
directionsRenderer.setPanelはルートをテキストで表示するための設定です。
directionsRenderer.setMapはルートのリクエストが終わった後、
マップにルートを適用するための設定です。
directionsRenderer.setPanel(document.getElementById('panel'));
directionsRenderer.setMap(map);
最後にルートのリクエストとコールバック関数を作成します。
directionsService.routeはルートのリクエストをメソッドです。
第１引数にはリクエストをする情報を、
第２引数にはコールバック関数を設定します。
リクエストをする情報は出発地点、到着地点、トラベルモードです。
出発地点と到着地点には場所または座標を指定します。
トラベルモードにはDRIVING（自動車）を指定します。
新しい機能を使うためにdrivingOptionsを設定します。
drivingOptionsにはdepartureTimeとtrafficModelを設定しています。
departureTimeを設定することで、予測された交通状況で移動時間が推定されます。
trafficModelは遠い未来の交通状況を予測する方法です。
OPTIMISTIC（楽観的に予測）、PESSIMISTIC（悲観的に予測）、BEST_GUESS（正確に予測）があります。
コールバック関数にはルートを表示をする処理を記述します。
var start = "小倉駅";
var end = "西小倉駅";
var request = {
//出発地点
origin: start,
//到着地点
destination: end,
//トラベルモード
travelMode: google.maps.TravelMode.DRIVING
//オプションの設定
drivingOptions: {
departureTime: new Date(),
trafficModel: google.maps.TrafficModel.BEST_GUESS
},
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//ルートの表示
directionsRenderer.setDirections(response);
}
});
※完全なソースは付録にありますので参考にしてください。
下記にGoogleマップとルートを表示します。
通常のルートで問題が発生した場合、下記参考サイトの図のようになります。
青いルートが通常のルートです。
赤いルートは青いルートで問題が発生した場合のルートです。
以上がGoogle Mpas APIsの新機能の説明になります。
この機能はGoogle Maps JavaScript APIの他にGoogle Maps API、Google Maps Android API
にも対応しているので自分にあった開発環境でアプリが作成できます。
また新機能を用いると、目的地までの移動時間や渋滞などが発生したときに別の道を提示してくれる
スマホアプリをつくることができます。
JavaScript APIを用いた方法はすごく簡単で、付録にソースもありすぐ動作するので
興味がある方は是非試してみてください。
＜参考サイト＞
・Predicting the Future with Google Maps APIs
＜付録＞
・移動時間の予測とルートを表示するためのサンプル
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function sample1() {
var directionsRenderer = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
//マップの表示
var map = new google.maps.Map(document.getElementById("map_canvas1"), opts);
//ルートのテキスト表示設定
directionsRenderer.setPanel(document.getElementById('panel'));
//ルートのマップを表示
directionsRenderer.setMap(map);
/* ルートを予測 */
var start = "小倉駅";
var end = "西小倉駅";
var request = {
//出発地点
origin: start,
//到着地点
destination: end,
//トラベルモード
travelMode: google.maps.TravelMode.DRIVING,
//オプションの設定
drivingOptions: {
departureTime: new Date(),
trafficModel: google.maps.TrafficModel.BEST_GUESS
},
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//ルートの表示
directionsRenderer.setDirections(response);
}
});
}
window.onload = sample1;
</script>
</head>
<body>
<div id="panel" style="float:left; width:300px"></div>
<div id="map_canvas1" style="width:300px; height:300px"><div>
</body>
</html>