このページは Cloud Translation API によって翻訳されました。

Places UI キットを使用してインタラクティブな店舗検索を作成する

目標

このドキュメントでは、Google Maps Platform、特に Maps JavaScript API と Places UI キットの場所の詳細要素を使用して、インタラクティブな店舗検索アプリケーションを開発する主な手順について説明します。店舗の所在地を表示する地図を作成する方法、表示される店舗のリストを動的に更新する方法、各店舗の豊富な場所情報を表示する方法について説明します。

前提条件

次の知識があることが推奨されます。

Maps JavaScript API - ページに地図を表示し、Places UI Kit をインポートするために使用されます。
高度なマーカー - 地図上にマーカーを表示するために使用されます。
Places UI キット - UI で店舗に関する情報を表示するために使用されます。

プロジェクトで Maps JavaScript API と Places UI Kit を有効にします。

開始する前に、Maps JavaScript API を読み込み、高度なマーカーと Places UI Kit に必要なライブラリをインポートしていることを確認します。また、このドキュメントは、HTML、CSS、JavaScript などのウェブ開発に関する実践的な知識があることを前提としています。

初期設定

まず、ページに地図を追加します。この地図は、店舗の所在地に関連するピンを表示するために使用されます。

ページに地図を追加する方法は 2 つあります。

gmp-map HTML ウェブコンポーネントを使用する
JavaScript を使用する

ユースケースに最適な方法を選択してください。このガイドでは、マップを実装する両方の方法について説明します。

デモ

このデモは、ベイエリアの Google オフィス所在地を表示する店舗検索の動作例を示しています。Place Details 要素は、各場所について、いくつかの属性の例とともに表示されます。

店舗の所在地を読み込んで表示する

このセクションでは、店舗データを読み込んで地図上に表示します。このガイドでは、既存の店舗に関する情報を取得するためのリポジトリがあることを前提としています。ストアデータは、データベースなど、さまざまなソースから取得できます。この例では、店舗オブジェクトの配列を含むローカル JSON ファイル（stores.json）があり、各オブジェクトが 1 つの店舗の場所を表しているとします。各オブジェクトには、少なくとも name、location（lat と lng を含む）、place_id が含まれている必要があります。

店舗のプレイス ID をまだお持ちでない場合は、さまざまな方法で取得できます。詳しくは、Place ID のドキュメントをご覧ください。

stores.json ファイルの店舗詳細エントリの例を次に示します。[Name]、[Location]（緯度/経度）、[Place ID] のフィールドがあります。店舗の営業時間を保持するオブジェクトがあります（切り捨て）。店舗のカスタム機能を説明するのに役立つ 2 つのブール値もあります。

{
  "name": "Example Store Alpha",
  "location": { "lat": 51.51, "lng": -0.12 },
  "place_id": "YOUR_STORE_PLACE_ID",
  "opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
  "new_store_design": true,
  "indoor_seating": false
}

JavaScript コードで店舗の場所のデータを取得し、地図上にそれぞれのピンを表示します。

その方法の例を次に示します。この関数は、店舗の詳細を含むオブジェクトを受け取り、各店舗の位置に基づいてマーカーを作成します。

function displayInitialMarkers(storeLocations) {
    if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
    storeLocations.forEach(store => {
        if (store.location) {
            const marker = new AdvancedMarkerElement({
                position: new LatLng(store.location.lat, store.location.lng),
                title: store.name
            });
            mapElement.appendChild(marker);
        }
    });
}

店舗を読み込み、地図上に店舗の場所を示すピンが表示されたら、HTML と CSS を使用してサイドバーを作成し、個々の店舗の詳細情報を表示します。

この段階での店舗検索の例を次に示します。

イメージ

地図ビューポートの変更をリッスンする

パフォーマンスとユーザーエクスペリエンスを最適化するには、対応する場所が地図の表示領域（ビューポート）内にある場合にのみ、マーカーと詳細をサイドバーに表示するようにアプリケーションを更新します。これには、地図のビューポートの変更をリッスンし、これらのイベントをデバウンスしてから、必要なマーカーのみを再描画することが含まれます。

地図のアイドルイベントにイベントリスナーをアタッチします。このイベントは、パンやズームの操作が完了した後に発生し、計算用の安定したビューポートを提供します。

map.addListener('idle', debounce(updateMarkersInView, 300));

上記のコードスニペットは、idle イベントをリッスンし、debounce 関数を呼び出します。デバウンス関数を使用すると、マーカーの更新ロジックはユーザーが地図の操作を短時間停止した後にのみ実行されるため、パフォーマンスが向上します。

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

上記のコードは、デバウンス関数の例です。この関数は、アイドルリスナーに渡される関数と遅延引数を取ります。300 ミリ秒の遅延で、UI に目立った遅延を追加することなく、地図の移動が停止するのを待つことができます。このタイムアウトが経過すると、渡された関数（この場合は updateMarkersInView）が呼び出されます。

updateMarkersInView 関数は、次のアクションを実行する必要があります。

地図から既存のマーカーをすべて消去する

店舗の場所が現在の地図の境界内にあるかどうかを確認します。例:

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

上記の if ステートメント内で、店舗の所在地が地図のビューポート内にある場合に、マーカーと店舗の詳細をサイドバーに表示するコードを記述します。

Place Details Element を使用してリッチな場所の詳細を表示する

この段階では、アプリケーションはすべての店舗の場所を表示し、ユーザーは地図のビューポートに基づいて店舗をフィルタできます。これを強化するために、Place Details Element を使用して、写真、クチコミ、バリアフリー情報など、各店舗に関する詳細な情報を追加します。この例では、特に Place Details Compact Element を使用しています。

データソース内の各店舗の所在地には、対応するプレイス ID が必要です。この ID は Google マップ上の場所を一意に識別するもので、詳細情報を取得するために不可欠です。通常、これらのプレイス ID は事前に取得し、各店舗レコードに保存します。

Place Details Compact 要素をアプリケーションに統合する

店舗が現在の地図のビューポート内にあると判断され、サイドバーにレンダリングされている場合は、その店舗の場所の詳細コンパクト要素を動的に作成して挿入できます。

処理中の現在の店舗について、データからプレイス ID を取得します。プレイス ID は、要素が表示される場所を制御するために使用されます。

JavaScript で、PlaceDetailsCompactElement のインスタンスを動的に作成します。新しい PlaceDetailsPlaceRequestElement も作成され、それに渡された場所 ID が PlaceDetailsCompactElement に追加されます。最後に、PlaceContentConfigElement を使用して、要素に表示するコンテンツを構成します。

次の関数は、必要な Place UI Kit ライブラリがインポートされ、この関数が呼び出されるスコープで使用可能であり、関数に渡される storeData に place_id が含まれていることを前提としています。

この関数は要素を返し、呼び出し元のコードがその要素を DOM に追加します。

function createPlaceDetailsCompactElement(storeData) {
    // Create the main details component
    const detailsCompact = new PlaceDetailsCompactElement();
    detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'

    // Specify the Place ID
    const placeRequest = new PlaceDetailsPlaceRequestElement();
    placeRequest.place = storeData.place_id;
    detailsCompact.appendChild(placeRequest);

    // Configure which content elements to display
    const contentConfig = new PlaceContentConfigElement();
    // For this example, we'll render media, rating, accessibility, and attribution:
    contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
    contentConfig.appendChild(new PlaceRatingElement());
    contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
    // Configure attribution
    const placeAttribution = new PlaceAttributionElement();
    placeAttribution.setAttribute('light-scheme-color', 'gray');
    placeAttribution.setAttribute('dark-scheme-color', 'gray');
    contentConfig.appendChild(placeAttribution);
    detailsCompact.appendChild(contentConfig);
    // Return the element
    return detailsCompact;
}

上記のサンプルコードでは、場所の写真、レビューの評価、アクセシビリティ情報を表示するように要素が構成されています。これは、他の利用可能なコンテンツ要素を追加または削除することでカスタマイズできます。利用可能なすべてのオプションについては、PlaceContentConfigElement ドキュメントをご覧ください。

Place Details Compact Element は、CSS カスタムプロパティによるスタイリングをサポートしています。これにより、アプリケーションのデザインに合わせて外観（色、フォントなど）を調整できます。これらのカスタムプロパティを CSS ファイルに適用します。サポートされている CSS プロパティについては、PlaceDetailsCompactElement のリファレンスドキュメントをご覧ください。

この段階でのアプリケーションの例を次に示します。

イメージ

店舗検索機能を強化する

これで、店舗検索アプリの強固な基盤が構築されました。次に、この機能を拡張して、よりリッチでユーザー中心の体験を生み出す方法をいくつか検討します。

予測入力の追加

検索入力と Place Autocomplete を統合して、ユーザーが店舗を検索するエリアを見つけやすくします。ユーザーが住所、近隣、スポットを入力して候補を選択したときに、その場所が地図の中心に自動的に表示され、付近の店舗が更新されるようにプログラムします。これを行うには、入力フィールドを追加し、Place Autocomplete 機能をそのフィールドに接続します。候補を選択すると、地図はそのポイントを中心に表示されます。結果を運用エリアに偏らせたり、制限したりするように構成してください。

位置情報の検出

現在地の検出機能を実装して、特にモバイルユーザーに対して、関連性の高い情報をすぐに提供します。ブラウザから位置情報を検出する権限を取得したら、地図をユーザーの位置に自動的に移動し、最寄りの店舗を表示します。ユーザーは、すぐに利用できるオプションを探す際に、この「近くの」機能を高く評価しています。位置情報へのアクセスをリクエストするボタンまたは初期プロンプトを追加します。

距離とルートを表示する

ユーザーが目的の店舗を特定したら、Routes API を統合してユーザージャーニーを大幅に強化します。リストに表示する各店舗について、ユーザーの現在地または検索された場所からの距離を計算して表示します。さらに、Routes API を使用してユーザーの位置情報から選択した店舗までのルートを生成するボタンまたはリンクを提供します。このルートを地図に表示したり、Google マップにリンクしてナビゲーションを開始したりすることで、店舗の検索から実際の店舗への移動までをシームレスに行うことができます。

これらの拡張機能を実装することで、Google Maps Platform の機能をさらに活用して、ユーザーの一般的なニーズに直接対応する、より包括的で便利な店舗検索ツールを構築できます。

まとめ

このガイドでは、インタラクティブな店舗検索ツールを構築するための基本的な手順を説明しました。このチュートリアルでは、Maps JavaScript API を使用して地図上に独自の店舗の所在地を表示する方法、ビューポートの変更に基づいて表示される店舗を動的に更新する方法、そして最も重要な点として、Places UI Kit に沿って独自の店舗データを表示する方法について説明しました。Place Details 要素で既存の店舗情報（プレイス ID など）を使用すると、各店舗の豊富な標準化された詳細情報を表示し、使いやすい店舗検索ツールの堅牢な基盤を構築できます。

Maps JavaScript API と Places UI Kit をお試しください。これらは、高度な位置情報ベースのアプリケーションを迅速に開発するための、強力なコンポーネントベースのツールです。これらの機能を組み合わせることで、ユーザーにとって魅力的で有益なエクスペリエンスを作成できます。

寄稿者

DevX エンジニア | Henrik Valve

Places UI キットを使用してインタラクティブな店舗検索を作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

目標