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

Places UI キットとは何ですか？また、それを使用して魅力的なソリューションを構築するにはどうすればよいですか？

はじめに

世界中の何百万人ものユーザーにとって、Google マップは正確で最新の場所情報を入手できる頼りになる情報源です。Google の 2 億 5 千万件を超える世界中のプレイスの豊富なデータベースには、ユーザーのレビュー、写真、評価などが含まれており、比類のないレベルの詳細と信頼性を提供します。最新の正確なデータを提供するため、Google は毎日 1 億件の更新を地図に適用しています。

Places UI キットは、すぐに使える費用対効果の高いコンポーネントライブラリです。Google マップの豊富な場所情報が活用されています。これにより、Google の信頼性が高く使い慣れたプレイスエクスペリエンスを、任意の地図上のフロントエンドユースケースに統合できます。

コンポーネント

Places UI キットは、個別に、または組み合わせて使用してシームレスな Places エクスペリエンスを作成できる、一連の個々の UI コンポーネントを提供します。

Place Details: このコンポーネントは、場所に関する詳細情報（名前、住所、電話番号、ウェブサイト、営業時間、ユーザーのクチコミなど）をレンダリングします。
Place Search: このコンポーネントは、カテゴリ別またはフリーテキスト検索で付近の場所のリストを表示します。
基本的な場所の予測入力: このコンポーネントは、テキスト入力フィールドを作成し、入力に一致する予測された場所のプルダウンリストを表示します。

Places UI キットの主なメリット

使いやすさ: Google の信頼できる Places のユーザーエクスペリエンスを、最小限のコードでアプリに組み込むことができます。
あらゆる地図で利用可能: Google マップ以外のマップで初めてプレイスコンテンツを利用できるようになりました。
使い慣れた UI: コンポーネントは、Google マップのエクスペリエンスと一貫性のあるユーザーインターフェースを提供するため、ユーザーは直感的に操作できます。
カスタマイズ: Places UI キットでは、追加料金なしで豊富なビジュアルカスタマイズオプションを利用できます。さまざまな設定とカスタム CSS プロパティを使用して、表示要素を構成できます。
費用対効果: Places UI キットは、Places API を直接使用するよりも費用対効果の高いソリューションです。

実際のユースケース

Places UI キットは、さまざまなアプリケーションで使用して、ユーザーエクスペリエンスを向上させることができます。

ローカルディスカバリアプリケーション: 「おすすめスポット」アプリケーションでは、Place Search コンポーネントを使用して、近くのレストラン、カフェ、観光スポットの一覧を表示できます。ユーザーがリストから場所を選択すると、Place Details コンポーネントを使用して、その場所に関する詳細情報を表示できます。
旅行プランニングアプリケーション: 旅行アプリケーションは、Place Search を使用して、特定の都市のホテルやスポットをユーザーが検索できるようにします。Place Details コンポーネントは、各場所の写真、評価、クチコミを表示して、計画を立てるのに役立ちます。
不動産および物件検索ポータル: 不動産アプリは、Place Search コンポーネントを使用して、近隣のさまざまなカテゴリの場所を表示し、住宅の購入や賃貸を検討している人が、内見を予約する前に近隣のライフスタイルが自分に合っているかどうかを把握できるようにします。
メッセージアプリケーションとソーシャルメディアアプリケーション: メッセージアプリケーションとソーシャルメディアアプリケーションは、プレイス検索を使用して近くの場所を検索し、提案することで、ユーザーが簡単に待ち合わせ場所を見つけられるようにします。Place Details コンポーネントを使用すると、ユーザーが場所を共有する際に、その場所に関する豊富な情報を表示できます。組み込みの Google マップボタンを使用すると、ユーザーは Google マップで簡単に正確に、さらに別の場所や旅行情報を調べることができます。

カスタマイズ

Places UI キットのコンポーネントのコンテンツの豊富さとスタイルは、ニーズに合わせてカスタマイズできます。

カスタム CSS プロパティ（プレイス詳細コンポーネントの CSS プロパティなど）を使用すると、コンポーネントのデザインをアプリケーションのデザインに合わせて調整できます。色、フォント、その他の視覚的な要素をカスタマイズできます。視覚的な変更を行う際は、帰属表示の要件を遵守することが重要です。たとえば、--gmp-mat-color-primary CSS プロパティを使用して、リンクやレビュー数に使用されるプライマリカラーを変更できます。

表示する特定のスポットのコンテンツを制御するには、ネストされた gmp-place-content-config 要素を使用してコンテンツを選択して構成するか、gmp-place-all-content を使用して利用可能なすべてのコンテンツを表示します。

ドキュメントには、さまざまなスタイル構成を可視化するのに役立つカスタマイズツールが用意されています。

実装に関するガイダンス

Places UI キットは、Maps JavaScript と、Android および iOS 向けの Places SDK を通じて利用できます。

スタートガイド

Places UI キットの使用を開始するには、次の手順を行います。

Google Cloud プロジェクトを設定する: Places UI Kit を使用するには、請求先アカウントを含む Cloud プロジェクトが必要です。
Places UI キットを有効にする: プロジェクトで Places UI キットを有効にする必要があります。
API キーを取得する: リクエストを認証するには、API キーが必要です。

プラットフォーム固有の詳細については、JavaScript、Android、iOS の Places UI Kit スタートガイドをご覧ください。

実装例

動的な JavaScript マップで Place Search と Place Details を実装する例を次に示します。ユーザーはフリーテキストに基づいて周辺の場所を検索できます。検索結果リストの場所をクリックすると、Place Details コンポーネントが動的地図に表示されます。

以下にコードスニペットを示します。デモと完全なコードは、この GitHub リポジトリで確認できます。

始める前に、JavaScript に関連する上記のスタートガイドの手順を完了していることを確認してください。

HTML で必要なライブラリを読み込みます。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

HTML で、地図コンテナ、テキスト入力フィールド、検索ボタンを追加します。この地図コンテナには、JavaScript で作成される動的地図が格納されます。入力ボックスでは、ユーザーが検索クエリを入力できます。

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Place Search コンポーネントを追加します。Place Search コンポーネントは、水平レイアウトと垂直レイアウトを提供します。この例では、水平レイアウトを使用します。「selectable」属性を使用すると、検索結果のリストアイテムをクリックできるようになります（クリックすると gmp-select イベントがトリガーされます）。

gmp-place-search 要素内に、次の 2 つの子要素を追加します。

gmp-place-all-content は、利用可能なすべてのコンテンツを表示するために使用されます
gmp-place-text-search-request は、Place Search 要素を構成するために使用されます。

この例では、JavaScript で構成を設定します。

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

次に、コンパクトレイアウトとフルレイアウトで使用できる Place Details コンポーネントを追加します。各レイアウトは、縦向きと横向きの両方に対応しています。この例では、コンパクトな横向きレイアウトを使用しています。Place Search コンポーネントと同様に、2 つの子要素を追加します。

gmp-place-all-content は、利用可能なすべてのコンテンツを表示していることを示します
gmp-place-details-place-request は、場所を選択するために使用されます。

この例では、JavaScript で場所を設定します。

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

JavaScript で、この例に必要なライブラリをインポートします。プレイスライブラリは、JavaScript 用の Places UI キットライブラリをインポートします。

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

動的な地図を作成します。

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

検索ボタンにクリックリスナーを追加して、場所の検索を開始します。検索結果が読み込まれたら、各場所のマーカーを作成し、クリックリスナーを追加します。マーカーをクリックすると、対応する Place Details がリクエストされ、表示されます。

場所が検出され、Place Search 要素が読み込まれると、Place Search 要素の places プロパティに結果の配列が入力されます。各結果は、場所の ID、座標、ビューポートを含む場所オブジェクトです。詳細を取得するには、プレイス ID またはプレイスオブジェクト全体を Place Details 要素に渡します。

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

この GitHub リポジトリで、デモと完全なコードを必ずご確認ください。

構築に役立つソース

寄稿者

主な著者:

Teresa Qin | Google Maps Platform ソリューションエンジニア

Places UI キットとは何ですか？また、それを使用して魅力的なソリューションを構築するにはどうすればよいですか？ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。