目標
PlaceSearchElement を Google マップと統合して、ユーザーが Nearby Search やテキスト検索を使用して場所を検索できるようにし、スポットを探索する機能を強化する方法について説明します。Place Details Compact Element を使用すると、アプリケーションに表示される場所の詳細情報を提供できます。
PlaceSearchElement とは
PlaceSearchElement は、Maps JavaScript API の Places UI キットの一部です。これは、Place Search の結果をアプリケーション内のリスト形式で直接レンダリングする HTML 要素です。この要素により、Nearby Search またはテキスト検索で見つかった場所を表示するプロセスが簡素化され、場所の検索でシームレスなユーザー エクスペリエンスが実現します。ユーザーがリストから場所を選択すると、その場所の詳細を地図上に表示できます。多くの場合、情報ウィンドウと Place Details 要素が使用されます。
場所の検索を可視化する
次の図は、PlaceSearchElement の動作例を示しています。左側には、レストランのリスト（PlaceSearchElement）が表示されます。レストランを選択すると、その詳細が地図上の情報ウィンドウに表示され、地図の中心がそのレストランの場所に移動します。
場所の検索のユースケース
PlaceSearchElement を統合すると、さまざまな業界のさまざまなアプリケーションを強化できます。
- 旅行と観光: 観光客が特定の地域の観光スポット、ホテル、特定の種類の料理を検索できるようにします。
- 不動産: 購入希望者や賃貸希望者が、近くの学校、スーパーマーケット、公共交通機関を見つけられるようにします。
- 物流とサービス: ドライバーが EV 充電スタンド、ガソリン スタンド、特定のサービス センターを見つけられるように支援します。
ソリューション ワークフロー: Place Discovery の実装
このセクションでは、PlaceSearchElement を統合して地図上の場所を検索する方法について説明します。Places UI キットを操作するためのコード スニペットも紹介します。地図を初期化し、Nearby Search とテキスト検索の両方を実装する方法を学びます。最後に、Place Details 要素を使用して、ユーザーが地図上のピンをクリックしたときに場所の詳細を表示します。
前提条件
次のドキュメントを理解しておくことをおすすめします。
PlaceSearchElement- Nearby Search またはテキスト検索を使用して場所を公開するために使用されます。- Place Details 要素 - 個々の場所の詳細を表示するために使用されます。
- Maps JavaScript API - ページに地図を表示し、Places UI キットをインポートするために使用します。
プロジェクトで Maps JavaScript API と Places UI Kit を有効にします。
始める前に、Maps JavaScript API を読み込み、必要なライブラリをインポートしていることを確認してください。また、このドキュメントは、HTML、CSS、JavaScript などのウェブ開発に関する実践的な知識があることを前提としています。
ページに地図を追加する
最初のステップは、ページに地図を追加することです。この地図は、PlaceSearchElement の結果を選択可能なピンとして表示するために使用されます。
ページに地図を追加する方法は 2 つあります。
gmp-mapHTML ウェブ コンポーネントを使用する。- JavaScript を使用する。
このページのコード スニペットは、JavaScript マップを使用して生成されたものです。
地図は、ユーザーが検索する場所（ホテルなど）を中心に表示することも、ユーザーの現在地を中心に表示するように初期化することもできます。このドキュメントでは、固定された場所を検索のアンカーとして使用します。
ホテルなどの固定された場所の近くにある場所を可視化する場合は、地図上にマーカーを配置して、この場所を表します。次に例を示します。
地図の中心はサンフランシスコで、青いピンは付近を検索している場所を表しています。ピンの色は PinElement を使用してカスタマイズされています。地図タイプ コントロールが UI から非表示になりました。
PlaceSearchElementを設定
次に、PlaceSearchElement を表示するための HTML と CSS を設定します。この例では、要素を地図の左側にフローティングしていますが、アプリケーションに合わせてさまざまなレイアウトを試すことができます。
PlaceSearchElement は宣言型アプローチを使用します。JavaScript で完全に構成するのではなく、メインの <gmp-place-search> コンポーネント内に <gmp-place-nearby-search-request> などのリクエスト要素をネストして、HTML で検索タイプを直接定義します。
HTML コード内で <gmp-place-search> 要素を初期化します。selectable 属性を使用して、結果のクリック イベントを有効にします。その中に <gmp-place-nearby-search-request> を追加して、この要素が Nearby Search に使用されることを指定します。
<gmp-place-search selectable>
<gmp-place-nearby-search-request>
</gmp-place-nearby-search-request>
</gmp-place-search>
最初の検索を実行して結果を表示するには、JavaScript を使用してネストされたリクエスト要素への参照を取得し、そのプロパティを設定します。前のステップのマーカー位置を中心点として、locationRestriction として使用する Circle を初期化します。次に、リクエスト要素の locationRestriction プロパティと includedPrimaryTypes プロパティを設定して検索をトリガーします。
これを行うコード スニペットは次のとおりです。
// Get references to the Place Search and its nested request element
const placeSearchElement = document.querySelector("gmp-place-search");
const placeSearchRequestElement = document.querySelector("gmp-place-nearby-search-request");
// Define the location restriction for the search
const circleRestriction = new Circle({
center: marker.position,
radius: 500
});
// Set the properties on the request element to perform an initial search for restaurants.
placeSearchRequestElement.locationRestriction = circleRestriction;
placeSearchRequestElement.includedPrimaryTypes = ['restaurant'];
この段階でのアプリケーションの外観の例を次に示します。
ユーザーに検索を許可する
PlaceSearchElement では、次の 2 つの検索オプションを使用できます。
<gmp-place-nearby-search-request>- 場所タイプを使用して、Places Nearby Search の検索結果をレンダリングします。<gmp-place-text-search-request>- 「サンフランシスコの寿司」などのフリーテキスト入力を使用して、Places テキスト検索 から検索結果をレンダリングします。
これらは <gmp-place-search> 内のネストされた要素です。次に、JavaScript を使用して、ネストされたリクエスト要素のプロパティを設定することで、検索をトリガーします。
このセクションでは、両方の方法の実装について説明します。
Nearby Search
ユーザーが Nearby Search を実行できるようにするには、まず、ユーザーが場所の種類を選択するための UI 要素が必要です。アプリケーションに最適な選択方法（たとえば、場所タイプの選択肢が入力されたプルダウン リスト）を選択します。
ユースケースに関連するタイプのサブセットを選択することをおすすめします。たとえば、ホテルの近くにある観光スポットを表示するアプリケーションを開発している場合は、bakery、coffee_shop、museum、restaurant、tourist_attraction を選択します。
HTML には、<gmp-place-nearby-search-request> がネストされた <gmp-place-search> 要素を含める必要があります。
<gmp-place-search selectable>
<gmp-place-nearby-search-request>
</gmp-place-nearby-search-request>
</gmp-place-search>
次に、プレイスタイプ セレクタで change イベントの JavaScript リスナーを作成します。このリスナーは、<gmp-place-nearby-search-request> 要素のプロパティを更新する関数を呼び出します。これにより、新しい検索が自動的にトリガーされ、リストが更新されます。
// Get a reference to the nested request element
const placeSearchRequestElement = document.querySelector('gmp-place-nearby-search-request');
// Function to update the place search based on the selected type
function updatePlaceList() {
const selectedType = placeTypeSelect.value;
if (!selectedType) {
// If no type is selected, don't perform a search.
// You could optionally hide the list or clear previous results here.
placeSearchElement.style.display = 'none';
return;
}
placeSearchElement.style.display = 'block';
// Set properties on the request element to trigger a new search
placeSearchRequestElement.locationRestriction = searchCircle;
placeSearchRequestElement.maxResultCount = 8;
placeSearchRequestElement.includedPrimaryTypes = [selectedType];
}
設定手順と同じ searchCircle が locationRestriction に使用されます。includedPrimaryTypes プロパティは、ユーザーの選択した値に設定されます。結果の数を制限するために、オプションの maxResultCount も設定されています。
テキスト検索
テキスト検索を有効にするには、HTML 構成を変更する必要があります。Nearby Search リクエストの代わりに、<gmp-place-text-search-request> 要素をネストします。
<gmp-place-search selectable>
<gmp-place-text-search-request>
</gmp-place-text-search-request>
</gmp-place-search>
UI にテキスト入力と検索ボタンを追加します。ボタンの click イベントの JavaScript リスナーを作成します。イベント ハンドラは、ユーザーの入力を受け取り、<gmp-place-text-search-request> 要素のプロパティを更新して検索を実行します。
// Get a reference to the text search request element
const placeTextSearchRequestElement = document.querySelector('gmp-place-text-search-request');
const textSearchInput = document.getElementById('textSearchInput');
const textSearchButton = document.getElementById('textSearchButton');
textSearchButton.addEventListener('click', performTextSearch);
function performTextSearch() {
const query = textSearchInput.value.trim();
if (!query) {
console.log("Search query is empty.");
return;
}
// Set properties on the request element to trigger a new search
placeTextSearchRequestElement.textQuery = query;
placeTextSearchRequestElement.locationBias = map.getBounds();
placeTextSearchRequestElement.maxResultCount = 8;
}
ここでは、ユーザーの入力で textQuery プロパティを設定します。また、現在の地図の境界を使用して locationBias を指定することもできます。これにより、API は、そのエリア内の結果を優先的に返します（ただし、そのエリア内の結果に限定されるわけではありません）。オプションの maxResultCount を使用すると、返される結果の数を制限できます。
場所のピンと詳細を表示する
これで、アプリケーションは Place Search を実行し、要素にデータを入力できるようになりました。次のステップでは、以下の方法で機能を強化します。
PlaceSearchElementに入力された各場所のピンを地図上に表示する。- ユーザーが
PlaceSearchElement内のピンまたは場所をクリックして、その場所の詳細を表示できるようにする。
このステップの原則は、アプリケーションが Nearby Search を使用しているか、テキスト検索を使用しているかにかかわらず同じです。
まず、JavaScript コードにグローバル変数を追加して、場所マーカーを保存します。 これにより、検索が変更されたときにマーカーを削除し、クリック イベントを処理できるようになります。
let markers = {};
地図にマーカーを追加する関数を作成します。この関数は、新しい検索結果が読み込まれるたびに呼び出されます。この操作を行うと、次のようになります。
- 地図から既存の場所マーカーを削除します。
PlaceSearchElementからの結果をループ処理し、それぞれにマーカーを追加します。- すべての新しいマーカーが表示されるように、地図の境界を調整します。
検索結果が利用可能になったときにリッスンするには、<gmp-place-search> 要素に gmp-load イベント リスナーを追加します。このイベントは、検索が完了して結果がレンダリングされた後に発生します。
検索関数（updatePlaceList など）内にリスナーを追加し、{ once: true } オプションを使用して、現在の検索の結果に対してのみリスナーが起動するようにします。
// In your search function, after setting the request properties:
placeSearchElement.addEventListener('gmp-load', addMarkers, { once: true });
addMarkers 関数は次のようになります。
async function addMarkers() {
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
if (placeSearchElement.places.length > 0) {
// Remove existing markers
for (const m in markers) {
markers[m].map = null;
}
markers = {};
// Loop through each place from the search results
// and add a marker for each one.
for (const place of placeSearchElement.places) {
const marker = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: place.location,
});
markers[place.id] = marker;
bounds.extend(place.location);
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
// Add a click listener for each marker.
marker.addListener('gmp-click', (event) => {
// The main logic for showing details will go here.
});
}
// Position the map to display all markers.
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
}
このステップを完了すると、アプリは次のようになり、PlaceSearchElement から返された各場所のマーカーを表示できるようになります。
地図上にマーカーが表示されたので、最後のステップとして、マーカーと要素のクリック イベントを処理し、Place Details 要素から提供される場所の詳細を含む情報ウィンドウを表示します。この例では、Place Details Compact 要素を使用します。
Place Details Compact 要素の HTML をコードに追加します。例:
<gmp-place-details-compact orientation="vertical" style="display: none;">
<gmp-place-all-content></gmp-place-all-content>
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>
style は display: none に設定されています。必要になるまで表示されません。gmp-place-all-content は、すべての要素コンテンツをレンダリングするために渡されます。レンダリングするコンテンツを選択するには、Place Details Compact 要素のドキュメントをご覧ください。
JavaScript で、Place Details Compact 要素への参照を保持するグローバル変数を作成し、初期化コードでこの変数を設定します。次に例を示します。
let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers 関数内で、各マーカーに gmp-click イベント リスナーを追加し、現在のマーカーのプレイス ID を渡して、Place Details Compact Element が場所の詳細を表示するように構成します。
これが完了すると、情報ウィンドウが開き、マーカーに固定された Place Details Compact Element が表示されます。
最後に、選択した場所のビューポートに地図を配置して、表示されるようにします。
async function addMarkers() {
...
marker.addListener('gmp-click', (event) => {
//Set up Place Details Compact Widget
placeDetailsElement.style.display = "block";
// Remove any existing place request element
const existingPlaceRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
if (existingPlaceRequest) {
existingPlaceRequest.remove();
}
// Create and configure the new place request element
const placeRequestElement = new google.maps.places.PlaceDetailsPlaceRequestElement({ place: place.id });
// Prepend the new place request element to the main widget
placeDetailsElement.prepend(placeRequestElement);
if (infoWindow.isOpen) {
infoWindow.close();
}
infoWindow.setOptions({
content: placeDetailsElement
});
infoWindow.open({
anchor: marker,
map: map
});
// Position the map to show the selected place
placeDetailsElement.addEventListener('gmp-load', () => {
map.fitBounds(place.viewport, { top: 500, left: 400 });
});
});
...
});
}
}
ユーザーが Place List 要素内の場所をクリックして Place Details Compact 要素を表示できるようにするには、configureFromSearchNearbyRequest の呼び出しの後に、次のコードを JavaScript コードに追加します。
placeSearchElement.addEventListener("gmp-select", ({ place }) => {
if (markers[place.id]) {
markers[place.id].click();
}
});
このステップが完了すると、アプリケーションは Nearby Search またはテキスト検索を使用して、Place List Element にデータを入力できるようになります。この結果、地図上にピンが表示されます。ピンまたは Place List 要素内の場所をクリックすると、Place Details Compact 要素によって提供される場所の詳細を含む情報ウィンドウが表示されます。
アプリケーションは次のようになります。
まとめ
PlaceSearchElement を Place Details Compact 要素と組み合わせることで、Google Maps Platform アプリケーションに充実した場所検索機能を簡単に追加できます。
今すぐ Places UI キットを試して、ユーザーが近隣検索とテキスト検索の両方を使用して場所を検索、探索できるようにしましょう。また、場所の詳細情報を表示して、場所の探索ユースケースでのユーザーとのインタラクションを強化しましょう。
寄稿者
Henrik Valve | DevX エンジニア