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 のライブラリをご覧ください。
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
パラメータ: 
includedPrimaryTypes
タイプ:  Array<string> optional
含まれるプライマリ Place タイプ（「restaurant」や「gas_station」など）。

場所は、そのメインタイプがこのリストに含まれている場合にのみ返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべてのプレイスタイプが返されます。
HTML 属性:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
タイプ:  Array<string> optional
指定されたリージョンの結果のみを含めます。最大 15 個の CLDR 2 文字のリージョン コードで指定します。空のセットを指定すると、結果は制限されません。locationRestriction と includedRegionCodes の両方が設定されている場合、結果は交差するエリアに配置されます。
HTML 属性:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
タイプ:  LocationBias optional
場所を検索するときに使用するソフト境界またはヒント。
locationRestriction
タイプ:  LocationRestriction optional
検索結果を制限する境界。
name
タイプ:  string optional
入力要素に使用する名前。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name をご覧ください。入力の name 属性と同じ動作に従います。これは、フォームの送信時に使用される名前です。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form をご覧ください。
HTML 属性:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
距離の計算元となる出発地。指定しない場合、距離は計算されません。高度が指定されている場合、計算には使用されません。
HTML 属性:
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
placeholder
タイプ:  string
入力要素に表示するプレースホルダ テキスト。
requestedLanguage
タイプ:  string optional
可能であれば、結果を返す言語の言語識別子。選択した言語の結果が上位に表示されることがありますが、候補がこの言語に限定されるわけではありません。サポートされている言語の一覧をご覧ください。
HTML 属性:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
タイプ:  string optional
結果のフォーマットとフィルタリングに使用されるリージョン コード。候補がこの国に限定されることはありません。地域コードには、ccTLD（「トップレベル ドメイン」）の 2 文字の値を指定できます。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」（.co.uk）ですが、ISO 3166-1 コードは「gb」です（厳密には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ）。
HTML 属性:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
タイプ:  UnitSystem optional
距離の表示に使用される単位系。指定しない場合、単位系は requestedRegion によって決定されます。
HTML 属性:
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
value
タイプ:  string
入力要素の値。
prediction-item-icon
このスロットは、予測アイテムの横に表示されるアイコンとしてレンダリングする <template> 要素を 1 つだけ受け入れます。
input
予測入力要素の入力要素。
prediction-item
予測のプルダウン内の項目。1 つの予測を表します。
prediction-item-icon
予測リスト内の各項目の左に表示されるアイコン。
prediction-item-main-text
予測の主要なテキストである prediction-item の一部。地理的位置の場合、ここには、「札幌」のような地名や「北十条 4 丁目」のような所番地が含まれます。デフォルトでは、prediction-item-main-text の色は黒です。prediction-item に追加のテキストがある場合、そのテキストは prediction-item-main-text 以外となり、prediction-item のスタイルを継承します。デフォルトでは色はグレーになります。この追加のテキストは通常、住所です。
prediction-item-match
返される予測のうち、ユーザーの入力に一致する部分。デフォルトでは、この一致するテキストは太字でハイライト表示されます。一致テキストは prediction-item 内の任意の場所に存在します。prediction-item-main-text の一部であるとは限りません。
prediction-item-selected
ユーザーがキーボードから移動したときの項目。注: 選択した項目は、この部分のスタイルと予測項目の部分のスタイルの両方の影響を受けます。
prediction-list
プレイスの Autocomplete サービスが返す予測のリストを含む視覚要素。このリストは、PlaceAutocompleteElement の下にプルダウン リストとして表示されます。
background-color
要素の背景色をオーバーライドします。
border
要素の枠線をオーバーライドします。
border-radius
要素の枠線の半径をオーバーライドします。
color
要素のフォントをオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font
要素のフォントをオーバーライドします。
font-family
要素のフォントをオーバーライドします。
font-size
要素のフォントをオーバーライドします。
font-style
要素のフォントをオーバーライドします。
font-weight
要素のフォントをオーバーライドします。
line-height
要素のフォントをオーバーライドします。
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 をご覧ください。
gmp-error
function(errorEvent)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-select
function(placePredictionSelectEvent)
引数: 
このイベントは、ユーザーが場所の候補を選択したときに呼び出されます。Place オブジェクトに変換可能な PlacePrediction オブジェクトが含まれます。

PlaceAutocompleteElementOptions インターフェース

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

PlaceAutocompleteElement を作成するためのオプション。各プロパティの説明については、PlaceAutocompleteElement クラスの同じ名前のプロパティをご覧ください。
includedPrimaryTypes optional
タイプ:  Array<string> optional
includedRegionCodes optional
タイプ:  Array<string> optional
locationBias optional
タイプ:  LocationBias optional
locationRestriction optional
タイプ:  LocationRestriction optional
name optional
タイプ:  string optional
origin optional
requestedLanguage optional
タイプ:  string optional
requestedRegion optional
タイプ:  string optional
unitSystem optional
タイプ:  UnitSystem optional
value optional
タイプ:  string optional
入力要素の値。

PlacePredictionSelectEvent クラス

google.maps.places.PlacePredictionSelectEvent クラス

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

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

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

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
placePrediction
タイプ:  PlacePrediction
PlacePrediction.toPlace を呼び出して、これを Place に変換します。

BasicPlaceAutocompleteElement クラス

google.maps.places.BasicPlaceAutocompleteElement クラス

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

カスタム要素:
<gmp-basic-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-basic-place-autocomplete>

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

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

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement(options)
パラメータ: 
includedPrimaryTypes
タイプ:  Array<string> optional
含まれるプライマリ Place タイプ（「restaurant」や「gas_station」など）。

場所は、そのメインタイプがこのリストに含まれている場合にのみ返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべてのプレイスタイプが返されます。
HTML 属性:
  • <gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>
includedRegionCodes
タイプ:  Array<string> optional
指定されたリージョンの結果のみを含めます。最大 15 個の CLDR 2 文字のリージョン コードで指定します。空のセットを指定すると、結果は制限されません。locationRestriction と includedRegionCodes の両方が設定されている場合、結果は交差するエリアに配置されます。
HTML 属性:
  • <gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>
locationBias
タイプ:  LocationBias optional
場所を検索するときに使用するソフト境界またはヒント。
locationRestriction
タイプ:  LocationRestriction optional
検索結果を制限する境界。
name
タイプ:  string optional
入力要素に使用する名前。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name をご覧ください。入力の name 属性と同じ動作に従います。これは、フォームの送信時に使用される名前です。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form をご覧ください。
HTML 属性:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
距離の計算元となる出発地。指定しない場合、距離は計算されません。高度が指定されている場合、計算には使用されません。
HTML 属性:
  • <gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>
requestedLanguage
タイプ:  string optional
可能であれば、結果を返す言語の言語識別子。選択した言語の結果が上位に表示されることがありますが、候補がこの言語に限定されるわけではありません。サポートされている言語の一覧をご覧ください。
HTML 属性:
  • <gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>
requestedRegion
タイプ:  string optional
結果のフォーマットとフィルタリングに使用されるリージョン コード。候補がこの国に限定されることはありません。地域コードには、ccTLD（「トップレベル ドメイン」）の 2 文字の値を指定できます。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」（.co.uk）ですが、ISO 3166-1 コードは「gb」です（厳密には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ）。
HTML 属性:
  • <gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>
unitSystem
タイプ:  UnitSystem optional
距離の表示に使用される単位系。指定しない場合、単位系は requestedRegion によって決定されます。
HTML 属性:
  • <gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>
prediction-item-icon
このスロットは、予測アイテムの横に表示されるアイコンとしてレンダリングする <template> 要素を 1 つだけ受け入れます。
input
予測入力要素の入力要素。
prediction-item
予測のプルダウン内の項目。1 つの予測を表します。
prediction-item-icon
予測リスト内の各項目の左に表示されるアイコン。
prediction-item-main-text
予測の主要なテキストである prediction-item の一部。地理的位置の場合、ここには、「札幌」のような地名や「北十条 4 丁目」のような所番地が含まれます。デフォルトでは、prediction-item-main-text の色は黒です。prediction-item に追加のテキストがある場合、そのテキストは prediction-item-main-text 以外となり、prediction-item のスタイルを継承します。デフォルトでは色はグレーになります。この追加のテキストは通常、住所です。
prediction-item-match
返される予測のうち、ユーザーの入力に一致する部分。デフォルトでは、この一致するテキストは太字でハイライト表示されます。一致テキストは prediction-item 内の任意の場所に存在します。prediction-item-main-text の一部であるとは限りません。
prediction-item-selected
ユーザーがキーボードから移動したときの項目。注: 選択した項目は、この部分のスタイルと予測項目の部分のスタイルの両方の影響を受けます。
prediction-list
プレイスの Autocomplete サービスが返す予測のリストを含む視覚要素。このリストは、PlaceAutocompleteElement の下にプルダウン リストとして表示されます。
background-color
要素の背景色をオーバーライドします。
border
要素の枠線をオーバーライドします。
border-radius
要素の枠線の半径をオーバーライドします。
color
要素のフォントをオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font
要素のフォントをオーバーライドします。
font-family
要素のフォントをオーバーライドします。
font-size
要素のフォントをオーバーライドします。
font-style
要素のフォントをオーバーライドします。
font-weight
要素のフォントをオーバーライドします。
line-height
要素のフォントをオーバーライドします。
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 をご覧ください。
gmp-error
function(errorEvent)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-select
function(placeSelectEvent)
引数: 
このイベントは、ユーザーが場所の候補を選択したときに呼び出されます。Place オブジェクトが含まれます。

BasicPlaceAutocompleteElementOptions インターフェース

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

BasicPlaceAutocompleteElement を作成するためのオプション。
includedPrimaryTypes optional
タイプ:  Array<string> optional
includedRegionCodes optional
タイプ:  Array<string> optional
locationBias optional
タイプ:  LocationBias optional
locationRestriction optional
タイプ:  LocationRestriction optional
name optional
タイプ:  string optional
origin optional
requestedLanguage optional
タイプ:  string optional
requestedRegion optional
タイプ:  string optional
unitSystem optional
タイプ:  UnitSystem optional

PlaceDetailsElement クラス

google.maps.places.PlaceDetailsElement クラス

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

例: 

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details>

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

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

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

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

const {PlaceDetailsElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceDetailsElement
PlaceDetailsElement([options])
パラメータ: 
place
タイプ:  Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
--gmp-button-border-color
[マップで開く] ボタンの枠線の色。
--gmp-button-border-radius
[マップで開く] ボタンの枠線の半径。
--gmp-button-border-width
[マップで開く] ボタンの枠線の太さ。
--gmp-collage-border-radius-outer
メディア コラージュの外側の角の枠線の半径。
--gmp-dialog-border-radius
Google マップの開示ダイアログの枠線の半径。
--gmp-mat-color-disabled-surface
無効状態または非存在を伝えるための表面色。空のレビューの星に使用されます。
--gmp-mat-color-info
情報提供の感情を持つ UI 要素の色。車椅子アイコンに使用されます。
--gmp-mat-color-negative
ネガティブな感情の UI 要素の色。「営業中」ステータスの「休業」テキストに使用されます。
--gmp-mat-color-neutral-container
ニュートラルな塗りつぶし UI 要素のコンテナの色。画像プレースホルダとレビュー公開日バッジに使用されます。
--gmp-mat-color-on-neutral-container
ニュートラル コンテナの色に対するテキストとアイコンの色。レビューの公開日バッジと、EV 充電器が利用できない場合の利用可能性バッジに使用されます。
--gmp-mat-color-on-positive-container
ポジティブ コンテナの色に対するテキストとアイコンの色。EV 充電器の空き状況バッジに使用されます（利用可能な場合）。
--gmp-mat-color-on-secondary-container
セカンダリ コンテナの色に対するテキストとアイコンの色。[マップで開く] ボタンのテキストとアイコンに使用されます。
--gmp-mat-color-on-surface
任意のサーフェス色に対するテキストとアイコンの色。通常のテキストに使用されます。
--gmp-mat-color-on-surface-variant
任意のサーフェス色に対して、テキストとアイコンの強調度を低くする色。あまり強調しないテキストに使用します。
--gmp-mat-color-outline-decorative
インタラクティブ要素以外の要素の枠線の色。要素の枠線に使用されます。
--gmp-mat-color-positive
ポジティブな感情を示す UI 要素の色。「営業中」ステータスの「営業中」テキストに使用されます。
--gmp-mat-color-positive-container
ポジティブな感情を伝える UI 要素のコンテナの色。EV 充電器の空き状況バッジに使用されます（利用可能な場合）。
--gmp-mat-color-primary
サーフェス色に対するインタラクティブなテキストとアイコンの色。レビュー数、Google マップの開示ダイアログのリンク、ウェブサイトのリンク、[概要] タブのアイコン、タブバーのタイトル（ホバー / フォーカス / テキストの色）に使用されます。
--gmp-mat-color-secondary-container
サーフェスに対して目立たない塗りつぶしの色。トーンボタンなどの控えめなコンポーネントに使用します。[マップで開く] ボタンの背景に使用されます。
--gmp-mat-color-surface
背景の色。要素の背景と Google マップの情報開示ダイアログに使用されます。
--gmp-mat-font-body-medium
Google マップの情報開示ダイアログで、場所の住所、評価、タイプ、価格、営業中ステータス、営業時間、クチコミ、電話番号、ウェブサイト、Plus Code、主な特徴、本文に使用されます。
--gmp-mat-font-body-small
[概要] タブの機能リストの本文に使用されます。
--gmp-mat-font-display-small
[概要] タブの場所の名前と各機能の見出しのテキストに使用されます。
--gmp-mat-font-family
すべてのテキストに使用される基本フォント ファミリー。
--gmp-mat-font-headline-medium
Google マップの情報開示ダイアログの見出しテキストに使用されます。
--gmp-mat-font-label-large
タブのタイトル、[マップで開く] ボタン、フォト ギャラリーのレビュー投稿者の帰属表示テキスト、クチコミ セクションのレビュー投稿者の帰属表示テキスト、Google マップの情報開示ダイアログのリンクに使用されます。
--gmp-mat-font-label-medium
写真数のバッジとクチコミの公開日のバッジに使用されます。
--gmp-mat-font-title-small
[概要] タブの各セクションのタイトルに使用されます。
--gmp-mat-spacing-extra-large
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-extra-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-large
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-medium
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-two-extra-large
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-star-rating-color
評価の塗りつぶされた星の色。
background-color
要素の背景色をオーバーライドします。
border
要素の枠線をオーバーライドします。
border-radius
要素の枠線の半径をオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font-size
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で ems で定義されています。デフォルトは 16px です。
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 をご覧ください。
gmp-error
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数: 
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。

PlaceDetailsElementOptions インターフェース

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

PlaceDetailsElement のオプション。

PlaceDetailsCompactElement クラス

google.maps.places.PlaceDetailsCompactElement クラス

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

例: 

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact>

この要素を使用するには、Google Cloud コンソールでプロジェクトの Places UI キット 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 のライブラリをご覧ください。
PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
パラメータ: 
orientation
タイプ:  PlaceDetailsOrientation optional
デフォルト: PlaceDetailsOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性:
  • <gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
  • <gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>
place
タイプ:  Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
truncationPreferred
タイプ:  boolean
デフォルト: false
true の場合、場所の名前と住所を折り返さずに、1 行に収まるように切り詰めます。
HTML 属性:
  • <gmp-place-details-compact truncation-preferred></gmp-place-details-compact>
--gmp-button-border-color
[マップで開く] ボタンの枠線の色。
--gmp-button-border-radius
[マップで開く] ボタンの枠線の半径。
--gmp-button-border-width
[マップで開く] ボタンの枠線の太さ。
--gmp-dialog-border-radius
Google マップの開示ダイアログの枠線の半径。
--gmp-mat-color-info
情報提供の感情を持つ UI 要素の色。車椅子アイコンに使用されます。
--gmp-mat-color-negative
ネガティブな感情の UI 要素の色。「営業中」ステータスの「休業」テキストに使用されます。
--gmp-mat-color-neutral-container
ニュートラルな塗りつぶし UI 要素のコンテナの色。画像プレースホルダに使用されます。
--gmp-mat-color-on-secondary-container
セカンダリ コンテナの色に対するテキストとアイコンの色。[マップで開く] ボタンのテキストとアイコンに使用されます。
--gmp-mat-color-on-surface
任意のサーフェス色に対するテキストとアイコンの色。通常のテキストに使用されます。
--gmp-mat-color-on-surface-variant
任意のサーフェス色に対して、テキストとアイコンの強調度を低くする色。あまり強調しないテキストに使用します。
--gmp-mat-color-outline-decorative
インタラクティブ要素以外の要素の枠線の色。要素の枠線に使用されます。
--gmp-mat-color-positive
ポジティブな感情を示す UI 要素の色。「営業中」ステータスの「営業中」テキストに使用されます。
--gmp-mat-color-primary
サーフェス色に対するインタラクティブなテキストとアイコンの色。クチコミ数と、Google マップの情報開示ダイアログのリンクに使用されます。
--gmp-mat-color-secondary-container
サーフェスに対して目立たない塗りつぶしの色。トーンボタンなどの控えめなコンポーネントに使用します。[マップで開く] ボタンの背景に使用されます。
--gmp-mat-color-surface
背景の色。要素の背景と Google マップの情報開示ダイアログに使用されます。
--gmp-mat-font-body-medium
Google マップの情報開示ダイアログの本文に使用されます。
--gmp-mat-font-body-small
場所の住所、評価、タイプ、価格、営業中ステータスに使用されます。
--gmp-mat-font-family
すべてのテキストに使用される基本フォント ファミリー。
--gmp-mat-font-headline-medium
Google マップの情報開示ダイアログの見出しテキストに使用されます。
--gmp-mat-font-label-large
[マップで開く] ボタン、Google マップの開示ダイアログのリンク、フォト ギャラリーのレビュー投稿者の帰属表示テキストに使用されます。
--gmp-mat-font-label-medium
写真数バッジに使用されます。
--gmp-mat-font-title-small
場所の名前として使用されます。
--gmp-mat-spacing-extra-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-large
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-medium
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-star-rating-color
評価の塗りつぶされた星の色。
--gmp-thumbnail-border-radius
場所のサムネイル画像の枠線の半径。
background-color
要素の背景色をオーバーライドします。
border
要素の枠線をオーバーライドします。
border-radius
要素の枠線の半径をオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font-size
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で ems で定義されています。デフォルトは 16px です。
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 をご覧ください。
gmp-error
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数: 
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。

PlaceDetailsCompactElementOptions インターフェース

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

PlaceDetailsCompactElement のオプション。
orientation optional
タイプ:  PlaceDetailsOrientation optional
PlaceDetailsCompactElement.orientation をご覧ください。
truncationPreferred optional
タイプ:  boolean optional
PlaceDetailsCompactElement.truncationPreferred をご覧ください。

PlaceDetailsOrientation 定数

google.maps.places.PlaceDetailsOrientation 定数

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

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

PlaceDetailsPlaceRequestElement クラス

google.maps.places.PlaceDetailsPlaceRequestElement クラス

プレイス オブジェクト、ID、またはリソース名に基づいてデータを読み込むように PlaceDetailsCompactElement または PlaceDetailsElement を構成します。この要素を PlaceDetailsCompactElement または PlaceDetailsElement の子として追加すると、指定した場所のデータが読み込まれます。次に例を示します。

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details>

カスタム要素:
<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 のライブラリをご覧ください。
PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
パラメータ: 
place
タイプ:  Place optional
デフォルト: null
Place Details Compact 要素に詳細を表示するプレイス オブジェクト、ID、またはリソース名。このプロパティは、リソース名として属性に反映されます。
HTML 属性:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
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 のオプション。
place optional
タイプ:  Place|string optional
PlaceDetailsPlaceRequestElement.placeを見る

PlaceDetailsLocationRequestElement クラス

google.maps.places.PlaceDetailsLocationRequestElement クラス

ロケーションに基づいてデータを読み込むように PlaceDetailsCompactElement または PlaceDetailsElement を構成します。この要素を PlaceDetailsCompactElement または PlaceDetailsElement の子として追加し、指定された場所のデータを読み込みます。次に例を示します。

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details>

カスタム要素:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>

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

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

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
パラメータ: 
location
デフォルト: null
Place Details 要素に詳細を表示する場所。LatLngAltitude に正規化します。
HTML 属性:
  • <gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
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 をご覧ください。

PlaceDetailsLocationRequestElementOptions インターフェース

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

PlaceDetailsLocationRequestElement のオプション。
location optional
場所をレンダリングする位置。

PlaceSearchElement クラス

google.maps.places.PlaceSearchElement クラス

Place Search の結果をリストに表示します。PlaceTextSearchRequestElement または PlaceNearbySearchRequestElement を追加して、結果をレンダリングするリクエストを指定します。PlaceContentConfigElement、PlaceStandardContentElement、PlaceAllContentElement を追加して、レンダリングするコンテンツを指定します。

例: 

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Place Search Element を使用するには、Google Cloud コンソールでプロジェクトの Places UI キット API を有効にします。

カスタム要素:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

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

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

const {PlaceSearchElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceSearchElement
PlaceSearchElement([options])
パラメータ: 
attributionPosition
タイプ:  PlaceSearchAttributionPosition optional
デフォルト: PlaceSearchAttributionPosition.TOP
帰属表示ロゴと法的開示ボタンの位置。
HTML 属性:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
タイプ:  PlaceSearchOrientation optional
デフォルト: PlaceSearchOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性:
  • <gmp-place-search orientation="vertical"></gmp-place-search>
  • <gmp-place-search orientation="horizontal"></gmp-place-search>
places
タイプ:  Array<Place>
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクトの配列。
selectable
タイプ:  boolean optional
デフォルト: false
リストアイテムを選択可能にするかどうか。true の場合、リストアイテムは、クリックされると gmp-select イベントをディスパッチするボタンになります。キーボードによる操作と選択もサポートされています。
HTML 属性:
  • <gmp-place-search selectable></gmp-place-search>
truncationPreferred
タイプ:  boolean optional
デフォルト: false
true の場合、特定のコンテンツ行を折り返さずに 1 行に収まるように切り詰めます。
HTML 属性:
  • <gmp-place-search truncation-preferred></gmp-place-search>
--gmp-button-border-color
[マップで開く] ボタンの枠線の色。
--gmp-button-border-radius
[マップで開く] ボタンの枠線の半径。
--gmp-button-border-width
[マップで開く] ボタンの枠線の太さ。
--gmp-card-border-radius
プレイスカードの枠線の半径。
--gmp-dialog-border-radius
Google マップの開示ダイアログの枠線の半径。
--gmp-mat-color-info
情報提供の感情を持つ UI 要素の色。車椅子対応の入り口アイコンに使用されます。
--gmp-mat-color-negative
ネガティブな感情の UI 要素の色。場所の営業時間の「休業」ラベルに使用されます。
--gmp-mat-color-neutral-container
ニュートラルな塗りつぶし UI 要素のコンテナの色。レビュー日のバッジと読み込みプレースホルダの形状に使用されます。
--gmp-mat-color-on-neutral-container
ニュートラル コンテナ上のテキストとアイコンの色。レビュー日のテキストと読み込みエラーのテキストに使用されます。
--gmp-mat-color-on-secondary-container
セカンダリ コンテナの色に対するテキストとアイコンの色。ボタンのテキストとアイコンに使用されます。
--gmp-mat-color-on-surface
サーフェス色に対するテキストとアイコンの色。見出しとダイアログ コンテンツに使用されます。
--gmp-mat-color-on-surface-variant
サーフェス色に対して、テキストとアイコンの強調度を低くする色。場所情報に使用されます。
--gmp-mat-color-outline-decorative
インタラクティブ要素以外の要素の枠線の色。コンテナの枠線に使用されます。
--gmp-mat-color-positive
ポジティブな感情を示す UI 要素の色。場所の営業時間の「営業中」ラベルに使用されます。
--gmp-mat-color-primary
サーフェス色に対するインタラクティブなテキストとアイコンの色。リンク、読み込みインジケーター、概要アイコンに使用されます。
--gmp-mat-color-secondary-container
サーフェスに対して目立たない塗りつぶしの色。ボタンの背景に使用されます。
--gmp-mat-color-surface
背景の色。コンテナとダイアログの背景に使用されます。
--gmp-mat-font-body-small
場所情報に使用されます。
--gmp-mat-font-family
すべてのテキストの基本フォント ファミリー。
--gmp-mat-font-headline-medium
ダイアログの見出しに使用されます。
--gmp-mat-font-label-large
ボタンのコンテンツに使用されます。
--gmp-mat-font-title-medium
場所の名前として使用されます。
--gmp-mat-spacing-extra-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-large
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-medium
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-mat-spacing-small
テキストの周囲のマージンやパディングなど、要素内の間隔に使用されます。
--gmp-star-rating-color
星評価の塗りつぶされた星の色。
--gmp-thumbnail-border-radius
場所のサムネイル画像の枠線の半径。
background-color
要素の背景色をオーバーライドします。
border
要素の枠線をオーバーライドします。
border-radius
要素の枠線の半径をオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme のドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font-size
要素内のすべてのテキストとアイコンを拡大縮小します。デフォルトは 16px です。
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 をご覧ください。
gmp-error
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数: 
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。
gmp-select
function(event)
引数: 
このイベントは、リストから場所が選択されたときに呼び出されます。選択した場所の ID、位置、ビューポートを含む Place オブジェクトが含まれます。

PlaceSearchElementOptions インターフェース

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

PlaceSearchElement のオプション。
attributionPosition optional
タイプ:  PlaceSearchAttributionPosition optional
PlaceSearchElement.attributionPosition をご覧ください。
orientation optional
タイプ:  PlaceSearchOrientation optional
PlaceSearchElement.orientation をご覧ください。
selectable optional
タイプ:  boolean optional
PlaceSearchElement.selectableを見る
truncationPreferred optional
タイプ:  boolean optional
PlaceSearchElement.truncationPreferred をご覧ください。

PlaceSearchAttributionPosition 定数

google.maps.places.PlaceSearchAttributionPosition 定数

PlaceSearchElement のアトリビューション ポジション。

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
BOTTOM PlaceSearchElement の下部にある帰属表示
TOP PlaceSearchElement の上部のアトリビューション

PlaceSearchOrientation 定数

google.maps.places.PlaceSearchOrientation 定数

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

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

PlaceSelectEvent クラス

google.maps.places.PlaceSelectEvent クラス

このイベントは、場所のリストから場所が選択されたときに発生します。event.place を使用して選択内容にアクセスします。

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

const {PlaceSelectEvent} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
place
タイプ:  Place
選択した場所。

PlaceNearbySearchRequestElement クラス

google.maps.places.PlaceNearbySearchRequestElement クラス

Nearby Search リクエストに基づいて結果を読み込むように PlaceSearchElement を構成します。検索要素を読み込むには、locationRestriction プロパティが必要です。locationRestriction が設定されていない場合、構成された他のプロパティは無視されます。結果を読み込むには、この要素を PlaceSearchElement の子として追加します。次に例を示します。

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

カスタム要素:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>

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

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

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
パラメータ: 
excludedPrimaryTypes
タイプ:  Array<string> optional
デフォルト: null
除外されたメインの場所タイプ。
HTML 属性:
  • <gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>
excludedTypes
タイプ:  Array<string> optional
デフォルト: null
除外する場所タイプ。
HTML 属性:
  • <gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>
includedPrimaryTypes
タイプ:  Array<string> optional
デフォルト: null
含まれる主な場所のタイプ。
HTML 属性:
  • <gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>
includedTypes
タイプ:  Array<string> optional
デフォルト: null
含める場所のタイプ。
HTML 属性:
  • <gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>
locationRestriction
タイプ:  Circle|CircleLiteral optional
デフォルト: null
検索するリージョン。Circle に正規化します。
HTML 属性:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
タイプ:  number optional
デフォルト: null
返される結果の最大数。
HTML 属性:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
タイプ:  SearchNearbyRankPreference optional
デフォルト: null
レスポンスで結果をランク付けする方法。
HTML 属性:
  • <gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>
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 をご覧ください。

PlaceNearbySearchRequestElementOptions インターフェース

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

PlaceNearbySearchRequestElement のオプション。
excludedPrimaryTypes optional
タイプ:  Array<string> optional
除外する主な場所タイプ。詳しくは、PlaceNearbySearchRequestElement.excludedPrimaryTypes と SearchNearbyRequest.excludedPrimaryTypes をご覧ください。
excludedTypes optional
タイプ:  Array<string> optional
除外する場所タイプ。詳しくは、PlaceNearbySearchRequestElement.excludedTypes と SearchNearbyRequest.excludedTypes をご覧ください。
includedPrimaryTypes optional
タイプ:  Array<string> optional
含まれる主な場所タイプ。詳しくは、PlaceNearbySearchRequestElement.includedPrimaryTypes と SearchNearbyRequest.includedPrimaryTypes をご覧ください。
includedTypes optional
タイプ:  Array<string> optional
含める場所タイプ。詳しくは、PlaceNearbySearchRequestElement.includedTypes と SearchNearbyRequest.includedTypes をご覧ください。
locationRestriction optional
タイプ:  Circle|CircleLiteral optional
検索するリージョン。詳しくは、PlaceNearbySearchRequestElement.locationRestriction と SearchNearbyRequest.locationRestriction をご覧ください。
maxResultCount optional
タイプ:  number optional
ページあたりの結果数の上限です。詳しくは、PlaceNearbySearchRequestElement.maxResultCount と SearchNearbyRequest.maxResultCount をご覧ください。
rankPreference optional
タイプ:  SearchNearbyRankPreference optional
レスポンスで結果をランク付けする方法。詳しくは、PlaceNearbySearchRequestElement.rankPreference と SearchNearbyRankPreference をご覧ください。

PlaceTextSearchRequestElement クラス

google.maps.places.PlaceTextSearchRequestElement クラス

テキスト検索リクエストに基づいて結果を読み込むように PlaceSearchElement を構成します。検索要素を読み込むには、textQuery プロパティが必要です。textQuery が設定されていない場合、構成された他のプロパティは無視されます。結果を読み込むには、この要素を PlaceSearchElement の子として追加します。次に例を示します。

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

カスタム要素:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

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

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

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceTextSearchRequestElement
PlaceTextSearchRequestElement([options])
パラメータ: 
evConnectorTypes
タイプ:  Array<EVConnectorType> optional
デフォルト: null
優先 EV コネクタタイプのリスト。
HTML 属性:
  • <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>
evMinimumChargingRateKw
タイプ:  number optional
デフォルト: null
必要な最小充電速度（kW）。
HTML 属性:
  • <gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>
includedType
タイプ:  string optional
デフォルト: null
リクエストされた場所タイプ。
HTML 属性:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
タイプ:  boolean optional
デフォルト: null
現在営業中の場所に検索を制限するために使用します。
HTML 属性:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
タイプ:  LocationBias optional
デフォルト: null
検索の場所のバイアス。LatLngAltitude | LatLngBounds | Circle | string に正規化します。
HTML 属性:
  • <gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>
locationRestriction
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
デフォルト: null
検索の地域制限。LatLngBounds に正規化します。
HTML 属性:
  • <gmp-place-text-search-request location-restriction="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
maxResultCount
タイプ:  number optional
デフォルト: null
返される結果の最大数。
HTML 属性:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
タイプ:  number optional
デフォルト: null
ユーザーの平均評価がこの上限を厳密に下回る結果を除外します。
HTML 属性:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
タイプ:  Array<PriceLevel> optional
デフォルト: null
特定の価格レベルとしてマークされている場所に検索を制限するために使用されます。
HTML 属性:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
タイプ:  SearchByTextRankPreference optional
デフォルト: null
レスポンスで結果をランク付けする方法。
HTML 属性:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
タイプ:  string optional
デフォルト: null
テキスト検索のテキストクエリ。
HTML 属性:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
タイプ:  boolean optional
デフォルト: null
「includedType」に厳密なタイプ フィルタリングを設定するために使用されます。
HTML 属性:
  • <gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>
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 をご覧ください。

PlaceTextSearchRequestElementOptions インターフェース

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

PlaceTextSearchRequestElement のオプション。
evConnectorTypes optional
タイプ:  Array<EVConnectorType> optional
優先する EV コネクタの種類のリスト。詳しくは、SearchByTextRequest.evSearchOptions と PlaceTextSearchRequestElement.evConnectorTypes をご覧ください。
evMinimumChargingRateKw optional
タイプ:  number optional
必要な最小充電速度（kW）。詳しくは、SearchByTextRequest.evSearchOptions と PlaceTextSearchRequestElement.evMinimumChargingRateKw をご覧ください。
includedType optional
タイプ:  string optional
リクエストされた場所タイプ。詳しくは、SearchByTextRequest.includedType と PlaceTextSearchRequestElement.includedType をご覧ください。
isOpenNow optional
タイプ:  boolean optional
現在営業中の場所に検索を制限するために使用します。詳しくは、SearchByTextRequest.isOpenNow と PlaceTextSearchRequestElement.isOpenNow をご覧ください。
locationBias optional
タイプ:  LocationBias optional
検索の場所のバイアス。詳しくは、SearchByTextRequest.locationBias と PlaceTextSearchRequestElement.locationBias をご覧ください。
locationRestriction optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
検索の地域制限。詳しくは、SearchByTextRequest.locationRestriction と PlaceTextSearchRequestElement.locationRestriction をご覧ください。
maxResultCount optional
タイプ:  number optional
ページあたりの結果数の上限です。詳しくは、SearchByTextRequest.maxResultCount と PlaceTextSearchRequestElement.maxResultCount をご覧ください。
minRating optional
タイプ:  number optional
ユーザーの平均評価がこの上限を厳密に下回る結果を除外します。詳しくは、SearchByTextRequest.minRating と PlaceTextSearchRequestElement.minRating をご覧ください。
priceLevels optional
タイプ:  Array<PriceLevel> optional
特定の価格レベルとしてマークされている場所に検索を制限するために使用されます。詳しくは、SearchByTextRequest.priceLevels と PlaceTextSearchRequestElement.priceLevels をご覧ください。
rankPreference optional
タイプ:  SearchByTextRankPreference optional
レスポンスで結果をランク付けする方法。詳しくは、SearchByTextRequest.rankPreference と PlaceTextSearchRequestElement.rankPreference をご覧ください。
textQuery optional
タイプ:  string optional
テキスト検索のテキストクエリ。詳しくは、SearchByTextRequest.textQuery と PlaceTextSearchRequestElement.textQuery をご覧ください。
useStrictTypeFiltering optional
タイプ:  boolean optional
SearchByTextRequest.includedType の厳密なタイプ フィルタリングを設定するために使用されます。詳しくは、SearchByTextRequest.useStrictTypeFiltering と PlaceTextSearchRequestElement.useStrictTypeFiltering をご覧ください。

Autocomplete クラス

google.maps.places.Autocomplete クラス

ユーザーのテキスト入力に基づいて場所の候補を表示するウィジェット。text タイプの入力要素にアタッチされ、そのフィールドへのテキスト入力をリッスンします。予測のリストはプルダウン リストとして表示され、テキストが入力されるたびに更新されます。

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

const {Autocomplete} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
Autocomplete
Autocomplete(inputField[, opts])
パラメータ: 
指定されたオプションを使用して、指定された入力テキスト フィールドにアタッチする Autocomplete の新しいインスタンスを作成します。
getBounds
getBounds()
パラメータ: なし
戻り値:  LatLngBounds|undefined バイアス境界。
予測がバイアスされる境界を返します。
getFields
getFields()
パラメータ: なし
戻り値:  Array<string>|undefined
詳細が正常に取得された場合に、詳細レスポンスに含める場所のフィールドを返します。フィールドの一覧については、PlaceResult をご覧ください。
getPlace
getPlace()
パラメータ: なし
戻り値:  PlaceResult ユーザーが選択した Place。
詳細が正常に取得された場合、ユーザーが選択した場所の詳細を返します。それ以外の場合は、name プロパティが入力フィールドの現在の値に設定されたスタブ Place オブジェクトを返します。
setBounds
setBounds(bounds)
パラメータ: 
戻り値: なし
Place の検索結果を返す優先エリアを設定します。このエリアが優先されますが、これに限定されません。
setComponentRestrictions
setComponentRestrictions(restrictions)
パラメータ: 
戻り値: なし
コンポーネントの制限を設定します。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。（国など）。
setFields
setFields(fields)
パラメータ: 
  • fields:  Array<string> optional
戻り値: なし
詳細が正常に取得されたときに、詳細レスポンスに含める場所のフィールドを設定します。フィールドの一覧については、PlaceResult をご覧ください。
setOptions
setOptions(options)
パラメータ: 
戻り値: なし
setTypes
setTypes(types)
パラメータ: 
  • types:  Array<string> optional 予測の種類。
戻り値: なし
返される予測のタイプを設定します。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。
継承: addListener、 bindTo、 get、 notify、 set、 setValues、 unbind、 unbindAll
place_changed
function()
引数: なし
このイベントは、ユーザーが選択した場所で PlaceResult が利用可能になったときに呼び出されます。
ユーザーが、コントロールによって提案されていない場所の名前を入力して Enter キーを押した場合、または Place Details リクエストが失敗した場合、PlaceResult には name プロパティにユーザー入力が含まれ、他のプロパティは定義されません。

AutocompleteOptions インターフェース

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

Autocomplete オブジェクトに設定できるオプション。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
場所を検索するエリア。
componentRestrictions optional
タイプ:  ComponentRestrictions optional
コンポーネントの制限。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。（国など）。
fields optional
タイプ:  Array<string> optional
詳細が正常に取得された場合に、詳細レスポンスの Place に含めるフィールド。これらのフィールドは課金対象となります。['ALL'] が渡された場合は、使用可能なフィールドがすべて返され、課金されます（本番環境のデプロイでは推奨されません）。フィールドの一覧については、PlaceResult をご覧ください。ネストされたフィールドは、ドットパス（"geometry.location" など）で指定できます。デフォルトは ['ALL'] です。
placeIdOnly optional
タイプ:  boolean optional
プレイス ID のみを取得するかどうか。place_changed イベントが発生したときに利用可能になる PlaceResult には、プレイス ID、types、name フィールドのみが含まれ、place_id、types、description は Autocomplete サービスによって返されます。デフォルトでは無効にされています。
strictBounds optional
タイプ:  boolean optional
クエリが送信された時点で Autocomplete ウィジェットの境界内にある場所のみが Autocomplete ウィジェットによって返されることを示すブール値です。strictBounds を false（デフォルト）に設定すると、表示する候補のバイアス（優先扱い）の指定となり、指定領域外の場所が除外されるわけではありません。
types optional
タイプ:  Array<string> optional
返される予測のタイプ。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。

google.maps.places.SearchBox クラス

ユーザーのテキスト入力に基づいてクエリの予測を提供するウィジェット。text タイプの入力要素にアタッチされ、そのフィールドへのテキスト入力をリッスンします。予測のリストはプルダウン リストとして表示され、テキストが入力されるたびに更新されます。

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

const {SearchBox} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
SearchBox
SearchBox(inputField[, opts])
パラメータ: 
指定されたオプションを使用して、指定された入力テキスト フィールドにアタッチする SearchBox の新しいインスタンスを作成します。
getBounds
getBounds()
パラメータ: なし
戻り値:  LatLngBounds|undefined
クエリ予測がバイアスされる境界を返します。
getPlaces
getPlaces()
パラメータ: なし
戻り値:  Array<PlaceResult>|undefined
places_changed イベントで使用するためにユーザーが選択したクエリを返します。
setBounds
setBounds(bounds)
パラメータ: 
戻り値: なし
クエリ予測のバイアスに使用するリージョンを設定します。検索結果はこの地域に偏るだけで、完全に制限されるわけではありません。
継承: addListener、 bindTo、 get、 notify、 set、 setValues、 unbind、 unbindAll
places_changed
function()
引数: なし
このイベントは、ユーザーがクエリを選択すると呼び出されます。新しい場所を取得するには、getPlaces を使用する必要があります。

SearchBoxOptions インターフェース

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

SearchBox オブジェクトに設定できるオプション。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
クエリ予測をバイアスする領域。この領域を対象とするクエリが優先されますが、これに限定されません。

PlaceContextualElement クラス

google.maps.places.PlaceContextualElement クラス

コンテキスト トークンを使用して、Google マップによるグラウンディングのレスポンスのコンテキスト ビューを表示するウィジェット。

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

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

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

const {PlaceContextualElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceContextualElement
PlaceContextualElement([options])
パラメータ: 
contextToken
タイプ:  string optional
コンテキスト トークン。
HTML 属性:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
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 のオプション。
contextToken optional
タイプ:  string optional
Google マップによるグラウンディングのレスポンスで提供されるコンテキスト トークン。

PlaceContextualListConfigElement クラス

google.maps.places.PlaceContextualListConfigElement クラス

Place Contextual Element のリスト表示のオプションを構成する 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 のライブラリをご覧ください。
PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
パラメータ: 
layout
タイプ:  PlaceContextualListLayout optional
レイアウト。
HTML 属性:
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
タイプ:  boolean optional
地図が非表示かどうか。
HTML 属性:
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
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 のオプション。
layout optional
タイプ:  PlaceContextualListLayout optional
デフォルト: PlaceContextualListLayout.VERTICAL
レイアウト。
mapHidden optional
タイプ:  boolean optional
デフォルト: false
地図を非表示にする場合は true。

PlaceContextualListLayout 定数

google.maps.places.PlaceContextualListLayout 定数

リスト表示でプレイス コンテキスト要素がサポートするレイアウトのリスト。

const {PlaceContextualListLayout} = await google.maps.importLibrary("places") を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
COMPACT コンパクト リスト レイアウト: リストアイテムは 1 行にリンクとしてレンダリングされ、オーバーフローはプルダウン リストに表示されます。
VERTICAL 縦型リスト レイアウト: リストアイテムが縦型リストのカードとしてレンダリングされます。