Places Widgets

PlaceAutocompleteElement クラス

google.maps.places.PlaceAutocompleteElement クラス

PlaceAutocompleteElement は、Places Autocomplete API の UI コンポーネントを提供する HTMLElement サブクラスです。

PlaceAutocompleteElement は、内部で AutocompleteSessionToken を自動的に使用して、ユーザーの予測入力検索のクエリと選択フェーズをグループ化します。

PlacePrediction.toPlace によって返された Place で Place.fetchFields を最初に呼び出すと、PlacePrediction の取得に使用されたセッション トークンが自動的に含まれます。

セッションの仕組みについて詳しくは、https://developers.google.com/maps/documentation/places/web-service/place-session-tokens をご覧ください。

カスタム要素:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

このクラスは HTMLElement を拡張します。

このクラスは PlaceAutocompleteElementOptions を実装します。

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceAutocompleteElementOptions インターフェース

google.maps.places.PlaceAutocompleteElementOptions インターフェース

PlaceAutocompleteElement を構築するためのオプション。各プロパティの説明については、PlaceAutocompleteElement クラスの同じ名前のプロパティを参照してください。

PlacePredictionSelectEvent クラス

google.maps.places.PlacePredictionSelectEvent クラス

このイベントは、ユーザーが PlaceAutocompleteElement で候補アイテムを選択した後に作成されます。event.placePrediction を使用して選択にアクセスします。

PlacePrediction.toPlace を呼び出して placePrediction を Place に変換します。

このクラスは Event を拡張します。

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

PlaceAutocompleteRequestErrorEvent クラス

google.maps.places.PlaceAutocompleteRequestErrorEvent クラス

このイベントは、ネットワーク リクエストに問題がある場合に PlaceAutocompleteElement によって出力されます。

このクラスは Event を拡張します。

const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

PlaceContextualElement クラス

google.maps.places.PlaceContextualElement クラス

コンテキスト トークンを使用して、Grounding with Google Maps レスポンスのコンテキスト ビューを表示するウィジェット。

カスタム要素:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

このクラスは HTMLElement を拡張します。

このクラスは PlaceContextualElementOptions を実装します。

const {PlaceContextualElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceContextualElementOptions インターフェース

google.maps.places.PlaceContextualElementOptions インターフェース

PlaceContextualElement のオプション。

PlaceContextualListConfigElement クラス

google.maps.places.PlaceContextualListConfigElement クラス

場所コンテキスト要素のリストビューのオプションを構成する HTML 要素。

カスタム要素:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

このクラスは HTMLElement を拡張します。

このクラスは PlaceContextualListConfigElementOptions を実装します。

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceContextualListConfigElementOptions インターフェース

google.maps.places.PlaceContextualListConfigElementOptions インターフェース

PlaceContextualListConfigElement のオプション。

PlaceContextualListLayout 定数

google.maps.places.PlaceContextualListLayout 定数

スポット コンテキスト要素がリストビューでサポートするレイアウトのリスト。

const {PlaceContextualListLayout} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

PlaceDetailsElement クラス

google.maps.places.PlaceDetailsElement クラス

場所の詳細を表示する HTML 要素。configureFromPlace() メソッドまたは configureFromLocation() メソッドを使用して、レンダリングするコンテンツを指定します。Place Details Element を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。

カスタム要素:
<gmp-place-details size="small"></gmp-place-details>

このクラスは HTMLElement を拡張します。

このクラスは PlaceDetailsElementOptions を実装します。

const {PlaceDetailsElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
configureFromLocation	configureFromLocation(location) パラメータ:  location:  LatLng|LatLngLiteral プレイスの詳細をレンダリングする場所。 戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。 リバース ジオコーディングを使用して LatLng からウィジェットを構成します。
configureFromPlace	configureFromPlace(place) パラメータ:  place:  Place|{id:string} 詳細を表示する場所。 戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。 Place オブジェクトまたはプレイス ID からウィジェットを構成します。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceDetailsElementOptions インターフェース

google.maps.places.PlaceDetailsElementOptions インターフェース

PlaceDetailsElement のオプション。

PlaceDetailsSize 定数

google.maps.places.PlaceDetailsSize 定数

PlaceDetailsElement のサイズ バリエーション。

const {PlaceDetailsSize} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

PlaceDetailsCompactElement クラス

google.maps.places.PlaceDetailsCompactElement クラス

場所の詳細をコンパクトなレイアウトで表示します。PlaceDetailsPlaceRequestElement を追加して、レンダリングする場所を指定します。PlaceContentConfigElement、PlaceStandardContentElement、PlaceAllContentElement を追加して、レンダリングするコンテンツを指定します。

この要素を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。

カスタム要素:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>

このクラスは HTMLElement を拡張します。

このクラスは PlaceDetailsCompactElementOptions を実装します。

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceDetailsCompactElementOptions インターフェース

google.maps.places.PlaceDetailsCompactElementOptions インターフェース

PlaceDetailsCompactElement のオプション。

PlaceDetailsOrientation 定数

google.maps.places.PlaceDetailsOrientation 定数

PlaceDetailsCompactElement の向きのバリエーション。

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

PlaceDetailsPlaceRequestElement クラス

google.maps.places.PlaceDetailsPlaceRequestElement クラス

場所オブジェクト、ID、リソース名に基づいてデータを読み込むように、Place Details Compact 要素を構成します。この要素を PlaceDetailsCompactElement の子として追加して、指定した場所のデータを読み込みます。

カスタム要素:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>

このクラスは HTMLElement を拡張します。

このクラスは PlaceDetailsPlaceRequestElementOptions を実装します。

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceDetailsPlaceRequestElementOptions インターフェース

google.maps.places.PlaceDetailsPlaceRequestElementOptions インターフェース

PlaceDetailsPlaceRequestElement のオプション。

PlaceContentConfigElement クラス

google.maps.places.PlaceContentConfigElement クラス

Place Details Compact 要素で表示するコンテンツを設定します。この要素を PlaceDetailsCompactElement の子として追加して使用します。PlaceContentConfigElement に次のいずれかの要素を追加して、対応するコンテンツを表示します。
PlaceMediaElement、PlaceAddressElement、PlaceRatingElement、PlaceTypeElement、PlacePriceElement、PlaceAccessibleEntranceIconElement、PlaceOpenNowStatusElement、PlaceAttributionElement
子の順序は関係ありません。要素はカスタマイズできない標準の順序でコンテンツをレンダリングします。

カスタム要素:
<gmp-place-content-config></gmp-place-content-config>

このクラスは HTMLElement を拡張します。

このクラスは PlaceContentConfigElementOptions を実装します。

const {PlaceContentConfigElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。

メソッド
addEventListener	addEventListener(type, listener[, options]) パラメータ:  type:  string リッスンするイベント タイプを表す大文字と小文字を区別する文字列。 listener:  EventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capture と passive のみです。 戻り値:  void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
removeEventListener	removeEventListener(type, listener[, options]) パラメータ:  type:  string イベント リスナーを削除するイベントのタイプを指定する文字列。 listener:  EventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。 options:  boolean|EventListenerOptions optional オプションをご覧ください。 戻り値:  void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceContentConfigElementOptions インターフェース

google.maps.places.PlaceContentConfigElementOptions インターフェース