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

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

目標

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

前提条件

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

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 ファイルのストアの詳細エントリの例は次のようになります。[名前]、[位置情報（緯度/経度）]、[プレイス 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 要素を使用して豊富な場所の詳細を表示する

この段階では、すべての店舗の場所がアプリに表示され、ユーザーは地図ビューポートに基づいて店舗をフィルタできます。これを強化するために、Place Details 要素を使用して、各店舗に関する豊富な詳細情報（写真、レビュー、バリアフリー情報など）を追加します。この例では、Place Details コンパクト要素を使用します。

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

アプリケーションに Place Details コンパクト要素を統合する

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

処理中の現在の店舗について、データからプレイス 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 要素は、CSS カスタムプロパティによるスタイル設定をサポートしています。これにより、アプリのデザインに合わせて外観（色、フォントなど）をカスタマイズできます。これらのカスタムプロパティを CSS ファイルに適用します。サポートされている CSS プロパティについては、PlaceDetailsCompactElement のリファレンスドキュメントをご覧ください。

この段階でのアプリの例を次に示します。

店舗検索機能の強化

店舗検索アプリの基盤が完成しました。次に、機能を拡張して、より豊かでユーザー中心の体験を実現する方法について考えてみましょう。

予測入力の追加

検索入力をプレイスオートコンプリートと統合することで、ユーザーが店舗を検索するエリアを見つける方法を改善します。ユーザーが住所、地域、スポットなどを入力して候補を選択すると、その場所が地図の中心に自動的に表示され、近くの店舗の更新がトリガーされるように地図をプログラムします。これを実現するには、入力フィールドを追加して、それに Place Autocomplete 機能を関連付けます。候補を選択すると、その地点が地図の中央に表示されます。結果を運用エリアにバイアスまたは制限するように構成してください。

位置情報の検出

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

距離と経路を表示する

ユーザーが興味のある店舗を特定したら、Routes API を統合してユーザーのジャーニーを大幅に強化します。リストに表示する店舗ごとに、ユーザーの現在地または検索した場所からの距離を計算して表示します。さらに、Routes API を使用してユーザーの現在地から選択した店舗までのルートを生成するボタンまたはリンクを用意します。このルートを地図に表示したり、Google マップへのリンクを設定したりして、店舗の検索から実際に店舗に到着するまでのシームレスな移動を実現できます。

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

まとめ

このガイドでは、インタラクティブな店舗検索ツールを構築するための主な手順について説明しました。Maps JavaScript API を使用して独自の店舗の場所を地図上に表示する方法、ビューポートの変更に基づいて表示される店舗を動的に更新する方法、さらに、Places UI Kit に合わせて独自の店舗データを表示する方法について学びました。Place ID などの既存の店舗情報を Place Details 要素で使用すると、各店舗の豊富な標準化された詳細情報を表示でき、ユーザーフレンドリーな店舗検索ツールの堅固な基盤を構築できます。

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

寄稿者

Henrik Valve | DevX エンジニア

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

目標