Google Maps Platform
【活用事例】周辺情報を表示させる
「Distance Matrix API」の使い方
Google Maps PlatformのWebサービスAPIの一つ「Distance Matrix API」。
主に複数の目的地への移動時間や距離などを計算するために使用するAPIで、
ある地点からの距離を求めるのに適しています。
今回は「Distance Matrix API」の主な機能や活用法などについて解説します。
主に複数の目的地への移動時間や距離などを計算するために使用するAPIで、
ある地点からの距離を求めるのに適しています。
今回は「Distance Matrix API」の主な機能や活用法などについて解説します。
Distance Matrix APIとは？
Distance Matrix APIは複数の地点をまとめて指定し、選択した移動モードの距離や所要時間を取得するためのAPIです。
たとえば、1つまたは複数の出発地点に対して、複数の行き先の距離と所要時間を算出したいときに、Distance Matrix APIを使用します。
Distance Matrix APIを使用すれば、以下の表のように複数の地点の距離や所要時間をまとめて取得することができます。
たとえば、1つまたは複数の出発地点に対して、複数の行き先の距離と所要時間を算出したいときに、Distance Matrix APIを使用します。
Distance Matrix APIを使用すれば、以下の表のように複数の地点の距離や所要時間をまとめて取得することができます。
| 出発地点 | 行き先 |
| 東京タワー | 行き先1 |
| 行き先2 | |
| 行き先3 | |
| 行き先4 | |
| 東京スカイツリー | 行き先1 |
| 行き先2 | |
| 行き先3 | |
| 行き先4 |
Distance Matrix APIの実装方法
※最新の仕様につきましては、上記のGoogle公式ドキュメントをご確認ください。
ここでは、Googleが公開している距離マトリックスサービスのサンプルプログラムをもとに、東京タワー付近の公園カフェ を車で移動した場合の所要時間を算出するサンプルをご紹介します。
※Distance Matrix APIを使用するには、HTMLやJavaScriptなど、プログラミングの基本的な知識が必須となります。
▼記述例
function initMap() {
var bounds = new google.maps.LatLngBounds;
var markersArray = [];
var origin = "東京タワー";
var destination1 = "東京都港区六本木１丁目６−１";
var destination2 = "タリーズコーヒー麻布十番駅前店";
var destinationIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=O|FFFF00|000000';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.53, lng: 9.4},
zoom: 10
});
var geocoder = new google.maps.Geocoder;
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [origin],
destinations:[destination1, destination2],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
deleteMarkers(markersArray);
var showGeocodedAddressOnMap = function(asDestination) {
var icon = asDestination ? destinationIcon : originIcon;
return function(results, status) {
if (status === 'OK') {
map.fitBounds(bounds.extend(results[0].geometry.location));
markersArray.push(new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
}));
} else {
alert('Geocode was not successful due to: ' + status);
}
};
};
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode({'address': originList[i]},
showGeocodedAddressOnMap(false));
for (var j = 0; j < results.length; j++) {
geocoder.geocode({'address': destinationList[j]},
showGeocodedAddressOnMap(true));
outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
': ' + results[j].distance.text + ' in ' +
results[j].duration.text + '
';
}
}
}
});
}
function deleteMarkers(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
function initMap() {
var bounds = new google.maps.LatLngBounds;
var markersArray = [];
var origin = "東京タワー";
var destination1 = "東京都千代田区日比谷公園１";
var destination2 = "有栖川宮記念公園";
var destinationIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=O|FFFF00|000000';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.53, lng: 9.4},
zoom: 10
});
var geocoder = new google.maps.Geocoder;
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [origin],
destinations:[destination1, destination2],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
deleteMarkers(markersArray);
var showGeocodedAddressOnMap = function(asDestination) {
var icon = asDestination ? destinationIcon : originIcon;
return function(results, status) {
if (status === 'OK') {
map.fitBounds(bounds.extend(results[0].geometry.location));
markersArray.push(new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
}));
} else {
alert('Geocode was not successful due to: ' + status);
}
};
};
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode({'address': originList[i]},
showGeocodedAddressOnMap(false));
for (var j = 0; j < results.length; j++) {
geocoder.geocode({'address': destinationList[j]},
showGeocodedAddressOnMap(true));
outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
': ' + results[j].distance.text + ' in ' +
results[j].duration.text + '
';
}
}
}
});
}
function deleteMarkers(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
var bounds = new google.maps.LatLngBounds;
var markersArray = [];
var origin = "東京タワー";
var destination1 = "東京都港区六本木１丁目６−１";
var destination2 = "タリーズコーヒー麻布十番駅前店";
var destinationIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=O|FFFF00|000000';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.53, lng: 9.4},
zoom: 10
});
var geocoder = new google.maps.Geocoder;
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [origin],
destinations:[destination1, destination2],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
deleteMarkers(markersArray);
var showGeocodedAddressOnMap = function(asDestination) {
var icon = asDestination ? destinationIcon : originIcon;
return function(results, status) {
if (status === 'OK') {
map.fitBounds(bounds.extend(results[0].geometry.location));
markersArray.push(new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
}));
} else {
alert('Geocode was not successful due to: ' + status);
}
};
};
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode({'address': originList[i]},
showGeocodedAddressOnMap(false));
for (var j = 0; j < results.length; j++) {
geocoder.geocode({'address': destinationList[j]},
showGeocodedAddressOnMap(true));
outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
': ' + results[j].distance.text + ' in ' +
results[j].duration.text + '
';
}
}
}
});
}
function deleteMarkers(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
function initMap() {
var bounds = new google.maps.LatLngBounds;
var markersArray = [];
var origin = "東京タワー";
var destination1 = "東京都千代田区日比谷公園１";
var destination2 = "有栖川宮記念公園";
var destinationIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?' +
'chst=d_map_pin_letter&chld=O|FFFF00|000000';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.53, lng: 9.4},
zoom: 10
});
var geocoder = new google.maps.Geocoder;
var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins: [origin],
destinations:[destination1, destination2],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function(response, status) {
if (status !== 'OK') {
alert('Error was: ' + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = '';
deleteMarkers(markersArray);
var showGeocodedAddressOnMap = function(asDestination) {
var icon = asDestination ? destinationIcon : originIcon;
return function(results, status) {
if (status === 'OK') {
map.fitBounds(bounds.extend(results[0].geometry.location));
markersArray.push(new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
}));
} else {
alert('Geocode was not successful due to: ' + status);
}
};
};
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode({'address': originList[i]},
showGeocodedAddressOnMap(false));
for (var j = 0; j < results.length; j++) {
geocoder.geocode({'address': destinationList[j]},
showGeocodedAddressOnMap(true));
outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
': ' + results[j].distance.text + ' in ' +
results[j].duration.text + '
';
}
}
}
});
}
function deleteMarkers(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
▼実行例
紹介したサンプルでは、originに対象の出発地点である東京タワーを指定し、destination1 ,2に行き先（公園カフェ）をそれぞれ指定しています。
複数の出発地点と目的地の距離・時間を算出するには、google.mapsのDistanceMatrixServiceクラスにnew演算子を指定してインスタンスを生成。指定した地点が存在したら、東京タワーからの所要時間をそれぞれ取得します。
travel modeは交通手段（徒歩、自動車）を選択することが可能です。取得した出発地点と目的地点のリストをもとに、for文の繰り返し処理で取得したアドレスからGoogleマップ上にアイコンと、画面の右サイドに住所、距離、所要時間を表示します。
このようにDistance Matrix APIを使用すれば、簡単に目的地の距離や所要時間を取得することができます。
DistanceMatrixServiceクラスの詳しい使い方については、Google Maps Platformの以下のページを参考にしてください。
複数の出発地点と目的地の距離・時間を算出するには、google.mapsのDistanceMatrixServiceクラスにnew演算子を指定してインスタンスを生成。指定した地点が存在したら、東京タワーからの所要時間をそれぞれ取得します。
travel modeは交通手段（徒歩、自動車）を選択することが可能です。取得した出発地点と目的地点のリストをもとに、for文の繰り返し処理で取得したアドレスからGoogleマップ上にアイコンと、画面の右サイドに住所、距離、所要時間を表示します。
このようにDistance Matrix APIを使用すれば、簡単に目的地の距離や所要時間を取得することができます。
DistanceMatrixServiceクラスの詳しい使い方については、Google Maps Platformの以下のページを参考にしてください。
> Maps JavaScript API 距離行列サービス（外部サイト）
まとめ
Google Maps PlatformのDistance Matrix APIについてご紹介しました。例えば不動産業界であれば、お客様の知りたい情報である周辺のスーパーや病院までの距離や時間を調べることが可能です。
用途は無限大ですので、是非ご活用されてみてはいかがですか？ゼンリンデータコムではGoogle Maps Platformをより活用するためのサービスを取り扱っております。
用途は無限大ですので、是非ご活用されてみてはいかがですか？ゼンリンデータコムではGoogle Maps Platformをより活用するためのサービスを取り扱っております。
サービス詳細、導入についてお気軽にお問い合わせください。
＼ 導入効果がわかる ／
＼ ご相談はこちらから／