Google Maps APIs のヒント: Distance Matrix サービスを使ってユーザー エクスペリエンスを向上

直線距離で見ると、店舗 1 （次の図のBと記された地点）が現在地 C から最も近い店舗であることは明らかです。ところが、この 2 地点間には川があるため、ユーザーは途中、船を使うなどしない限り、一番近い橋かトンネルを通るルートを使わなければなりません。Directions Service（英語）を使ってルートを表示すると、直線距離よりもはるかに長い距離を移動する必要があることが分かります。

このケースでは、直線距離が店舗までの移動距離を反映していないことになります。そこで、Distance Matrix サービスを呼び出して、実際の走行距離と所要時間を確認しましょう。返ってきた結果は以下の通りです。

店舗	直線距離 （マイル）	走行距離 （マイル）	所要時間（分）	現在の交通状況での所要時間（分）
1	1.4	5.4	15	20
2	2.7	4.4	9	15
3	2.5	4.7	11	11

ここには、ユーザーにとって役立つ情報があります。まず、店舗 2 は直線距離では最も遠くにある店舗ですが、走行距離は最短であることが分かります。さらに、通常の交通状況であれば所要時間も最短です。しかし、現在の交通状況を考慮すると、店舗 2 までの所要時間は店舗 3 よりも長くなることが分かります。Directions Service と交通状況を考慮した以下の地図では、上記の結果が次のように示されます。

このケースではおそらくユーザーは、今すぐに出発するのであれば店舗 3 を、後で渋滞が解消されてから移動するのであれば店舗 2 を選ぶでしょう。

相乗りサービスやタクシー配車

さらに別の例を見てみましょう。ユーザーが配車サービス等を利用して、現在地に最も近いタクシーを呼ぼうとするケースです。下の地図のように、Distance Matrix API により、各車両からユーザーの現在地までの現在の所要時間が提供され、ユーザーはそれを確認することができます。ここでは直線距離は関係ありません。

実際のコード

さて、走行距離や所要時間、交通状況に基づく所要時間がユーザーにとって便利なことはご理解いただけましたか？「ではどうやって実装すればよいのか？」とお悩みの方がいらっしゃるかもしれません。そこで店舗検索を例に、コード スニペットを紹介します。Distance Matrix サービスを使って上述の機能を実装する方法を説明します。

まず、説明を簡単にするために、顧客と店舗位置を次のように定義します。

var customerLocation = '1903 Toro Canyon Rd, Austin, TX 78746';

var store1 = '3808 W. 35th, Austin, TX 78703';
var store2 = '4933 Plaza on the Lake, Austin, TX 78746';
var store3 = '6500 Bee Cave Rd, Austin, TX 78746';

この位置情報を使って、Distance Matrix サービスを呼び出します。

function calculateDistances() {
 // Distance Matrix サービス オブジェクトを新規作成
 var service = new google.maps.DistanceMatrixService();
 
 // 事前に定義した出発地点と目的地、および
 // 交通情報に基づく所要時間を使用するかしないかのオプションを
 // 設定
 
 service.getDistanceMatrix({
     origins: [customerLocation],
     destinations: [store1, store2, store3],
     travelMode: google.maps.TravelMode.DRIVING,
     unitSystem: google.maps.UnitSystem.IMPERIAL,
     avoidHighways: false,
     avoidTolls: false,
     durationInTraffic: true
 }, callback);
} 
  
function callback(response, status) {
 if (status != google.maps.DistanceMatrixStatus.OK) {
   console.log('DistanceMatrix Error: ', status);
 } else {
   // 出発地点と目的地の配列を取得
   var origins = response.originAddresses;
   var destinations = response.destinationAddresses;
   
   for (var i = 0; i < origins.length; i++) {
     // 各出発地点について、目的地の距離と所要時間の結果を
     // 取得 
     var results = response.rows[i].elements;
     for (var j = 0; j < results.length; j++) {
   // 後でソートできるよう結果を保存
  storeResults.push([destinations[j],
      results[j].duration_in_traffic.value,
                 results[j].distance.value]);
     }
   }
   // 交通情報に基づく所要時間で結果をソート
    storeResults.sort(function(a, b) {
          return a[1] - b[1];
        }); 
 }
}

この呼び出しによって、以下のようなデータが戻ってきます。走行距離、所要時間、交通状況を考慮した所要時間といった重要な情報が含まれています。

  "destination_addresses" : [
     "3808 West 35th Street, Austin, TX 78703, USA",
     "4933 Plaza on the Lake, Austin, TX 78746, USA",
     "6500 Bee Cave Road, Austin, TX 78746, USA"
  ],
  "origin_addresses" : [ "1903 Toro Canyon Road, Austin, TX 78746, USA" ],
  "rows" : [
     {
        "elements" : [
           {
              "distance" : {
                 "text" : "5.4 mi",
                 "value" : 8631
              },
              "duration" : {
                 "text" : "15 mins",
                 "value" : 917
              },
              "duration_in_traffic" : {
                 "text" : "20 mins",
                 "value" : 1188
              },
              "status" : "OK"
           },
           {
              "distance" : {
                 "text" : "4.4 mi",
                 "value" : 7157
              },
              "duration" : {
                 "text" : "9 mins",
                 "value" : 569
              },
              "duration_in_traffic" : {
                 "text" : "15 mins",
                 "value" : 911
              },
              "status" : "OK"
           },
           {
              "distance" : {
                 "text" : "4.7 mi",
                 "value" : 7490
              },
              "duration" : {
                 "text" : "11 mins",
                 "value" : 635
              },
              "duration_in_traffic" : {
                 "text" : "11 mins",
                 "value" : 635
              },
              "status" : "OK"
           }
        ]
     }

このデータを見ながら、ユーザーは店舗検索の結果を並べ替えて、どの店舗に行けばよいのかを判断します。

皆さんのウェブサイトやアプリケーションでもこの機能をぜひご活用ください。Google Maps JavaScript API Distance Matrix サービス（英語）についての詳しい情報は、デベロッパー向けのドキュメントにアクセスしてください。コードのサンプルもご覧いただけます。また、Google Maps Web Services APIs（英語）に含まれている Distance Matrix API （英語）の詳しい情報もぜひご覧ください。

Posted by 丸山 智康 (Tomoyasu Maruyama) - Google Maps Solution Architect, Google Maps API for Work