Places Widgets

PlaceAutocompleteElement クラス

google.maps.places.PlaceAutocompleteElement クラス

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

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

PlacePrediction.toPlace によって返された PlacePlace.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
プライマリの場所タイプ(「restaurant」、「gas_station」など)が含まれます。

このリストに主要なタイプが含まれている場合にのみ、プレイスが返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべての Place タイプが返されます。
HTML 属性:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
タイプ:  Array<string> optional
指定された地域の結果のみを含めます。最大 15 個の CLDR 2 文字の地域コードで指定します。空のセットは結果を制限しません。locationRestrictionincludedRegionCodes の両方が設定されている場合、結果は交差領域に配置されます。
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>
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>
prediction-item
1 つの予測を表す予測のプルダウンの項目。
prediction-item-icon
予測リスト内の各項目の左に表示されるアイコン。
prediction-item-main-text
予測のメインテキストである prediction-item の一部。地理的位置の場合、ここには、「札幌」のような地名や「北十条 4 丁目」のような所番地が含まれます。デフォルトでは、prediction-item-main-text は黒で表示されます。予測アイテムに追加のテキストがある場合、そのテキストは予測アイテムのメインテキスト以外となり、予測アイテムのスタイルを継承します。デフォルトでは色はグレーになります。この追加のテキストは通常、住所です。
prediction-item-match
返される予測のうち、ユーザーの入力に一致する部分。デフォルトでは、この一致するテキストは太字でハイライト表示されます。一致テキストは prediction-item 内の任意の場所に存在します。prediction-item-main-text の一部であるとは限りません。
prediction-item-selected
ユーザーがキーボードで移動したときの項目。注: 選択した項目は、この部分スタイルと予測アイテムの部分スタイルの両方の影響を受けます。
prediction-list
プレイスの Autocomplete サービスが返す予測のリストを含む視覚要素。このリストは、PlaceAutocompleteElement の下にプルダウン リストとして表示されます。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-error
function(errorEvent)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。
gmp-select
function(placePredictionSelectEvent)
引数: 
このイベントは、ユーザーが場所の候補を選択したときに発生します。Place オブジェクトに変換できる PlacePrediction オブジェクトが含まれます。

PlaceAutocompleteElementOptions インターフェース

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

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

locationBias optional
タイプ:  LocationBias optional
locationRestriction optional
タイプ:  LocationRestriction optional
name optional
タイプ:  string optional
requestedLanguage 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 に変換します。

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 のライブラリをご覧ください。

contextToken
タイプ:  string optional
コンテキスト トークン。
HTML 属性:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceContextualElementOptions インターフェース

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

PlaceContextualElement のオプション。

contextToken optional
タイプ:  string optional
Google マップによるグラウンディングのレスポンスで提供されるコンテキスト トークン。

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 のライブラリをご覧ください。

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

PlaceContextualListConfigElementOptions インターフェース

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

PlaceContextualListConfigElement のオプション。

layout optional
タイプ:  PlaceContextualListLayout optional
レイアウト。デフォルトは、PlaceContextualListLayout.VERTICAL です。
mapHidden optional
タイプ:  boolean optional
地図が非表示かどうか。デフォルトでは地図が表示されます(値は false)。

PlaceContextualListLayout 定数

google.maps.places.PlaceContextualListLayout 定数

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

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

COMPACT コンパクト リスト レイアウト: リスト項目が 1 行のリンクとしてレンダリングされ、オーバーフローはドロップダウン リストに表示されます。
VERTICAL 縦型リスト レイアウト: リストアイテムが縦型リストのカードとしてレンダリングされます。

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 のライブラリをご覧ください。

PlaceDetailsElement
PlaceDetailsElement([options])
パラメータ: 
place
タイプ:  Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
size
タイプ:  PlaceDetailsSize optional
PlaceDetailsElement のサイズ バリエーション。デフォルトでは、要素に PlaceDetailsSize.X_LARGE が表示されます。
HTML 属性:
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
configureFromLocation
configureFromLocation(location)
パラメータ: 
戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。
リバース ジオコーディングを使用して LatLng からウィジェットを構成します。
configureFromPlace
configureFromPlace(place)
パラメータ: 
  • placePlace|{id:string} 詳細を表示する場所。
戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。
Place オブジェクトまたはプレイス ID からウィジェットを構成します。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-load
function(event)
引数: 
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。
gmp-requesterror
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。

PlaceDetailsElementOptions インターフェース

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

PlaceDetailsElement のオプション。

size optional
タイプ:  PlaceDetailsSize optional

PlaceDetailsSize 定数

google.maps.places.PlaceDetailsSize 定数

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

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

LARGE 大きな画像、基本情報、連絡先情報を含む大きなバリエーション。
MEDIUM 大きな画像と基本情報を含む中サイズのバリエーション。
SMALL 小さな画像と基本情報を含む小さなバリエーション。
X_LARGE 写真のコラージュ、レビュー、場所に関する包括的な情報を含む特大バリエーション。

PlaceDetailsCompactElement クラス

google.maps.places.PlaceDetailsCompactElement クラス

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

この要素を使用するには、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 のライブラリをご覧ください。

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-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
サーフェス色に対するインタラクティブなテキストとアイコンの色。アトリビューション ダイアログのレビュー数とリンクに使用されます。
--gmp-mat-color-secondary-container
表面に対して目立たない塗りつぶし色。色調ボタンなどの劣性コンポーネントに使用します。[地図で開く] ボタンの背景に使用されます。
--gmp-mat-color-surface
背景の色。要素とアトリビューション ダイアログの背景に使用されます。
--gmp-mat-font-body-medium
アトリビューション ダイアログの本文テキストに使用されます。
--gmp-mat-font-body-small
場所の住所、評価、タイプ、価格、現在営業中のステータスに使用されます。
--gmp-mat-font-family
すべてのテキストに使用されるベースのフォント ファミリー。
--gmp-mat-font-headline-medium
アトリビューション ダイアログの見出しテキストに使用されます。
--gmp-mat-font-label-large
アトリビューション ダイアログの [地図で開く] ボタンとリンクに使用されます。
--gmp-mat-font-title-small
場所の名前に使用されます。
background-color
要素の背景色をオーバーライドします。
border
要素の境界線をオーバーライドします。
border-radius
要素の枠線の角丸半径をオーバーライドします。
color-scheme
この要素をレンダリングできるカラーパターンを示します。詳しくは、color-scheme ドキュメントをご覧ください。デフォルト値は color-scheme: light dark です。
font-size
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で em 単位で定義されています。デフォルトは 16px です。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-error
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。
gmp-load
function(event)
引数: 
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。

PlaceDetailsCompactElementOptions インターフェース

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

PlaceDetailsCompactElement のオプション。

orientation optional
タイプ:  PlaceDetailsOrientation optional
truncationPreferred optional
タイプ:  boolean optional

PlaceDetailsOrientation 定数

google.maps.places.PlaceDetailsOrientation 定数

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

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

HORIZONTAL 横向き。
VERTICAL 縦向き。

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 のライブラリをご覧ください。

PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
パラメータ: 
place
タイプ:  Place optional
Place Details Compact 要素で詳細を表示する場所オブジェクト、ID、またはリソース名。このプロパティは、リソース名として属性に反映されます。
HTML 属性:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceDetailsPlaceRequestElementOptions インターフェース

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

PlaceDetailsPlaceRequestElement のオプション。

place optional
タイプ:  Place|string optional

PlaceContentConfigElement クラス

google.maps.places.PlaceContentConfigElement クラス

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

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

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

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

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

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

PlaceContentConfigElementOptions インターフェース

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

PlaceContentConfigElement のオプション。

PlaceMediaElement クラス

google.maps.places.PlaceMediaElement クラス

場所の写真などのメディアを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement の子として追加して使用します。

カスタム要素:
<gmp-place-media lightbox-preferred></gmp-place-media>

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

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

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

PlaceMediaElement
PlaceMediaElement([options])
パラメータ: 
lightboxPreferred
タイプ:  boolean optional
デフォルト: false
両方のオプションがサポートされている場合に、メディア ライトボックスを有効にするか無効にするか。
HTML 属性:
  • <gmp-place-media lightbox-preferred></gmp-place-media>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceMediaElementOptions インターフェース

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

PlaceMediaElement のオプション。

lightboxPreferred optional
タイプ:  boolean optional
PlaceMediaElement.lightboxPreferred をご覧ください。

PlaceAddressElement クラス

google.maps.places.PlaceAddressElement クラス

スポットの住所を表示するように Place Details Compact 要素を設定します。この要素を PlaceContentConfigElement の子として追加して使用します。

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

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

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

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

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

PlaceAddressElementOptions インターフェース

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

PlaceAddressElement のオプション。

PlaceRatingElement クラス

google.maps.places.PlaceRatingElement クラス

場所の詳細コンパクト要素を構成して、場所の評価を表示します。この要素を PlaceContentConfigElement の子として追加して使用します。

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

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

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

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

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

PlaceRatingElementOptions インターフェース

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

PlaceRatingElement のオプション。

PlaceTypeElement クラス

google.maps.places.PlaceTypeElement クラス

場所のタイプを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement の子として追加して使用します。

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

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

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

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

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

PlaceTypeElementOptions インターフェース

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

PlaceTypeElement のオプション。

PlacePriceElement クラス

google.maps.places.PlacePriceElement クラス

場所の詳細コンパクト要素を構成して、場所の価格帯または価格範囲を表示します。この要素を PlaceContentConfigElement の子として追加して使用します。

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

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

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

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

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

PlacePriceElementOptions インターフェース

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

PlacePriceElement のオプション。

PlaceAccessibleEntranceIconElement クラス

google.maps.places.PlaceAccessibleEntranceIconElement クラス

場所に入りやすい入り口がある場合に車椅子アイコンを表示するように、Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement の子として追加して使用します。

カスタム要素:
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>

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

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

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

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

PlaceAccessibleEntranceIconElementOptions インターフェース

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

PlaceAccessibleEntranceIconElement のオプション。

PlaceOpenNowStatusElement クラス

google.maps.places.PlaceOpenNowStatusElement クラス

場所の現在の営業中または休業中のステータスを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement の子として追加して使用します。

カスタム要素:
<gmp-place-open-now-status></gmp-place-open-now-status>

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

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

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

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

PlaceOpenNowStatusElementOptions インターフェース

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

PlaceOpenNowStatusElement のオプション。

PlaceAttributionElement クラス

google.maps.places.PlaceAttributionElement クラス

Place Details Compact 要素で Google マップの帰属表示テキストをカスタマイズできます。この要素を PlaceContentConfigElement の子として追加して使用します。この要素を省略した場合でも、帰属表示はデフォルトの色で表示されます。

カスタム要素:
<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>

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

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

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

PlaceAttributionElement
PlaceAttributionElement([options])
パラメータ: 
darkSchemeColor
タイプ:  AttributionColor optional
デフォルト: AttributionColor.WHITE
ダークモードでの Google マップの帰属表示の色。
HTML 属性:
  • <gmp-place-attribution dark-scheme-color="white"></gmp-place-attribution>
  • <gmp-place-attribution dark-scheme-color="black"></gmp-place-attribution>
  • <gmp-place-attribution dark-scheme-color="gray"></gmp-place-attribution>
lightSchemeColor
タイプ:  AttributionColor optional
デフォルト: AttributionColor.GRAY
ライトモードでの Google マップの帰属表示の色。
HTML 属性:
  • <gmp-place-attribution light-scheme-color="white"></gmp-place-attribution>
  • <gmp-place-attribution light-scheme-color="black"></gmp-place-attribution>
  • <gmp-place-attribution light-scheme-color="gray"></gmp-place-attribution>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。

PlaceAttributionElementOptions インターフェース

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

PlaceAttributionElement のオプション。

darkSchemeColor optional
タイプ:  AttributionColor optional
lightSchemeColor optional
タイプ:  AttributionColor optional

AttributionColor 定数

google.maps.places.AttributionColor 定数

Google マップの帰属表示テキストの色オプション。帰属表示は、これらの色のいずれかを使用するようにカスタマイズできます。

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

BLACK 黒色の帰属表示テキスト。
GRAY 帰属表示のテキストは灰色です。
WHITE 白い帰属表示テキスト。

PlaceAllContentElement クラス

google.maps.places.PlaceAllContentElement クラス

利用可能なすべてのコンテンツを表示するように、Place Details Compact 要素を設定します。この要素を PlaceDetailsCompactElement の子として追加して使用します。

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

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

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

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

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

PlaceAllContentElementOptions インターフェース

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

PlaceAllContentElement のオプション。

PlaceStandardContentElement クラス

google.maps.places.PlaceStandardContentElement クラス

標準のコンテンツ セット(メディア、評価、タイプ、価格、バリアフリーの入り口アイコン、現在営業中ステータス)を表示するように、場所の詳細コンパクト要素を構成します。この要素を PlaceDetailsCompactElement の子として追加して使用します。

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

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

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

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

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

PlaceStandardContentElementOptions インターフェース

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

PlaceStandardContentElement のオプション。

PlaceListElement クラス

google.maps.places.PlaceListElement クラス

場所検索の結果をリストで表示する HTML 要素。configureFromSearchByTextRequest() メソッドまたは configureFromSearchNearbyRequest() メソッドを使用して、結果をレンダリングするリクエストを指定します。プレイス リスト要素を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。

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

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

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

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

PlaceListElement
PlaceListElement([options])
パラメータ: 
places
タイプ:  Array<Place>
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクトの配列。
selectable
タイプ:  boolean
リスト項目が選択可能かどうか。true の場合、リストアイテムはクリック時に gmp-placeselect イベントをディスパッチするボタンになります。キーボードによるナビゲーションと選択もサポートされています。
HTML 属性:
  • <gmp-place-list selectable></gmp-place-list>
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • typestring リッスンするイベント タイプを表す大文字と小文字を区別する文字列。
  • listenerEventListener|EventListenerObject 通知を受け取るオブジェクト。これは、handleEvent メソッドを持つ関数またはオブジェクトである必要があります
  • optionsboolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでサポートされるのは capturepassive のみです。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
パラメータ: 
  • requestSearchByTextRequest 結果をレンダリングするリクエスト。SearchByTextRequestfields プロパティは必須ではありません。
戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。
Places Text Search API リクエストの検索結果をレンダリングするようにウィジェットを構成します。
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
パラメータ: 
  • requestSearchNearbyRequest 結果をレンダリングするリクエスト。SearchNearbyRequestfields プロパティは必須ではありません。
戻り値:  Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。
Places Nearby Search API リクエストの検索結果をレンダリングするようにウィジェットを構成します。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
  • typestring イベント リスナーを削除するイベントのタイプを指定する文字列。
  • listenerEventListener|EventListenerObject イベント ターゲットから削除するイベント ハンドラのイベント リスナー。
  • optionsboolean|EventListenerOptions optional オプションをご覧ください。
戻り値:  void
addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-load
function(event)
引数: 
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。
gmp-placeselect
function(event)
引数: 
このイベントは、ユーザーが場所を選択したときに発生します。Place オブジェクトと、リスト内で選択された場所のインデックスが含まれます。
gmp-requesterror
function(event)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。

PlaceListElementOptions インターフェース

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

PlaceListElement のオプション。

selectable optional
タイプ:  boolean optional

PlaceListPlaceSelectEvent クラス

google.maps.places.PlaceListPlaceSelectEvent クラス

このイベントは、ユーザーが場所を選択したときに PlaceListElement によって発行されます。

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

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

index
タイプ:  number
選択した場所のリスト インデックス。
place
タイプ:  Place
選択された場所の ID、場所、ビューポートを含む Place オブジェクト。

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)
パラメータ: 
戻り値: なし
プレイスの結果を返す優先エリアを設定します。このエリアが優先されますが、このエリアに限定されません。
setComponentRestrictions
setComponentRestrictions(restrictions)
パラメータ: 
戻り値: なし
コンポーネントの制限を設定します。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。(国など)。
setFields
setFields(fields)
パラメータ: 
  • fieldsArray<string> optional
戻り値: なし
詳細が正常に取得されたときに、詳細レスポンスで Place に含めるフィールドを設定します。フィールドの一覧については、PlaceResult をご覧ください。
setOptions
setOptions(options)
パラメータ: 
戻り値: なし
setTypes
setTypes(types)
パラメータ: 
  • typesArray<string> optional 含める予測のタイプ。
戻り値: なし
返される予測のタイプを設定します。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。
継承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
place_changed
function()
引数: なし
このイベントは、ユーザーが選択した場所で PlaceResult が利用可能になったときに発生します。
ユーザーがコントロールで提案されなかった場所の名前を入力して Enter キーを押した場合、または Place Details リクエストが失敗した場合、PlaceResultname プロパティにはユーザー入力が含まれ、他のプロパティは定義されません。

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 には、place_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)
パラメータ: 
戻り値: なし
クエリ予測のバイアスに使用するリージョンを設定します。検索結果は、このエリアにバイアスがかかりますが、完全に制限されるわけではありません。
継承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
places_changed
function()
引数: なし
このイベントは、ユーザーがクエリを選択したときに発生します。新しい場所を取得するには、getPlaces を使用する必要があります。

SearchBoxOptions インターフェース

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

SearchBox オブジェクトで設定できるオプション。

bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
クエリ予測のバイアスをかけるエリア。この境界を対象とするクエリが優先されますが、これに限定されません。