ZENRIN DataCom

【Google Maps API活用事例】周辺情報を表示させる「Distance Matrix API」の使い方

Google Maps APIのWebサービスAPIの一つ「Distance Matrix API」。主に複数の目的地への移動時間や距離などを計算するために使用するAPIで、ある地点からの距離を求めるのに適しています。今回は「Distance Matrix API」の主な機能や活用法などについて解説します。

Distance Matrix APIとは?

Distance Matrix APIは複数の地点をまとめて指定し、選択した移動モードの距離や所要時間を取得するためのAPIです。

たとえば、1つまたは複数の出発地点に対して、複数の行き先の距離と所要時間を算出したいときに、Distance Matrix APIを使用します。

Distance Matrix APIを使用すれば、以下の表のように複数の地点の距離や所要時間をまとめて取得することができます。

出発地点 行き先
東京タワー 行き先1
行き先2
行き先3
行き先4
東京スカイツリー 行き先1
行き先2
行き先3
行き先4

Distance Matrix APIの実装方法

ここでは、Google Maps APIが公開している距離マトリックスサービスのサンプルプログラムをもとに、東京タワー付近の公園カフェ を車で移動した場合の所要時間を算出するサンプルをご紹介します。

※Distance Matrix APIを使用するには、HTMLやJavaScriptなど、プログラミングの基本的な知識が必須となります。

記述例

function initMap() {
   var bounds = new google.maps.LatLngBounds;
   var markersArray = [];
   var origin = "東京タワー";
   var destination1 = "東京都港区六本木1丁目6−1";
   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 + '<br>';
      }
      }
    }
  });
}

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 = "東京都千代田区日比谷公園1";
  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 + '<br>';
        }
      }
    }
  });
}
function deleteMarkers(markersArray) {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

実行例

紹介したサンプルでは、originに対象の出発地点である東京タワーを指定し、destination1 ,2に行き先(公園カフェ)をそれぞれ指定しています。

複数の出発地点と目的地の距離・時間を算出するには、google.mapsのDistanceMatrixServiceクラスにnew演算子を指定してインスタンスを生成。指定した地点が存在したら、東京タワーからの所要時間をそれぞれ取得します。

travelModeは交通手段(徒歩、自転車、電車、車など)を選択することが可能です。取得した出発地点と目的地点のリストをもとに、for文の繰り返し処理で取得したアドレスからGoogleマップ上にアイコンと、画面の右サイドに住所、距離、所要時間を表示します。

このようにDistance Matrix APIを使用すれば、簡単に目的地の距離や所要時間を取得することができます。

DistanceMatrixServiceクラスの詳しい使い方については、Google Maps APIの以下のページを参考にしてください。

https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja#DistanceMatrixService別ウィンドウで開く

また、Distance Matrix APIを使用して、見栄えのよい地図を作成するには、地図に表示させるマーカーや基本情報などの文字列をブラウザに表示させるための知識も必要となります。

まとめ

Google Maps APIのDistance Matrix APIについてご紹介しました。不動産業界であればお客様の知りたい情報である周辺のスーパーまでの距離や時間も調べることもできますし、複数路線から店舗や会社などの所要時間を交通手段ごとに算出することも可能です。

用途は無限大ですので、是非ご活用されてみてはいかがですか?ゼンリンデータコムではGoogle Maps APIをより活用するためのサービスを取り扱っております。

関連の法人向けサービス