Locator Plus の実装ガイド

概要

ウェブ iOS API

Google Maps Platform は、ウェブ（JS、TS）、Android、iOS 向けに提供されています。場所、経路、距離に関する情報を取得するためのウェブサービス用 API も含まれます。このガイドのサンプルでは、1 つのプラットフォームが使用されています。他のプラットフォームでの実装方法については、ドキュメントのリンクからご確認ください。

作成を開始

Google Cloud コンソールの Quick Builder を使用すると、ビジネス プロフィールのリスティングのインポートや、サードパーティ プロバイダの予約リンクの自動埋め込みなど、店舗検索ツールをすばやく構築できます。インタラクティブな UI を使うと、数分でコードを生成し、Cloud にデプロイできます。ビジネス プロフィールのリスティングをインポートしたり、サードパーティ プロバイダからの予約リンクを自動的に埋め込んだりすることで、店舗検索ツールを簡単に作成できます。

オンラインで商品やサービスを調べているユーザーは、店舗に赴いたり、予約したり、注文した商品を受け取ったりするのに最も便利な最寄りの店舗を見つけ、できるだけ短時間でそこに到着したいと思っています。一方で店舗側は、ユーザーに優れたオンライン エクスペリエンスを提供することで、来店客を増やし、ユーザーの満足度を高め、サポートの問い合わせを減らしたいと考えています。また、店舗検索ツールの成果を測定して、顧客が店舗を見つけることができたかどうかを確認し、改善点を把握したいとも考えています。

Locator Plus を Google Maps Platform API と組み合わせれば、店舗検索の優れたエクスペリエンスを提供することができます。このドキュメントでは、Locator Plus のガイドとカスタマイズのためのヒントをご紹介します。このトピックの手順を活用すれば、ユーザーは地図でお客様の店舗を見つけ、どの店舗を訪問するかを決めるために必要な詳しい情報と（車、自転車、徒歩、公共交通機関を使った）ルートを確認できるようになります。

Quick Builder Locator Plus をご利用の場合は、分析ダッシュボードを使ってデータを分析し、買い物客による店舗検索ツールの使用状況に関する明確なインサイトを得ることができます。このレポートにアクセスするには、コンソールの [エンゲージメント レポート] セクションに移動します。このレポートについて詳しくは、エンゲージメント レポートをご覧ください。

次の図は、Locator Plus の実装に関する主な API の仕組みを示しています。 この図には、Place Details と組み合わせることのできるご自身の店舗データのデータベースも示されています。このデータベースにより、可能な限り詳細かつ役立つ情報をユーザーに提供することができます。（クリックして拡大）

図の左側 - Place Details ポップアップが表示された地図 図の右側 - 異なる機能を提供する API のリスト。Maps JavaScript API: 店舗の可視化とコンテンツ、地図のスタイル設定、高度なマーカー、カスタム ストリートビュー、ルートの表示Place Autocomplete: 住所オートコンプリートと候補表示機能Places API（新規）と Geocoding API: 住所の位置Routes API: 距離、時間、移動手段別の店舗ランキング、移動時間と移動手段に基づくルートの表示 図の中央 - データストア アイコン: カスタムの店舗情報データポイント。ウェブサーバー アイコンとデータストア アイコンの間の両矢印: ウェブサーバーとデータストア間のデータの読み取りと書き込みウェブサーバー（媒介）経由のウェブブラウザと API 間の矢印

API を有効にしています

上記のソリューションを実装するには、次の API を Google Cloud コンソールで有効にする必要があります。 設定について詳しくは、Google Maps Platform スタートガイドをご確認ください。

実装セクション

以下は、このドキュメントで取り上げるベスト プラクティスとカスタマイズです。

  • チェックマーク アイコンの項目は主な手順です。
  • スターアイコンの項目はソリューションを強化するもので、任意ですがおすすめのカスタマイズ情報です。
インタラクティブな地図に店舗を表示する

ユーザーが店舗の詳細を確認したり、地図上を移動したり、ズームインやズームアウトを行ったりできる地図を作成します。

または、Quick Builder Locator Plus ソリューションを試して、ビジネス プロフィールのリスティングからビジネスの詳細をインポートしたり、予約リンクを埋め込んだり、Google Cloud Storage にデプロイしたりするなど、地図をすばやく作成できます。
Place Details を提供する ユーザーが地図で最寄りの店舗を見つけたら、どの店舗を訪問したらよいかを決めるのに役立つ、店舗に関する有用な Place Details（場所の詳細情報）を表示します。
45° からのビューで店舗を表示する 45 度の角度からの航空写真で、店舗の外観をわかりやすく表示します。
ユーザーの位置を特定する 入力途中に候補が表示される機能をすべてのプラットフォームに実装して、最小限のキー操作で正確に住所を入力できるようにすることで、ユーザーの利便性を高めます。
最寄りの店舗までの移動時間と距離を表示する 複数の出発地と目的地の間の移動距離と移動時間を計算します。必要に応じて、徒歩、車、自転車などの移動手段を指定できます。
ユーザーの予約をサポートする

ユーザーが Place Details サイドパネルから予約できるようにします。

または、Quick Builder Locator Plus ソリューションを試して、ビジネス プロフィールのリスティングからビジネスの詳細をインポートしたり、予約リンクを埋め込んだり、Google Cloud Storage にデプロイしたりするなど、地図をすばやく作成できます。
ローカル特典を表示する Place Details サイドパネルにクリック可能なローカル特典を表示します。
ルート案内を提供する 徒歩、車、自転車、公共交通機関などのさまざまな移動手段による現在地から目的地までのルートデータを取得します。
地図をカスタマイズする カスタムの地図マーカーを作成して、店舗を目立たせたり、地図のデザインを自社のブランドカラーに合わせたりすることができます。スポットを表示（または非表示に）してユーザーが現在地を把握しやすくしたり、表示するスポットの密度を調整して地図が雑然とならないようにしたりします。
分析情報から使用状況に関するインサイトを得る Google アナリティクスを設定して、店舗検索ツール戦略とその実装に関するインサイトを得ます。
ルートをモバイルに送信する 店舗検索ツールにルートを表示するだけでなく、ユーザーのスマートフォンにルートを送信することで、ユーザーが移動中に Google マップをナビとして使用できるようにします。
ストリートビューを表示して、ユーザーが店舗を視認できるようにする 360 度見渡せるストリートビュー画像を提供して、ユーザーが現在地を把握したり、簡単に店舗を見つけたりできるようにします。
Geolocation でユーザーの位置を特定する デバイス内の位置情報サービスだけに頼りたくない場合、Geolocation を使ってユーザーの位置を特定します。
カスタムの店舗情報を Place Details と組み合わせる カスタムの店舗情報を Place Details と組み合わせて、ユーザーがどの店舗を訪問するか決めるのに役立つ豊富な情報を提供します。

インタラクティブな地図に店舗を表示する

店舗検索ツールは、ユーザー エクスペリエンスを高める重要なツールです。地図さえ掲載されていないサイトもあり、その場合ユーザーはサイトやアプリから離れて最寄りの店舗を探す必要があります。必要な情報を得るために複数のページを移動する必要があるため、最適なエクスペリエンスとは言えません。カスタマイズした地図をアプリケーションに組み込むことで、こうした状況を改善することができます。

この機能は、Quick Builder Locator Plus ソリューションを使用してすぐに使えるようにするか、独自の動的地図実装を使用して有効にすることができます。このセクションでは、これらのオプションについて詳しく説明します。

Quick Builder Locator Plus を使用する

Quick Builder Locator Plus ソリューションを使用すると、ビジネス プロフィールからビジネスの詳細をインポートできるため、ビジネス プロフィールのビジネス情報詳細の変更がウェブサイト上の店舗検索に反映されます。 これらの変更は、営業時間、連絡先情報、写真、サービス オプションなどを含みます。 Quick Builder を使えば、わずか数分でビジネス情報を地図上に設定したり、デプロイ可能なコードを生成したり、Google Cloud Storage に直接デプロイしたりできます。

ビジネス プロフィールから Quick Builder にビジネス拠点の詳細をインポートする
ビジネス プロフィールからビジネスの詳細をインポートして、Locator Plus でビジネス情報を管理

Locator Plus アプリケーションを Google Cloud Storage に直接デプロイする
Google Cloud を利用して、Locator Plus ソリューションをデプロイ

独自の Dynamic Maps 実装を使用する

この例で使用する API: Maps JavaScript API その他: Android | iOS

数行のコードを使用してページに動的地図を追加すれば、ユーザーは地図内を移動したり、ズームインやズームアウトを行ったり、複数の店舗やスポットの詳細を確認したりできるようになります。

まず、Maps JavaScript API をページに含める必要があります。次のスクリプトを HTML ページにリンクすることで、ページに Maps JavaScript API を含めます。このスクリプトには libraries=marker が含まれているため、地図に高度なマーカーを追加できます。 

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>

URL から、ページの読み込み時に実行される JavaScript initMap 関数が参照されます。URL で地図の言語または地域を定義すると、対象の国に合った方法でフォーマットされます。つまり地域を設定すれば、米国以外で使用されるアプリの動作が設定した地域向けになります。サポートされている言語と地域の完全なリストは、Google Maps Platform のサポート状況でご確認いただけます。詳細については、region パラメータの使用方法をご参照ください。

次に、ページを地図に配置するための、高さが明示的に指定された HTML div を設定します。 これは、地図が表示されるコンテナです。 

<div id="map" style="height: 500px; width: 100%;"></div>

次のステップは、地図の基本機能を設定することです。これは、スクリプト URL に指定する initMap スクリプト関数で行います。次の例では、このスクリプトに、初期位置、マップ ID（高度なマーカーと Cloud ベースのマップのスタイル設定に必要）、地図の種類、ユーザーが地図上で使用できる管理ツールを設定しています。なお、getElementById() により上記の "map" div ID が参照されます。 

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    mapId: "DEMO_MAP_ID",
    zoomControl: false
  });
}

店舗検索ツールには通常、初期位置、中心点または境界、ズームレベル（地図がその位置を拡大できる程度）を設定します。管理ツールなどの他の要素のほとんどは、地図で行うことができる操作の程度に応じて自由に選択することができます。

場所 ID を取得する

この例で使用する API: Places API（新版） その他: JavaScript

店舗の名前、住所、電話番号などの店舗の基本情報データベースがある場合、その場所に関する Google Maps Platform の情報（地理座標やユーザーが提供した情報を含む）を取得するには、データベース内の店舗ごとにプレイス ID が必要になります。Places API（新版）の テキスト検索（新版）エンドポイントを呼び出し、フィールド マスクで places.id フィールドのみをリクエストして、Text Search Essentials IDs Only SKU をトリガーできます。次のサンプルでは、Google ロンドン オフィスのプレイス ID をリクエストしています。 

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

データベースにこの場所 ID を保管することで、場所に関する情報を効果的にリクエストできます。場所 ID を使って、ジオコーディング、Place Details の取得、場所までのルートのリクエストを行う方法を以下にご紹介します。

位置のジオコーディングを行う

この例で使用する API: Geocoding API その他: JavaScript

店舗のデータベースに地理座標ではなく番地が含まれている場合、地図上にマーカーを配置できるよう、Geocoding API を使ってその住所の経度と緯度を取得します。サーバー側で住所をジオコーディングし、経度と緯度をデータベースに保存することができます。保存した経度と緯度は、少なくとも 30 日ごとに更新してください。

次の例では、Geocoding API を使って、Google ロンドン オフィスに対して返された場所 ID の経度と緯度を取得しています。 

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

店舗を地図に追加する

次のステップでは、店舗を地図に追加します。データレイヤなど、使用できるオプションは他にも数多くありますが、通常は高度なマーカーを地図に追加します。

店舗の経度と緯度を取得したら、以下の方法でカスタム テキスト グリフを含む高度なマーカーを地図に追加します。 

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

以下の図では、複数の店舗がマーカーで示されています。

店舗が数多くある場合、JavaScript、Android、iOS のマーカー クラスタリング ユーティリティを使うこともできます。 JavaScript による店舗検索でマーカー クラスタリングを実行する GitHub サンプルは、こちらから取得できます。

Place Details を提供する

この例で使用する API: Maps JavaScript API その他: Places API（新版） | Android | iOS

ユーザーが店舗を訪問する前に必要とする Place Details を提供することができます。連絡先情報、営業時間、評価、写真、臨時休業ステータスなど、豊富な Place Details を提供すれば、ユーザーは店舗を訪問する際に必要な情報を得ることができます。Places API（新版）に呼び出しを行うと、そのレスポンスをフィルタして、情報ウィンドウ、ウェブ サイドバーなど、好みの方法でレンダリングできます。

Place Details をリクエストするには、各店舗の場所 ID が必要です。 店舗の場所 ID を取得する方法については、場所 ID を取得するをご確認ください。

こちらを開いて、Place Details のリクエストについての動画をご確認ください。

営業時間を取得する

臨時休業を確認する

費用を管理する

次の例では、Places Library、Maps JavaScript API の Place クラスを使って Place Details を取得し、InfoWindow に追加しています。この実装では、ユーザーがマーカーをクリックして詳細をリクエストした場合にのみ Place Details リクエストがトリガーされます。ユーザーの関心にかかわらずすべての店舗の詳細を先走って取得することがないため、費用を抑えることができます。 

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });

45° からのビューで店舗を表示する

この例で使用する API: Maps JavaScript API その他: Android | iOS

店舗の鳥瞰図を表示することで、顧客が店舗の外観を把握して、店舗を見つけることができるようにします。ユーザーが詳細を確認したい店舗を拡大すると、45° からの航空写真が表示されます。

次のコードサンプルでは、高いズームレベル、地図の互換タイプ、および 45° 画像（入手可能な場合）を表示する傾斜角度を地図に設定します。45° 画像の利用可能状況については、こちらのドキュメントをご確認ください。

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

元の地図表示にリセットする

詳細ビュー（1 軒の店舗）と概要ビュー（近隣の複数の店舗）の切り替えを円滑に行うことができるよう、リスナーを追加して、地図の操作かリスト表示でユーザーが詳細ビューから離れたタイミングを検出します。たとえば、ユーザーが詳細ビューから手動でズームアウトしたか、ズームレベルを更新する別の関数を呼び出した場合、zoom_changed イベントが map オブジェクトでリッスンされます。以下のサンプルでは、ズームアウトによって地図のタイプと傾斜が元の状態にリセットされます。

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

ユーザーの位置を特定する

この例で使用する API: Maps JavaScript API その他: Android | iOS

店舗検索における次の主なコンポーネントは、ユーザーの開始位置の特定です。 デフォルトでは、モバイルの位置情報サービスとウェブブラウザの位置情報を使ってユーザー権限をリクエストし、ユーザーの現在地が起点として設定されます。ただし、ユーザーが利用を許可しなかったり、出発地として別の位置を設定したりする場合もあります。

ユーザーが使い慣れている一般ユーザー向け Google マップの予測入力機能を、モバイル デバイスとウェブで Google Maps Platform Places Libraries を使用するどのアプリケーションにも統合することができます。ユーザーがウィジェットを使用して住所の入力を開始すると、オートコンプリートによって残りの住所が入力されます。Place Autocomplete Data API を直接使用して、独自の予測入力機能を提供することもできます。

数個のクエリ パラメータを Maps JavaScript API スクリプト URL に加えるだけで、Place Autocomplete ライブラリをサイトに追加できます。次の例では、libraries=places,marker を追加しています。 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>

次に、PlaceAutocompleteElement ウィジェットを追加するコンテナ要素をページに追加します。 

<div id="autocomplete-container"></div>

最後に、PlaceAutocompleteElement ウィジェットを初期化してコンテナに追加します。includedPrimaryTypes: ["geocode"] を使用して Place Autocomplete の予測入力候補を制限すると、ウィジェットで番地、小区域、市区町村、郵便番号を受け付けるよう設定できるため、ユーザーは住所のどの部分を入力しても起点を指定することができます。ユーザーが予測を選択すると、gmp-select イベントが発生します。place.fetchFields() を呼び出して、ユーザーの起点の経度と緯度を含む location フィールドをリクエストできます。これらの地図座標を使って、地図の中心が再設定されたり、店舗と起点の関係が示されたりします。 

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });

この例では、ユーザーが住所を選択すると、addUserLocation() 関数が実行されます。これにより、一致した結果の位置が取得され、地図がその位置に移動し、高度なマーカーが追加されます。 

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

次の画像に示されているとおり、ユーザーと特定の店舗との関係が表示されます。

こちらを開いて、Place Autocomplete を地図に追加する方法を示す動画チュートリアルをご確認ください。

ウェブサイト

Android アプリ

iOS アプリ

最寄りの店舗までの移動時間と距離を表示する

この例で使用する API: Routes API その他: Routes Library、Maps JavaScript API

ユーザーの位置を取得したら、その位置と店舗の位置を比較します。Routes API の Compute Route Matrix 機能（または Maps JavaScript API の Routes ライブラリの RouteMatrix クラス）を使用すると、ユーザーは運転時間や距離に基づいて最も便利な店舗を選択できます。

ユーザーに近くの店舗が表示されるということは、すでに店舗のデータが入力されていることを意味します。独自の店舗データベースを使用している場合、データレイヤのトピックで説明しているように、データは地図で使用できる形式（GeoJSON など）にする必要があります。

店舗のリストを整理する標準的な方法は、距離を基準に並べ替えることです。この距離は通常、ユーザーの位置から店舗までの直線距離を使って計算されますが、直線距離では、渡ることのできない川を渡っていたり、渋滞している道を使用していたりすることがあるため、ユーザーに誤解を与えてしまう場合があります。数キロ以内に複数の店舗がある場合は特に、別の店舗の方が便利な可能性があります。

computeRouteMatrix メソッドは、出発地と目的地のリストを受け取り、2 つの地点間の移動距離と移動時間を返します。ユーザーから見れば、起点はユーザーの現在地または希望の出発地で、目的地は店舗の位置です。 出発地と目的地は、座標、プレイス ID、住所として指定できます。computeRouteMatrix を TRAFFIC_AWARE などのルーティング設定とともに使用して、現時点または将来の運転時間に基づいて結果を示すことができます。

次の例では、ユーザーの出発地と目的地のプレイス ID を指定して、Routes API の computeRouteMatrix エンドポイントを呼び出しています。この例では、地図の中心からロンドンの 3 つの Google オフィスまでの距離と移動時間を計算します。 

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

サービスからのレスポンスには、以下の例に示されているように、出発地と目的地の各ペアの距離（メートル単位）と所要時間が含まれます。

こちらを開いて、サンプルのレスポンスをご確認ください。

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

以下の図には、地図上に起点（赤色のマーカー C）と目的地が示されています。

図の都市地図には、ユーザーの位置（赤色のマーカー）とその周辺のオフィス（緑色のマーカー）が表示されています。

以下の表に示すとおり、通常は直線距離と経路距離が異なります。

オフィス 直線距離 経路距離 / 時間
オフィス A 3.32 km 4.5 km / 15 分
オフィス B 3.20 km 5.0 km / 17 分
オフィス C 4.84 km 6.9 km / 23 分

直線距離で最も近いのはオフィス B ですが、オフィス A へのルートでは高速道路を利用できるため、経路距離と時間ではオフィス A の方が近くなります。

このリクエストを行うと、レスポンスを運転時間に基づいて並べ替えるようにマッチ結果を処理できます。このような関数のサンプルを店舗検索 codelab にご用意していますので、ご確認ください。

この例で使用する API: Routes Library、Maps JavaScript API その他: Android と iOS 向け Routes API ウェブサービス（アプリケーションから直接またはサーバー プロキシからのリモートで利用）

サイトまたはアプリ内でルート案内をユーザーに表示すると、ユーザーはサイトから移動する必要がなくなるため、他のページに目移りしたり、地図上で競合他社を見つけたりするのを防ぐことができます。Routes API を使用すると、環境に優しいルート選択をリクエストして、燃料やエネルギーの使用量を推定し、移動による環境への影響を表示することもできます。

Maps JavaScript API の Routes ライブラリの Route クラスには、結果を処理して地図に表示する createPolylines() や createWaypointAdvancedMarkers() などのメソッドも用意されています。

次の例では、ルートをリクエストして地図上に表示しています。サンプルについて詳しくは、ルートを取得するをご確認ください。

これらのマップ機能について詳しくは、Maps JavaScript API ドキュメントをご参照ください。店舗検索ツールを構築するには、codelab で詳細な手順をご確認ください。

ユーザーの予約をサポートする

店舗の Place Details サイドパネルに、クリックするだけで予約を可能にするボタンを表示できます。次の図はそのサンプルです。

そのようなボタンを実装するには、（1）Quick Builder Locator Plus ソリューションが提供する、すぐに使える機能を利用するか（2）ビジネス プロフィールを利用することができます。 このセクションでは、これらのオプションについて詳しく説明します。

Quick Builder Locator Plus を使用する

Quick Builder Locator Plus ソリューションを使用すると、ビジネス プロフィールからビジネス情報を簡単にインポートできます。Quick Builder ツールにインポートされると、[Google で予約] を介して、ビジネス情報の埋め込み予約リンク（利用可能な場合）を有効にできます。 Google アカウントにビジネス プロフィールが関連付けられていなくても、Quick Builder を使用するなら、「Google で予約」* を介して、サードパーティの予約プロバイダで有効にしている予約リンクを埋め込むことができます。

「Google で予約」を使用して店舗検索ツールで予約リンクを有効にする
店舗検索ツールに予約機能を追加

*「Google で予約」は、サポートされている予約プロバイダと連携している特定の国または地域でのみ利用可能です。「Google で予約」にご関心があり、現在「Google で予約」のパートナーでない場合は、プロバイダにこちらのフォームに記入いただくようご案内ください。また、Google のドキュメントで、開始方法をご確認ください。予約プロバイダとまだ連携していない場合は、ビジネス プロフィール マネージャ内の予約セクションで有効なプロバイダを確認できます。

ビジネス プロフィールを使って、予約機能を有効にする

ビジネス プロフィールを使ってオンライン展開を管理している場合、作成したビジネス情報が Google Maps Platform の場所 ID に関連付けられます。これにより、地図関連機能をビジネスデータと統合することが可能になります。

Business Profile API で予約などのアクションを作成し、アプリで取得して表示することができますが、下記で説明するいくつかの手動手順が必要です。

いずれかの店舗の Place Details サイドパネルをユーザーが表示した際に、予約のためのリンクをユーザーに提供することができます。このセクションでは、その方法について説明します。

  1. ビジネス情報（タイプ: APPOINTMENT、ONLINE_APPOINTMENT、または DINING_RESERVATION）に Business Profile API の placeActionLink を作成します。placeActionLink は、サイドパネルの予約リンクに使用するオブジェクトになります。（予約アクション リンクをすでに作成している場合は、次のステップに進んでください。）以下は、placeActionLinks.create POST 演算が成功した場合のレスポンスのサンプルです。

    {
    "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
    "providerType": "MERCHANT",
    "isEditable": true,
    "uri": "https://example.com/reservation-uri",
    "placeActionType": "DINING_RESERVATION",
    "createTime": "2021-05-01T01:17:41.609161Z",
    "updateTime": "2021-05-01T01:17:41.609161Z"
}

  2. Google Maps Platform の場所 ID に関連付けられたビジネス プロフィールのビジネス情報を見つけます。

    ユーザーに表示される Place Details は、Google Maps Platform の場所 ID の詳細情報から取得されます。場所 ID はビジネス プロフィールのビジネス情報 ID に関連付けられているため、作成した予約リンクを取得して表示するには、地図の場所 ID に基づくビジネス情報 ID を見つける必要があります。Business Profile API の次の呼び出しを行います。

    1. プロジェクトのアカウントの一覧を取得します。
    2. Business Profile Business Information API を使用して、アカウント内のすべてのビジネス情報の一覧を取得します。
    3. readMask に metadata を含めると、返される各ビジネス情報に metadata.placeId が含まれ、表示されている Google Maps Platform の場所 ID と比較できます。

  3. ビジネス情報 ID を使って、希望するアクション リンクを取得できます。既存の予約の placeActionLink、ビジネス情報の既存の placeActionLinks の一覧を取得し、placeActionType をフィルタして、使用する予約リンク（APPOINTMENT、ONLINE_APPOINTMENT または DINING_RESERVATION）を見つけます。

    次のサンプルは、LIST 呼び出しからのレスポンスの APPOINTMENT placeActionLink を示しています。

     {
   "placeActionLinks": [
       {
           "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
           "providerType": "MERCHANT",
           "isEditable": true,
           "uri": "https://example.com/",
           "placeActionType": "APPOINTMENT",
           "createTime": "2021-05-01T01:17:41.609161Z",
           "updateTime": "2021-05-01T01:17:41.609161Z"
       }
   ]
 }
  4. サイドパネルに <div> を作成すると、placeActionLink オブジェクトから関連データ（特に予約リンクの URI）が入力されます。

予約リンクを追加するその他の方法

ビジネス プロフィールを管理していなかったり、Quick Builder Locator Plus ソリューションの使用を希望しなかったりする場合は、予約ウィジェットをウェブサイトかアプリに埋め込む方法についてのドキュメントで予約プラットフォームをご確認ください。それ以外に、Google Cloud（広告在庫管理用の Cloud Spanner（動画）など）を使用する方法もあります。

ローカル特典を表示する

店舗の Place Details サイドパネルに、クリック可能なローカル特典を表示できます。Google My Business API を使って、ビジネス情報と関連付けられている「投稿」（ローカル特典など）を作成して取得することができます。次の図は、Place Details サイドパネルに表示されているローカル特典のサンプルです。

（Quick Builder セクションのアーキテクチャ図では、店舗検索ツールに特典を追加する方法が示されています。）

ローカル特典はビジネス情報と関連付けられているため、表示中のビジネス情報の Google Maps Platform 場所 ID に関連付けられているビジネス プロフィールのビジネス情報 ID を見つける必要があります。 ビジネス プロフィールのビジネス情報 ID がある場合、関連する特典を localPost として取得し、Place Details サイドパネルに表示します。手順は次のとおりです。

  1. Google My Business API で、表示する特典情報の投稿を作成します（タイプ: OFFER）。

  2. 地図の場所 ID と関連付けられているビジネス プロフィールのビジネス情報 / ビジネス情報 ID を見つけます。

    ユーザーに表示される Place Details は、Google Maps Platform の場所 ID の詳細情報から取得されます。場所 ID はビジネス プロフィールのビジネス情報 ID に関連付けられているため、ビジネス情報の特典リンクを取得して表示するには、地図の場所 ID に基づくビジネス情報 ID を見つける必要があります。Business Profile API の次の呼び出しを行います。

    1. プロジェクトのアカウントの一覧を取得します。
    2. Business Profile Business Information API を使用して、アカウント内のすべてのビジネス情報の一覧を取得します。
    3. readMask に metadata を含めると、各ビジネス情報に metadata.placeId が含まれるようになり、表示中のビジネス情報のプレイス ID と比較することができます。

    次の例では、Business Profile Business Information API v1 からビジネス情報の詳細をリクエストしています。

    GET https://mybusinessbusinessinformation.googleapis.com/v1/locations/15899957830169237700?readMask=name,title,phoneNumbers,categories,regularHours,storefrontAddress,latlng,openInfo,metadata,profile

    レスポンスには、Google Maps Platform リクエストで使用するプレイス ID に対応する metadata.placeId フィールドが含まれています。

    こちらを開いて、サンプルのレスポンスをご確認ください。

    {
  "name": "locations/15899957830169237700",
  "title": "Sushi Sushi",
  "phoneNumbers": {
    "primaryPhone": "+49 2222 22222"
  },
  "categories": {
    "primaryCategory": {
      "name": "categories/gcid:restaurant",
      "displayName": "Restaurant"
    }
  },
  "regularHours": {
    "periods": [
      {
        "openDay": "MONDAY",
        "openTime": { "hours": 9, "minutes": 0 },
        "closeDay": "MONDAY",
        "closeTime": { "hours": 9, "minutes": 10 }
      },
      {
        "openDay": "TUESDAY",
        "openTime": { "hours": 11, "minutes": 30 },
        "closeDay": "TUESDAY",
        "closeTime": { "hours": 24, "minutes": 0 }
      }
    ]
  },
  "metadata": {
    "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
    "mapsUri": "https://maps.google.com/maps?cid=15899957830169237700"
  },
  "latlng": {
    "latitude": 1.3670033,
    "longitude": 103.8556385
  },
  "openInfo": {
    "status": "OPEN",
    "canReopen": true
  },
  "storefrontAddress": {
    "regionCode": "SG",
    "languageCode": "en-US",
    "postalCode": "560445",
    "addressLines": [
      "445 Ang Mo Kio Ave 10"
    ]
  },
  "profile": {
    "description": "Example restaurant"
  }
}

  3. 取得したアカウント ID と地域 ID で、必要な特典を取得します。ビジネス情報の管理には Business Profile Business Information API v1 が使用されますが、ローカル投稿は、承認済みのビジネス プロフィール API プロジェクトの以前の mybusiness.googleapis.com/v4 accounts.locations.localPosts エンドポイントに残ります。ビジネス情報の既存の localPosts の一覧を取得し、OFFER の topicType をフィルタします。

    以下は、ビジネス情報の有効なローカル投稿の一覧を取得するためのサンプル リクエストです。

    GET https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    次のレスポンスのサンプルには、OFFER localPost が示されています。

    こちらを開いて、サンプルのレスポンスをご確認ください。

    {
    "localPosts": [
        {
            "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
            "languageCode": "en",
            "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
            "state": "LIVE",
            "event": {
                "title": "Bento BOGO",
                "schedule": {
                    "startDate": {
                        "year": 2020,
                        "month": 1,
                        "day": 20
                    },
                    "startTime": {},
                    "endDate": {
                        "year": 2021,
                        "month": 1,
                        "day": 21
                    },
                    "endTime": {}
                }
            },
            "updateTime": "2020-09-11T10:56:22.594Z",
            "createTime": "2020-09-11T10:56:22.594Z",
            "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
            "media": [
                {
                    "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                    "mediaFormat": "PHOTO",
                    "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                }
            ],
            "topicType": "OFFER",
            "offer": {
                "couponCode": "BOGO-JET-CODE",
                "redeemOnlineUrl": "https://www.example.com/redeem",
                "termsConditions": "Offer only valid for order-ahead orders placed online."
            }
        },
    ],
}
  4. サイドパネルに <div> を作成すると、localPost オブジェクトからの関連するデータが入力されます。

地図をカスタマイズする

地図の外観と詳細をさまざまな方法で変更することができます。たとえば、次のようなことを行えます。

  • カスタムのマーカーを作成して、デフォルトの地図ピンと置き換える。
  • ブランドに合わせて地図対象物の色を変更する。
  • 表示するスポット（観光スポット、食事、宿泊施設など）とその表示密度をコントロールする。店舗からユーザーの注意を逸らさない程度に、ユーザーが最寄りの店舗を見つけるために役立つランドマークを強調します。

カスタムの地図マーカーを作成する

高度なマーカーをカスタマイズするには、デフォルトのピンの背景、枠線、グリフの色を変更する（例: 店舗が営業中かどうかを示す）、マーカーをブランドのロゴなどのカスタム画像に置き換える、カスタム HTML / CSS マーカーを作成する、などの方法があります。情報ウィンドウでは、営業時間、電話番号、写真などの追加情報を顧客に提供できます。

次のサンプル地図では、カスタム グラフィック マーカーを使用しています。（ソースコードは、Maps JavaScript API のカスタム グラフィック マーカーについてのトピックでご確認ください）。

詳しくは、高度なマーカーに関するドキュメント（JavaScript（ウェブ）、Android、iOS）をご参照ください。

地図のスタイルを設定する

Google Maps Platform を使えば、ユーザーが最寄りの店舗を見つけて最速の方法で到着できるようサポートし、同時にあなたのブランドが強調されるように地図のスタイルを作成できます。 たとえば、地図の色をブランドに合わせて変更したり、ユーザーに表示されるスポットの数を管理して地図が煩雑にならないようにしたりすることができます。 Google Maps Platform では、旅行、物流、不動産、小売などのさまざまな業種に適した、地図のスターター テンプレートが数多く提供されています。

地図のスタイルの作成と変更は、Google Cloud コンソールのプロジェクトの [地図のスタイル] ページで行うことができます。

こちらを開いて、Cloud コンソールでの地図のスタイル作成とスタイル設定方法のアニメーションをご確認ください。

地図の業界別スタイル

以下のアニメーションでは、ご利用可能な業界別の定義済み地図のスタイルを示しています。各スタイルには、業界ごとに最適なテンプレートが提供されています。たとえば小売業向け地図のスタイルは、ユーザーがお客様の店舗に注目できるよう、地図上のスポットの数が少なくなっています。また、ユーザーが最寄りの店舗にできるだけ速く迷わずに到着できるよう、ランドマークの数も少なくなっています。

[地図のスタイル] ページで、[地図のスタイルを作成] がクリックされています。[新しい地図のスタイル] ページで、旅行、物流、不動産、小売業の各業種の横にあるラジオボタンがクリックされ、各業種に最適なスタイルが表示されます。各ボタンがクリックされると、地図のスタイルの説明と画像のプレビューが切り替わります。

スポットの管理

このアニメーションでは、スポットを示すマーカーの色を設定し、その地図のスタイルにおけるスポットの密度を高めています。密度が高くなると、地図に表示されるスポットの数が増えます。

[地図のスタイル] ページで、[地図のスタイルを作成] がクリックされています。[新しい地図のスタイル] ページの [独自のスタイルの作成] で、[Google マップ] ラジオボタンが選択されています。アトラスのスタイルを設定するため、[Atlas] ラジオボタンがクリックされ、[スタイル エディタで開く] がクリックされています。スタイル エディタで、Feature type [Points of interest]、Element type [Icon] の順にクリックされ、色が赤色に設定されています。[POI Density] チェックボックスが選択され、密度コントロールが最大まで右にスライドされています。密度が上がるにつれて、地図プレビューに表示される赤色のマーカーの数が増えます。[SAVE] ボタンにマウスが移動します。

地図のスタイルごとに固有の ID があり、Cloud コンソールにスタイルを公開した後に、その地図 ID がコードで参照されます。そのためアプリをリファクタリングすることなく、リアルタイムに地図のスタイルを更新することができます。外観が新しくなった地図のスタイルが既存のアプリケーションに自動的に表示され、複数のプラットフォームをまたいで使用されます。次の例では、Maps JavaScript API を使って地図 ID をウェブページに追加する方法を示しています。

1 つ以上の map_ids をスクリプト URL に含めると、Maps JavaScript API が自動的にそれらのスタイルを利用できるようにするため、コードでそれらを呼び出す際に地図のレンダリングが速くなります。 

<script
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>

次のコードで、スタイル付き地図がウェブページに表示されます（地図がそのページに表示される HTML <div id="map"></div> 要素は示されていません）。 

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 51.485925, lng: -0.129500},
  zoom: 12,
  mapId: '1234abcd5678efgh'
});

Cloud ベースのマップのスタイル設定を組み込む方法について詳しくは、JavaScript（ウェブ）、Android、iOS をご確認ください。

分析情報から使用状況に関するインサイトを得る

分析情報から、ユーザーによる店舗検索ツールの使用状況に関する貴重なインサイトを得ることができます。このセクションでは、必要なデータをトラッキングできるよう、Google アナリティクスとビジネス プロフィールの分析情報を設定して確認する方法について説明します。Quick Builder Locator Plus をご利用の場合は、分析ダッシュボードを使って、匿名化されたデータを分析し、生成インサイトを得ることができます。

ユーザー エンゲージメントとパフォーマンス指標を表示する店舗検索分析ダッシュボード
店舗検索ツール分析ダッシュボードがパフォーマンス指標を提供

このレポートにアクセスするには、Cloud コンソールのエンゲージメント レポートのセクションに移動します。 このレポートについて詳しくは、エンゲージメント レポートをご覧ください。

Google アナリティクスには多くの機能が用意されているため、ここでは詳しい設定方法や使用方法は取り上げません。店舗検索アプリについての主要な分析情報に関する考察を主に取り上げ、その他の資料や手順に関しては主要なドキュメントをご紹介します。

Google アナリティクスを設定する

アプリで Google アナリティクスをすでにご利用の場合は、このセクションをスキップしてください。

次は、Google アナリティクスを有効にするためにサイトに貼り付ける「グローバルタグ」のサンプルです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

Google タグ マネージャーを使用している場合でも Google アナリティクスをサイトに直接追加している場合でも、Google アナリティクスの実装方法を理解したうえで、次の点を行ってください。

カスタム イベントを使用する

次は、店舗検索ツールにカスタム イベントを定義しているサンプルです。

gtag('event', 'location', {
  'method': 'address'
});

event と method に、レポートで理解可能な名前を付けてください。測定したい特定の操作（例: オートコンプリート プルダウン リストから選択して操作する（以下の図））に対してイベントをトリガーします。

Google アナリティクスに、定義したイベントとメソッドを使用する次のトラッキング呼び出しを送信することができます（見やすいように、1 行ごとにクエリ パラメータを 1 つずつ表示しています）。

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

次の図は、ブラウザの [Network] タブの検証ビューに Google アナリティクスの呼び出しがどのように表示されるかを示しています（クリックして拡大）。

Google アナリティクスに [リアルタイム] ビューを表示することで、カスタム イベントタグが適切に取得されているかどうかを確認できます。たとえば、Place Autocomplete に以前に設定された「店舗」イベントが、次の図のように Google アナリティクスに表示されます。

 

別の方法として、次の図のように DebugView を使ってリアルタイム イベントを確認することもできます。完全なイベント レポート（Google アナリティクスの [エンゲージメント] > [イベント] セクション）を使用できるようになるには、24 時間待つ必要があります。

分析情報を活用して、店舗検索アプリから実店舗への来店を促進する戦略を立てることもできます。たとえば、Google アナリティクスの来店レポートで、実店舗の来店分析情報（Google 広告で測定）を店舗検索分析情報に関連付けます。また、独自の「アプリから実店舗」戦略（実店舗で交換可能な特典をオンラインで提供するなど）を立てることもできます。

ビジネス プロフィールの指標

Google アナリティクスでイベント、指標、ディメンションをトラッキングするだけでなく、Business Profile Performance API からビジネス拠点のエンゲージメント指標をクエリすることもできます。利用可能な DailyMetric 値を使用すると、Google 検索と Google マップのインプレッション数、ルート検索数、ウェブサイトのクリック数、通話クリック数、Google で予約による予約数をトラッキングできます。

次のサンプル リクエストでは、locations.fetchMultiDailyMetricsTimeSeries を呼び出して、ビジネス拠点の 1 日あたりのインプレッション数、ルート検索数、ウェブサイトへの誘導数、予約数を取得します。

こちらを開いて、サンプル リクエストをご確認ください。

GET https://businessprofileperformance.googleapis.com/v1/locations/15899957830169237700:fetchMultiDailyMetricsTimeSeries?dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_SEARCH&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_SEARCH&dailyMetrics=BUSINESS_DIRECTION_REQUESTS&dailyMetrics=WEBSITE_CLICKS&dailyMetrics=BUSINESS_BOOKINGS&dailyRange.start_date.year=2025&dailyRange.start_date.month=1&dailyRange.start_date.day=1&dailyRange.end_date.year=2025&dailyRange.end_date.month=1&dailyRange.end_date.day=31

こちらを開いて、サンプルのレスポンスをご確認ください。

{
  "multiDailyMetricTimeSeries": [
    {
      "dailyMetricTimeSeries": [
        {
          "dailyMetric": "BUSINESS_IMPRESSIONS_DESKTOP_MAPS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "48"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_IMPRESSIONS_MOBILE_MAPS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "112"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_DIRECTION_REQUESTS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "14"
              }
            ]
          }
        },
        {
          "dailyMetric": "WEBSITE_CLICKS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "29"
              }
            ]
          }
        },
        {
          "dailyMetric": "BUSINESS_BOOKINGS",
          "timeSeries": {
            "datedValues": [
              {
                "date": { "year": 2025, "month": 1, "day": 1 },
                "value": "6"
              }
            ]
          }
        }
      ]
    }
  ]
}

各 dailyMetricTimeSeries エントリは、リクエストされた期間の日単位のカウントを返します。これには次のものが含まれます。

  • Google マップと Google 検索でのパソコンとモバイルのインプレッション。
  • ビジネスの所在地（BUSINESS_DIRECTION_REQUESTS）までのルート検索数。
  • ビジネスのウェブサイトへのクリック数（WEBSITE_CLICKS）と「Google で予約」経由の予約数（BUSINESS_BOOKINGS）。

指標を取得する方法として、「Google で予約」を使ってアクション リンクを作成するというオプションもあります。「Google で予約」で作成されたアクション リンクをユーザーがクリックすると、それらのアクションが Google アナリティクスに記録されます。このようにして、Google アナリティクスでコンバージョンをトラッキングできるようになります。詳しくは、コンバージョン トラッキングについてのドキュメントをご確認ください。

指標に関してどのような戦略を使用するにしても、KPI の成果を確認するだけに留まらず、店舗検索ツールの改善がビジネスに与える影響を指標データから理解したり、店舗検索ツールの Google アナリティクスの指標をビジネス プロフィールの指標と比較したりすることが重要です。たとえば、これらの指標を比較することで、店舗検索ツールと Google マップのルートを使って実店舗に来店した顧客の人数を確認することができます。

Locator Plus を強化する

ビジネスやユーザーのニーズに応じて、ユーザー エクスペリエンスをさらに高めることができます。

ルートをモバイルに送信する

ユーザーがより簡単に店舗に到着できるよう、ルートのリンクをテキスト メッセージかメールで送信できます。ユーザーがそのリンクをクリックすると、Google マップ アプリがスマートフォンで起動するか（アプリをインストールしている場合）、maps.google.com がデバイスのウェブブラウザに読み込まれます。 いずれの場合でも、ユーザーは音声案内を含むターンバイターン方式のナビを使って目的地に向かうことができます。

マップ URL を使って、URL でエンコードされた場所名（destination パラメータ）と場所 ID（destination_place_id パラメータ）でルート URL を作成します。マップ URL の作成と使用には費用がかからないため、API キーを URL に含める必要はありません。 

      https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

目的地と同じ住所形式を使用する origin クエリ パラメータを提供することもできます（省略可）。これを省略すると、ルート案内はユーザーの現在地から始まり、Locator Plus アプリで使用した起点とは異なることがあります。マップ URL では、ナビが有効な状態でルート案内が起動するよう、追加のクエリ パラメータ オプション（travelmode と dir_action=navigate など）が提供されています。

こちらのリンクをクリックすると、上述のサンプル URL が開きます。ここでは、origin がロンドンのフットボール スタジアムとして設定され、travelmode=transit を使用して、目的地までの公共交通機関の乗換案内が提供されています。

この URL を含むテキスト メッセージかメールを送信するには、twilio などのサードパーティ製アプリの使用をおすすめします。 App Engine を使用している場合は、サードパーティの企業を使って SMS メッセージまたはメールを送信できます。詳しくは、サードパーティのサービスによるメッセージの送信をご確認ください。

ストリートビューを表示して、ユーザーが店舗を視認できるようにする

世界の多くの店舗では、ストリートビューを使って店舗の外観を表示し、店舗に到着する前にその外観をユーザーが知ることができるようにしています。ユーザーがそのエリアを 360 度見渡せるようにしたいかどうかによって、ストリートビューをインタラクティブ（ウェブ）か静的（API）のいずれかの形式で提供します。ストリートビューは、Android と iOS の両方でご利用いただけます。

Geolocation でユーザーの位置を特定する

ほとんどの場合、ユーザーのデバイスまたはブラウザに組み込まれている位置情報サービスを使ってユーザーの位置を特定することができますブラウザの HTML5 位置情報機能を使用して、ユーザーまたはデバイスの地理的位置を Google マップに表示する例を紹介しています。また、Android と iOS で権限をリクエストして位置情報を取得する方法に関するドキュメントも用意されています。一方で、デバイスの位置情報サービスが無効になっている場合やデバイスの位置情報がなりすましである疑いがある場合など、代替の位置情報検索ツールを使用したい場合があるかもしれません。

Geolocation API はサーバー側の API で、クライアントが検出できる基地局や Wi-Fi ノードの情報に基づいて、現在地と精度範囲を返します。Geolocation API は、ユーザーの位置を特定するバックアップの方法として、またはデバイスによって報告された位置を照合するために使用できます。

カスタムの店舗情報を Place Details と組み合わせる

Place Details を提供するのセクションでは、Place Details を使って、営業時間、写真、クチコミなどの店舗に関する豊富な情報をユーザーに提供する方法について説明しました。

Places API（新規）のデータ フィールドごとの料金と SKU 階層を把握しておくと、 費用の管理に役立ちます。1 つの方法として、店舗に関するすでにある情報と、臨時休業、祝休日の営業時間、ユーザーの評価、写真、クチコミなどの Google マップからの最新情報を組み合わせることがあげられます。店舗の連絡先情報がすでにある場合は、そのようなフィールドを Place Details からリクエストする必要はありません。表示したいフィールドのみを取得するようにフィールド マスクを制限することができます。

Place Details の代わりに使用したり Place Details を補完したりするための独自の場所データがある場合は、多機能店舗検索の codelab をご参照ください。ご自身の店舗情報を保存したり取得したりするためのデータベースと GeoJSON を併用するサンプルが用意されています。