Places Widgets

PlaceAutocompleteElement クラス

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
library "places"

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
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-place-autocomplete>
 
const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");
PlaceAutocompleteElement
PlaceAutocompleteElement([options])
パラメータ:
description
attr: description
タイプ: string optional
入力要素に使用する説明。これは、入力要素にフォーカスが当たったときにスクリーン リーダーによって検出されます。詳しくは、https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby をご覧ください。
HTML 属性: description="string"
disabled
attr: disabled
入力タイプ: boolean optional
出力タイプ: boolean
入力要素が無効かどうか。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled をご覧ください。
HTML 属性: disabled
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included
タイプ: boolean optional
まだ営業を開始していないが、今後営業を開始する予定の場所を含めるかどうか。
HTML 属性: future-opening-businesses-included
includedPrimaryTypes
attr: included-primary-types
タイプ: Array<string> optional
含まれるプライマリ Place タイプ（「restaurant」や「gas_station」など）。

場所は、そのメインタイプがこのリストに含まれている場合にのみ返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべてのプレイスタイプが返されます。
HTML 属性: included-primary-types="type1 type2 type3..."
includedRegionCodes
attr: included-region-codes
タイプ: Array<string> optional
指定されたリージョンの結果のみを含めます。最大 15 個の CLDR 2 文字のリージョン コードで指定します。空のセットを指定すると、結果は制限されません。locationRestriction と includedRegionCodes の両方が設定されている場合、結果は交差するエリアに配置されます。
HTML 属性: included-region-codes="c1 c2 c3..."
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
locationBias
タイプ: LocationBias optional
場所を検索するときに使用するソフト境界またはヒント。
locationRestriction
タイプ: LocationRestriction optional
検索結果を制限する境界。
maxlength
attr: maxlength
タイプ: number optional
ユーザーが入力できる最大文字数。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength をご覧ください。
HTML 属性: maxlength="number"
name
attr: 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 属性: name="string"
noClearButton
attr: no-clear-button
入力タイプ: boolean optional
出力タイプ: boolean
消去ボタンを非表示にするかどうか。
HTML 属性: no-clear-button
noInputIcon
attr: no-input-icon
入力タイプ: boolean optional
出力タイプ: boolean
入力アイコンを非表示にするかどうか。
HTML 属性: no-input-icon
origin
attr: origin
入力タイプ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
出力タイプ: LatLngAltitude optional
距離の計算元となる出発地。指定しない場合、距離は計算されません。高度が指定されている場合、計算には使用されません。
HTML 属性:
  • origin="lat,lng"
  • origin="lat,lng,altitude"
placeholder
attr: placeholder
タイプ: string optional
入力要素に使用されるプレースホルダ テキスト。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder をご覧ください。
HTML 属性: placeholder="string"
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included
タイプ: boolean optional
純粋な非店舗型ビジネスの場所を含めるかどうか。
HTML 属性: pure-service-area-businesses-included
readonly
attr: readonly
入力タイプ: boolean optional
出力タイプ: boolean
入力要素が読み取り専用かどうか。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly をご覧ください。
HTML 属性: readonly
requestedLanguage
attr: requested-language
タイプ: string optional
可能であれば、結果を返す言語の言語識別子。選択した言語の結果が上位に表示されることがありますが、候補がこの言語に限定されるわけではありません。サポートされている言語の一覧をご覧ください。
HTML 属性: requested-language="string"
requestedRegion
attr: requested-region
タイプ: string optional
結果のフォーマットとフィルタリングに使用されるリージョン コード。候補がこの国に限定されることはありません。地域コードには、ccTLD（「トップレベル ドメイン」）の 2 文字の値を指定できます。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」（.co.uk）ですが、ISO 3166-1 コードは「gb」です（厳密には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ）。
HTML 属性: requested-region="string"
unitSystem
attr: unit-system
入力タイプ: UnitSystem optional
出力タイプ: UnitSystem optional
距離の表示に使用される単位系。指定しない場合、単位系は requestedRegion によって決定されます。
HTML 属性: unit-system="value-name"
value
入力タイプ: string optional
出力タイプ: string
入力要素の値。
clear-icon
スロット付き要素をクリアアイコンの位置に配置します。入力ボックスにテキストがある場合、入力ボックスの末尾にクリアボタンが表示されます。
input-icon
スロット付き要素を入力アイコンの位置に配置します。入力アイコンは、インライン モードの入力ボックスの先頭に表示されます。
prediction-item-icon
このスロットは、予測アイテムの横に表示されるアイコンとしてレンダリングする <template> 要素を 1 つだけ受け入れます。
focus-ring
フォーカスされた要素（入力または予測アイテム）の周りにフォーカス リングを表示するために使用される要素
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-main-text 内でのみハイライト表示されます。
prediction-item-nonmatch
予測のメインテキストのうち、ユーザーの入力に一致しない部分。
prediction-item-secondary-text
予測のサブテキストである prediction-item の一部。通常、この追加テキストは住所です。
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、 removeEventListener
gmp-error
function(errorEvent)
引数:
  • errorEvent: Event optional
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-select
function(placePredictionSelectEvent)
引数:
このイベントは、ユーザーが場所の候補を選択したときに呼び出されます。Place オブジェクトに変換可能な PlacePrediction オブジェクトが含まれます。

PlaceAutocompleteElementOptions インターフェース

インターフェース google.maps.places.PlaceAutocompleteElementOptions
PlaceAutocompleteElement によって実装

PlaceAutocompleteElement を作成するためのオプション。各プロパティの説明については、PlaceAutocompleteElement クラスの同じ名前のプロパティをご覧ください。
description
省略可
タイプ: string optional
入力要素に使用する説明。これは、入力要素にフォーカスが当たったときにスクリーン リーダーによって検出されます。
disabled
省略可
タイプ: boolean optional
futureOpeningBusinessesIncluded
省略可
タイプ: boolean optional
includedPrimaryTypes
省略可
タイプ: Array<string> optional
includedRegionCodes
省略可
タイプ: Array<string> optional
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
locationBias
省略可
タイプ: LocationBias optional
locationRestriction
省略可
タイプ: LocationRestriction optional
maxlength
省略可
タイプ: number optional
name
省略可
タイプ: string optional
noClearButton
省略可
タイプ: boolean optional
noInputIcon
省略可
タイプ: boolean optional
origin
省略可
placeholder
省略可
タイプ: string optional
pureServiceAreaBusinessesIncluded
省略可
タイプ: boolean optional
readonly
省略可
タイプ: boolean optional
requestedLanguage
省略可
タイプ: string optional
requestedRegion
省略可
タイプ: string optional
unitSystem
省略可
タイプ: UnitSystem optional
value
省略可
タイプ: string optional
入力要素の値。

PlacePredictionSelectEvent クラス

class google.maps.places.PlacePredictionSelectEvent extends Event
library "places"

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

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

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");
placePrediction
readonly
タイプ: PlacePrediction
PlacePrediction.toPlace を呼び出して、これを Place に変換します。

BasicPlaceAutocompleteElement クラス

class google.maps.places.BasicPlaceAutocompleteElement extends HTMLElement implements BasicPlaceAutocompleteElementOptions
library "places"

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

<gmp-basic-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-basic-place-autocomplete>
 
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");
BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement([options])
パラメータ:
description
attr: description
タイプ: string optional
入力要素に使用する説明。これは、入力要素にフォーカスが当たったときにスクリーン リーダーによって検出されます。詳しくは、https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby をご覧ください。
HTML 属性: description="string"
disabled
attr: disabled
入力タイプ: boolean optional
出力タイプ: boolean
入力要素が無効かどうか。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled をご覧ください。
HTML 属性: disabled
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included
タイプ: boolean optional
まだ営業を開始していないが、今後営業を開始する予定の場所を含めるかどうか。
HTML 属性: future-opening-businesses-included
includedPrimaryTypes
attr: included-primary-types
タイプ: Array<string> optional
含まれるプライマリ Place タイプ（「restaurant」や「gas_station」など）。

場所は、そのメインタイプがこのリストに含まれている場合にのみ返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべてのプレイスタイプが返されます。
HTML 属性: included-primary-types="type1 type2 type3..."
includedRegionCodes
attr: included-region-codes
タイプ: Array<string> optional
指定されたリージョンの結果のみを含めます。最大 15 個の CLDR 2 文字のリージョン コードで指定します。空のセットを指定すると、結果は制限されません。locationRestriction と includedRegionCodes の両方が設定されている場合、結果は交差するエリアに配置されます。
HTML 属性: included-region-codes="c1 c2 c3..."
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
locationBias
タイプ: LocationBias optional
場所を検索するときに使用するソフト境界またはヒント。
locationRestriction
タイプ: LocationRestriction optional
検索結果を制限する境界。
maxlength
attr: maxlength
タイプ: number optional
ユーザーが入力できる最大文字数。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength をご覧ください。
HTML 属性: maxlength="number"
name
attr: 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 属性: name="string"
noClearButton
attr: no-clear-button
入力タイプ: boolean optional
出力タイプ: boolean
消去ボタンを非表示にするかどうか。
HTML 属性: no-clear-button
noInputIcon
attr: no-input-icon
入力タイプ: boolean optional
出力タイプ: boolean
入力アイコンを非表示にするかどうか。
HTML 属性: no-input-icon
origin
attr: origin
入力タイプ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
出力タイプ: LatLngAltitude optional
距離の計算元となる出発地。指定しない場合、距離は計算されません。高度が指定されている場合、計算には使用されません。
HTML 属性:
  • origin="lat,lng"
  • origin="lat,lng,altitude"
placeholder
attr: placeholder
タイプ: string optional
入力要素に使用されるプレースホルダ テキスト。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder をご覧ください。
HTML 属性: placeholder="string"
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included
タイプ: boolean optional
純粋な非店舗型ビジネスの場所を含めるかどうか。
HTML 属性: pure-service-area-businesses-included
readonly
attr: readonly
入力タイプ: boolean optional
出力タイプ: boolean
入力要素が読み取り専用かどうか。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly をご覧ください。
HTML 属性: readonly
requestedLanguage
attr: requested-language
タイプ: string optional
可能であれば、結果を返す言語の言語識別子。選択した言語の結果が上位に表示されることがありますが、候補がこの言語に限定されるわけではありません。サポートされている言語の一覧をご覧ください。
HTML 属性: requested-language="string"
requestedRegion
attr: requested-region
タイプ: string optional
結果のフォーマットとフィルタリングに使用されるリージョン コード。候補がこの国に限定されることはありません。地域コードには、ccTLD（「トップレベル ドメイン」）の 2 文字の値を指定できます。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」（.co.uk）ですが、ISO 3166-1 コードは「gb」です（厳密には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ）。
HTML 属性: requested-region="string"
unitSystem
attr: unit-system
入力タイプ: UnitSystem optional
出力タイプ: UnitSystem optional
距離の表示に使用される単位系。指定しない場合、単位系は requestedRegion によって決定されます。
HTML 属性: unit-system="value-name"
clear-icon
スロット付き要素をクリアアイコンの位置に配置します。入力ボックスにテキストがある場合、入力ボックスの末尾にクリアボタンが表示されます。
input-icon
スロット付き要素を入力アイコンの位置に配置します。入力アイコンは、インライン モードの入力ボックスの先頭に表示されます。
prediction-item-icon
このスロットは、予測アイテムの横に表示されるアイコンとしてレンダリングする <template> 要素を 1 つだけ受け入れます。
focus-ring
フォーカスされた要素（入力または予測アイテム）の周りにフォーカス リングを表示するために使用される要素
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-main-text 内でのみハイライト表示されます。
prediction-item-nonmatch
予測のメインテキストのうち、ユーザーの入力に一致しない部分。
prediction-item-secondary-text
予測のサブテキストである prediction-item の一部。通常、この追加テキストは住所です。
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、 removeEventListener
gmp-error
function(errorEvent)
引数:
  • errorEvent: Event optional
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-select
function(placeSelectEvent)
引数:
このイベントは、ユーザーが場所の候補を選択したときに呼び出されます。Place オブジェクトが含まれます。

BasicPlaceAutocompleteElementOptions インターフェース

インターフェース google.maps.places.BasicPlaceAutocompleteElementOptions
BasicPlaceAutocompleteElement によって実装

BasicPlaceAutocompleteElement を作成するためのオプション。
description
省略可
タイプ: string optional
入力要素に使用する説明。これは、入力要素にフォーカスが当たったときにスクリーン リーダーによって検出されます。
disabled
省略可
タイプ: boolean optional
futureOpeningBusinessesIncluded
省略可
タイプ: boolean optional
includedPrimaryTypes
省略可
タイプ: Array<string> optional
includedRegionCodes
省略可
タイプ: Array<string> optional
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
locationBias
省略可
タイプ: LocationBias optional
locationRestriction
省略可
タイプ: LocationRestriction optional
maxlength
省略可
タイプ: number optional
name
省略可
タイプ: string optional
noClearButton
省略可
タイプ: boolean optional
noInputIcon
省略可
タイプ: boolean optional
origin
省略可
placeholder
省略可
タイプ: string optional
pureServiceAreaBusinessesIncluded
省略可
タイプ: boolean optional
readonly
省略可
タイプ: boolean optional
requestedLanguage
省略可
タイプ: string optional
requestedRegion
省略可
タイプ: string optional
unitSystem
省略可
タイプ: UnitSystem optional

PlaceDetailsElement クラス

class google.maps.places.PlaceDetailsElement extends HTMLElement implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"

場所の詳細をフル レイアウトで表示します。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
  internal-usage-attribution-ids="space separated strings">
</gmp-place-details>
 
const {PlaceDetailsElement} = await google.maps.importLibrary("places");
PlaceDetailsElement
PlaceDetailsElement([options])
パラメータ:
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
place
readonly
タイプ: 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、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。

PlaceDetailsElementOptions インターフェース

インターフェース google.maps.places.PlaceDetailsElementOptions
AdvancedPlaceDetailsElementOptions によって拡張
AdvancedPlaceDetailsElement, PlaceDetailsElement によって実装

PlaceDetailsElement のオプション。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。

PlaceDetailsCompactElement クラス

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"

場所の詳細をコンパクトなレイアウトで表示します。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
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  truncation-preferred>
</gmp-place-details-compact>
 
const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");
PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
パラメータ:
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
orientation
attr: orientation
タイプ: PlaceDetailsOrientation optional
デフォルト: PlaceDetailsOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性: orientation="value-name"
place
readonly
タイプ: Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
truncationPreferred
attr: truncation-preferred
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
true の場合、場所の名前と住所を折り返さずに、1 行に収まるように切り詰めます。
HTML 属性: truncation-preferred
--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、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。

PlaceDetailsCompactElementOptions インターフェース

インターフェース google.maps.places.PlaceDetailsCompactElementOptions
AdvancedPlaceDetailsCompactElementOptions によって拡張
AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement によって実装

PlaceDetailsCompactElement のオプション。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
orientation
省略可
タイプ: PlaceDetailsOrientation optional
PlaceDetailsCompactElement.orientation をご覧ください。
truncationPreferred
省略可
タイプ: boolean optional
PlaceDetailsCompactElement.truncationPreferred をご覧ください。

AdvancedPlaceDetailsElement クラス

class google.maps.places.AdvancedPlaceDetailsElement extends PlaceDetailsElement, HTMLElement implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"

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

例: 

 <gmp-advanced-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-standard-content>
   </gmp-place-standard-content>
 </gmp-advanced-place-details>

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

<gmp-advanced-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details>
 
const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");
AdvancedPlaceDetailsElement
AdvancedPlaceDetailsElement([options])
パラメータ:
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
place
readonly
タイプ: Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
action-corner
PlaceLinkElement と PlaceButtonElement のスロット。
action-main
PlaceLinkElement と PlaceButtonElement のスロット。
Alphabasic-section-bottom
基本情報セクションの下部、メイン操作ボタンのすぐ下にレンダリングされるカスタム HTML コンテンツ用のスロット。
Alphabasic-section-top
基本情報セクションの、場所の名前のすぐ上にレンダリングされるカスタム HTML コンテンツ用のスロット。
継承: --gmp-button-border-color、 --gmp-button-border-radius、 --gmp-button-border-width、 --gmp-collage-border-radius-outer、 --gmp-dialog-border-radius、 --gmp-mat-color-disabled-surface、 --gmp-mat-color-info、 --gmp-mat-color-negative、 --gmp-mat-color-neutral-container、 --gmp-mat-color-on-neutral-container、 --gmp-mat-color-on-positive-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、 --gmp-mat-color-positive-container、 --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-display-small、 --gmp-mat-font-family、 --gmp-mat-font-headline-medium、 --gmp-mat-font-label-large、 --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、 font-size
継承元: addEventListener、 removeEventListener
継承元: gmp-error、 gmp-load

AdvancedPlaceDetailsElementOptions インターフェース

インターフェース google.maps.places.AdvancedPlaceDetailsElementOptions PlaceDetailsElementOptions を拡張
AdvancedPlaceDetailsElement によって実装

AdvancedPlaceDetailsElement のオプション。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。

AdvancedPlaceDetailsCompactElement クラス

class google.maps.places.AdvancedPlaceDetailsCompactElement extends PlaceDetailsCompactElement, HTMLElement implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"

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

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

<gmp-advanced-place-details-compact
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details-compact>
 
const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");
AdvancedPlaceDetailsCompactElement
AdvancedPlaceDetailsCompactElement([options])
パラメータ:
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
place
readonly
タイプ: Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。
継承: orientation（attr: orientation）、 truncationPreferred（attr: truncation-preferred）
action-corner
PlaceLinkElement と PlaceButtonElement のスロット。
action-main
PlaceLinkElement と PlaceButtonElement のスロット。
Alphabasic-section-bottom
基本情報セクションの下部、メイン操作ボタンのすぐ下にレンダリングされるカスタム HTML コンテンツ用のスロット。
Alphabasic-section-top
基本情報セクションの、場所の名前のすぐ上にレンダリングされるカスタム HTML コンテンツ用のスロット。
継承: --gmp-button-border-color、 --gmp-button-border-radius、 --gmp-button-border-width、 --gmp-dialog-border-radius、 --gmp-mat-color-info、 --gmp-mat-color-negative、 --gmp-mat-color-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、 --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-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、 font-size
継承元: addEventListener、 removeEventListener
継承元: gmp-error、 gmp-load

AdvancedPlaceDetailsCompactElementOptions インターフェース

インターフェース google.maps.places.AdvancedPlaceDetailsCompactElementOptions PlaceDetailsCompactElementOptions を拡張
AdvancedPlaceDetailsCompactElement によって実装

AdvancedPlaceDetailsCompactElement のオプション。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
継承元: orientation、 truncationPreferred

PlaceDetailsOrientation 定数

定数 google.maps.places.PlaceDetailsOrientation
ライブラリ "places"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは PlaceDetailsOrientationString 型で定義されます。

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");
HORIZONTAL 横向き。
VERTICAL 縦向き。

PlaceDetailsPlaceRequestElement クラス

class google.maps.places.PlaceDetailsPlaceRequestElement extends HTMLElement implements PlaceDetailsPlaceRequestElementOptions
library "places"

プレイス オブジェクト、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="places/###">
</gmp-place-details-place-request>
 
const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");
PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
パラメータ:
place
attr: place
入力タイプ: Place|string optional
出力タイプ: Place optional
デフォルト: null
Place Details Compact 要素に詳細を表示するプレイス オブジェクト、ID、またはリソース名。このプロパティは、リソース名として属性に反映されます。
HTML 属性: place="places/###"
継承元: addEventListener、 removeEventListener

PlaceDetailsPlaceRequestElementOptions インターフェース

インターフェース google.maps.places.PlaceDetailsPlaceRequestElementOptions
PlaceDetailsPlaceRequestElement によって実装

PlaceDetailsPlaceRequestElement のオプション。
place
省略可
タイプ: Place|string optional
PlaceDetailsPlaceRequestElement.placeを見る

PlaceDetailsLocationRequestElement クラス

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
library "places"

ロケーションに基づいてデータを読み込むように 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>
 
const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");
PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
パラメータ:
location
attr: location
入力タイプ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
出力タイプ: LatLngAltitude optional
デフォルト: null
Place Details 要素に詳細を表示する場所。LatLngAltitude に正規化します。
HTML 属性: location="lat,lng"
継承元: addEventListener、 removeEventListener

PlaceDetailsLocationRequestElementOptions インターフェース

インターフェース google.maps.places.PlaceDetailsLocationRequestElementOptions
PlaceDetailsLocationRequestElement によって実装

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

PlaceSearchElement クラス

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"

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="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-place-search>
 
const {PlaceSearchElement} = await google.maps.importLibrary("places");
PlaceSearchElement
PlaceSearchElement([options])
パラメータ:
attributionPosition
attr: attribution-position
入力タイプ: PlaceSearchAttributionPosition optional
出力タイプ: PlaceSearchAttributionPosition
デフォルト: PlaceSearchAttributionPosition.TOP
帰属表示ロゴと法的開示ボタンの位置。
HTML 属性: attribution-position="value-name"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
orientation
attr: orientation
入力タイプ: PlaceSearchOrientation optional
出力タイプ: PlaceSearchOrientation
デフォルト: PlaceSearchOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性: orientation="value-name"
places
readonly
タイプ: Array<Place>
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクトの配列。
selectable
attr: selectable
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
リストアイテムを選択可能にするかどうか。true の場合、リストアイテムは、クリックされると gmp-select イベントをディスパッチするボタンになります。キーボードによる操作と選択もサポートされています。
HTML 属性: selectable
truncationPreferred
attr: truncation-preferred
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
true の場合、特定のコンテンツ行を折り返さずに 1 行に収まるように切り詰めます。
HTML 属性: truncation-preferred
--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、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。
gmp-select
function(event)
引数:
このイベントは、リストから場所が選択されたときに呼び出されます。選択した場所の ID、位置、ビューポートを含む Place オブジェクトが含まれます。

PlaceSearchElementOptions インターフェース

インターフェース google.maps.places.PlaceSearchElementOptions
AdvancedPlaceSearchElementOptions によって拡張
AdvancedPlaceSearchElement, PlaceSearchElement によって実装

PlaceSearchElement のオプション。
attributionPosition
省略可
タイプ: PlaceSearchAttributionPosition optional
PlaceSearchElement.attributionPosition をご覧ください。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
orientation
省略可
タイプ: PlaceSearchOrientation optional
PlaceSearchElement.orientation をご覧ください。
selectable
省略可
タイプ: boolean optional
PlaceSearchElement.selectableを見る
truncationPreferred
省略可
タイプ: boolean optional
PlaceSearchElement.truncationPreferred をご覧ください。

PlaceItemElement クラス

class google.maps.places.PlaceItemElement extends HTMLElement implements PlaceItemElementOptions
extended by AdvancedPlaceItemElement
library "places"

場所リストアイテムの公開ウェブ コンポーネント ラッパー（<gmp-place-item>）。<gmp-place-item> カスタム要素は、<gmp-place-search> 内に個々の場所の結果カードをレンダリングします。各 <gmp-place-item> には、Places UI キットの子ビジュアル コンポーネントで構成された場所情報が表示されます。

<gmp-place-item></gmp-place-item>
 
const {PlaceItemElement} = await google.maps.importLibrary("places");
継承元: addEventListener、 removeEventListener

PlaceItemElementOptions インターフェース

インターフェース google.maps.places.PlaceItemElementOptions
AdvancedPlaceItemElementOptions によって拡張
AdvancedPlaceItemElement, PlaceItemElement によって実装

PlaceItemElement のオプション。

AdvancedPlaceSearchElement クラス

class google.maps.places.AdvancedPlaceSearchElement extends PlaceSearchElement, HTMLElement implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"

高度な Place Search の結果をリストに表示します。PlaceTextSearchRequestElement または PlaceNearbySearchRequestElement を追加して、結果をレンダリングするリクエストを指定します。PlaceStandardContentElement、PlaceAllContentElement、<template slot="details-item"> のいずれかを追加して、レンダリングするコンテンツを指定します。

例: 

 <gmp-advanced-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-search>

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

<gmp-advanced-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-advanced-place-search>
 
const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");
AdvancedPlaceSearchElement
AdvancedPlaceSearchElement([options])
パラメータ:
attributionPosition
attr: attribution-position
入力タイプ: PlaceSearchAttributionPosition optional
出力タイプ: PlaceSearchAttributionPosition
デフォルト: PlaceSearchAttributionPosition.TOP
帰属表示ロゴと法的開示ボタンの位置。
HTML 属性: attribution-position="value-name"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
orientation
attr: orientation
入力タイプ: PlaceSearchOrientation optional
出力タイプ: PlaceSearchOrientation
デフォルト: PlaceSearchOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性: orientation="value-name"
selectable
attr: selectable
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
リストアイテムを選択可能にするかどうか。true の場合、リストアイテムは、クリックされると gmp-select イベントをディスパッチするボタンになります。キーボードによる操作と選択もサポートされています。
HTML 属性: selectable
truncationPreferred
attr: truncation-preferred
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
true の場合、特定のコンテンツ行を折り返さずに 1 行に収まるように切り詰めます。
HTML 属性: truncation-preferred
継承: places
details-item
検索結果の各場所に対してレンダリングする Place Widgets を含む HTML テンプレート。
--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、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。
gmp-select
function(event)
引数:
このイベントは、リストから場所が選択されたときに呼び出されます。選択した場所の ID、位置、ビューポートを含む Place オブジェクトが含まれます。

AdvancedPlaceSearchElementOptions インターフェース

インターフェース google.maps.places.AdvancedPlaceSearchElementOptions PlaceSearchElementOptions を拡張
AdvancedPlaceSearchElement によって実装

AdvancedPlaceSearchElement のオプション。
attributionPosition
省略可
タイプ: PlaceSearchAttributionPosition optional
PlaceSearchElement.attributionPosition をご覧ください。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
orientation
省略可
タイプ: PlaceSearchOrientation optional
PlaceSearchElement.orientation をご覧ください。
selectable
省略可
タイプ: boolean optional
PlaceSearchElement.selectableを見る
truncationPreferred
省略可
タイプ: boolean optional
PlaceSearchElement.truncationPreferred をご覧ください。

AdvancedPlaceListElement クラス

class google.maps.places.AdvancedPlaceListElement extends HTMLElement implements AdvancedPlaceListElementOptions
library "places"

Place Search の結果をリストに表示します。1 つ以上の PlaceDetailsPlaceRequestElement を追加するか、places プロパティを設定して、表示する場所を指定します。PlaceStandardContentElement または PlaceAllContentElement を追加して、レンダリングするコンテンツを指定します。

例: 

 <gmp-advanced-place-list>
   <gmp-place-details-place-request
     place="PLACE_ID"
   </gmp-place-details-place-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-list>

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

<gmp-advanced-place-list
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  places="space separated strings"
  selectable
  truncation-preferred>
</gmp-advanced-place-list>
 
const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");
AdvancedPlaceListElement
AdvancedPlaceListElement([options])
パラメータ:
attributionPosition
attr: attribution-position
入力タイプ: PlaceSearchAttributionPosition optional
出力タイプ: PlaceSearchAttributionPosition
デフォルト: PlaceSearchAttributionPosition.TOP
帰属表示ロゴと法的開示ボタンの位置。
HTML 属性: attribution-position="value-name"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
入力タイプ: Iterable<string> optional
出力タイプ: Array<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
HTML 属性: internal-usage-attribution-ids="space separated strings"
orientation
attr: orientation
入力タイプ: PlaceSearchOrientation optional
出力タイプ: PlaceSearchOrientation
デフォルト: PlaceSearchOrientation.VERTICAL
要素の向きのバリエーション（縦向きまたは横向き）。
HTML 属性: orientation="value-name"
places
attr: places
入力タイプ: Iterable<Place|string> optional
出力タイプ: Array<Place>
この要素に表示する ID を含む Place オブジェクトのリスト。places プロパティに設定されたすべてのプレイスが、レンダリングできない場合（無効な ID、ネットワーク リクエスト エラーなど）は表示されないことがあります。places プロパティを読み取ると、現在表示されている場所を取得できます。
HTML 属性: places="space separated strings"
selectable
attr: selectable
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
リストアイテムを選択可能にするかどうか。true の場合、リストアイテムは、クリックされると gmp-select イベントをディスパッチするボタンになります。キーボードによる操作と選択もサポートされています。
HTML 属性: selectable
truncationPreferred
attr: truncation-preferred
入力タイプ: boolean optional
出力タイプ: boolean
デフォルト: false
true の場合、特定のコンテンツ行を折り返さずに 1 行に収まるように切り詰めます。
HTML 属性: truncation-preferred
details-item
リスト内の各場所をレンダリングするために使用する gmp-place ウィジェットを含む HTML テンプレート。
--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、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくない場合など）。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、要素がコンテンツを読み込んでレンダリングするときに発生します。このイベントはバブルしません。
gmp-select
function(event)
引数:
このイベントは、リストから場所が選択されたときに呼び出されます。選択した場所の ID、位置、ビューポートを含む Place オブジェクトが含まれます。

AdvancedPlaceListElementOptions インターフェース

インターフェース google.maps.places.AdvancedPlaceListElementOptions
AdvancedPlaceListElement によって実装

AdvancedPlaceListElement のオプション。
attributionPosition
省略可
タイプ: PlaceSearchAttributionPosition optional
PlaceSearchElement.attributionPosition をご覧ください。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリへの呼び出しを関連付けるために使用される識別子。
orientation
省略可
タイプ: PlaceSearchOrientation optional
PlaceSearchElement.orientation をご覧ください。
places
省略可
タイプ: Iterable<Place|string> optional
AdvancedPlaceListElement.places をご覧ください。
selectable
省略可
タイプ: boolean optional
PlaceSearchElement.selectableを見る
truncationPreferred
省略可
タイプ: boolean optional
PlaceSearchElement.truncationPreferred をご覧ください。

AdvancedPlaceItemElement クラス

class google.maps.places.AdvancedPlaceItemElement extends PlaceItemElement, HTMLElement implements AdvancedPlaceItemElementOptions, PlaceItemElementOptions
library "places"

高度な場所リストアイテムの公開ウェブ コンポーネント ラッパー（<gmp-advanced-place-item>）。<gmp-advanced-place-item> カスタム要素は、<gmp-advanced-place-search> や <gmp-advanced-place-list> などの検索オプションまたはコレクション コンテナ内に、個々のリッチな場所検索結果カードをレンダリングします。各 <gmp-advanced-place-item> には、Places UI キットの子ビジュアル コンポーネントで構成された、豊富な Place Details、メディア コラージュ、編集要約、インタラクティブな操作ボタンが表示されます。

<gmp-advanced-place-item></gmp-advanced-place-item>
 
const {AdvancedPlaceItemElement} = await google.maps.importLibrary("places");
Alphabasic-section-bottom
基本情報セクションの下部、メイン操作ボタンのすぐ下にレンダリングされるカスタム HTML コンテンツ用のスロット。
Alphabasic-section-top
基本情報セクションの、場所の名前のすぐ上にレンダリングされるカスタム HTML コンテンツ用のスロット。
継承元: addEventListener、 removeEventListener

AdvancedPlaceItemElementOptions インターフェース

インターフェース google.maps.places.AdvancedPlaceItemElementOptions PlaceItemElementOptions を拡張
AdvancedPlaceItemElement によって実装

AdvancedPlaceItemElement のオプション。

PlaceSearchAttributionPosition 定数

定数 google.maps.places.PlaceSearchAttributionPosition
ライブラリ "places"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは PlaceSearchAttributionPositionString 型で定義されます。

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");
BOTTOM PlaceSearchElement の下部にある帰属表示
TOP PlaceSearchElement の上部のアトリビューション

PlaceSearchOrientation 定数

定数 google.maps.places.PlaceSearchOrientation
ライブラリ "places"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは PlaceSearchOrientationString 型で定義されます。

const {PlaceSearchOrientation} = await google.maps.importLibrary("places");
HORIZONTAL 横向き。
VERTICAL 縦向き。

PlaceSelectEvent クラス

class google.maps.places.PlaceSelectEvent extends Event
library "places"

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

const {PlaceSelectEvent} = await google.maps.importLibrary("places");
place
readonly
タイプ: Place
選択した場所。

PlaceNearbySearchRequestElement クラス

class google.maps.places.PlaceNearbySearchRequestElement extends HTMLElement implements PlaceNearbySearchRequestElementOptions
library "places"

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="value-name">
</gmp-place-nearby-search-request>
 
const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");
PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
パラメータ:
excludedPrimaryTypes
attr: excluded-primary-types
入力タイプ: Array<string> optional
出力タイプ: Array<string> optional
デフォルト: null
除外されたメインの場所タイプ。
HTML 属性: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
excludedTypes
attr: excluded-types
入力タイプ: Array<string> optional
出力タイプ: Array<string> optional
デフォルト: null
除外する場所タイプ。
HTML 属性: excluded-types="excluded-type1 excluded-type2..."
futureOpeningBusinessesIncluded
入力タイプ: boolean optional
出力タイプ: boolean optional
まだ開業していないが、将来開業する予定のビジネスの場所の予測を含めます。
includedPrimaryTypes
attr: included-primary-types
入力タイプ: Array<string> optional
出力タイプ: Array<string> optional
デフォルト: null
含まれる主な場所のタイプ。
HTML 属性: included-primary-types="included-primary-type1 included-primary-type2..."
includedTypes
attr: included-types
入力タイプ: Array<string> optional
出力タイプ: Array<string> optional
デフォルト: null
含める場所のタイプ。
HTML 属性: included-types="included-type1 included-type2..."
locationRestriction
attr: location-restriction
入力タイプ: Circle|CircleLiteral optional
出力タイプ: Circle optional
デフォルト: null
検索するリージョン。Circle に正規化します。
HTML 属性: location-restriction="radius@lat,lng"
maxResultCount
attr: max-result-count
入力タイプ: number optional
出力タイプ: number optional
デフォルト: null
返される結果の最大数。
HTML 属性: max-result-count="number"
rankPreference
attr: rank-preference
入力タイプ: SearchNearbyRankPreference optional
出力タイプ: SearchNearbyRankPreference optional
デフォルト: null
レスポンスで結果をランク付けする方法。
HTML 属性: rank-preference="value-name"
継承元: addEventListener、 removeEventListener

PlaceNearbySearchRequestElementOptions インターフェース

インターフェース google.maps.places.PlaceNearbySearchRequestElementOptions
PlaceNearbySearchRequestElement によって実装

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

PlaceTextSearchRequestElement クラス

class google.maps.places.PlaceTextSearchRequestElement extends HTMLElement implements PlaceTextSearchRequestElementOptions
library "places"

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

PlaceTextSearchRequestElementOptions インターフェース

インターフェース google.maps.places.PlaceTextSearchRequestElementOptions
PlaceTextSearchRequestElement によって実装

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

Autocomplete クラス

class google.maps.places.Autocomplete extends MVCObject
library "places"

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

const {Autocomplete} = await google.maps.importLibrary("places");
Autocomplete
Autocomplete(inputField[, opts])
パラメータ:
指定されたオプションを使用して、指定された入力テキスト フィールドにアタッチする Autocomplete の新しいインスタンスを作成します。
getBounds
getBounds()
パラメータ: なし
戻り値: LatLngBounds|undefined バイアス境界。
予測がバイアスされる境界を返します。
getFields
getFields()
パラメータ: なし
戻り値: Array<string>|undefined
詳細が正常に取得された場合に、詳細レスポンスに含める場所のフィールドを返します。フィールドの一覧については、PlaceResult をご覧ください。
getPlace
getPlace()
パラメータ: なし
戻り値: PlaceResult ユーザーが選択した場所。
詳細が正常に取得された場合、ユーザーが選択した場所の詳細を返します。それ以外の場合は、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
省略可
タイプ: LatLngBounds|LatLngBoundsLiteral optional
場所を検索するエリア。
componentRestrictions
省略可
タイプ: ComponentRestrictions optional
コンポーネントの制限。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。（国など）。
fields
省略可
タイプ: Array<string> optional
詳細が正常に取得された場合に、詳細レスポンスの Place に含めるフィールド。これらのフィールドは課金対象となります。['ALL'] が渡された場合は、使用可能なフィールドがすべて返され、課金されます（本番環境のデプロイでは推奨されません）。フィールドの一覧については、PlaceResult をご覧ください。ネストされたフィールドは、ドットパス（"geometry.location" など）で指定できます。デフォルトは ['ALL'] です。
placeIdOnly
省略可
タイプ: boolean optional
プレイス ID のみを取得するかどうか。place_changed イベントが発生したときに利用可能になる PlaceResult には、プレイス ID、types、name フィールドのみが含まれ、place_id、types、description は Autocomplete サービスによって返されます。デフォルトでは無効にされています。
strictBounds
省略可
タイプ: boolean optional
クエリが送信された時点で Autocomplete ウィジェットの境界内にある場所のみが Autocomplete ウィジェットによって返されることを示すブール値です。strictBounds を false（デフォルト）に設定すると、表示する候補のバイアス（優先扱い）の指定となり、指定領域外の場所が除外されるわけではありません。
types
省略可
タイプ: Array<string> optional
返される予測のタイプ。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。

class google.maps.places.SearchBox extends MVCObject
library "places"

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

const {SearchBox} = await google.maps.importLibrary("places");
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
省略可
タイプ: LatLngBounds|LatLngBoundsLiteral optional
クエリ予測をバイアスする領域。この領域を対象とするクエリが優先されますが、これに限定されません。

PlaceContextualElement クラス

class google.maps.places.PlaceContextualElement extends HTMLElement implements PlaceContextualElementOptions
library "places"

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

<gmp-place-contextual
  context-token="string">
</gmp-place-contextual>
 
const {PlaceContextualElement} = await google.maps.importLibrary("places");
PlaceContextualElement
PlaceContextualElement([options])
パラメータ:
contextToken
attr: context-token
入力タイプ: string optional
出力タイプ: string optional
コンテキスト トークン。
HTML 属性: context-token="string"
継承元: addEventListener、 removeEventListener

PlaceContextualElementOptions インターフェース

インターフェース google.maps.places.PlaceContextualElementOptions
PlaceContextualElement によって実装

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

PlaceContextualListConfigElement クラス

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
library "places"

Place Contextual Element のリスト表示のオプションを構成する HTML 要素。

<gmp-place-contextual-list-config
  layout="value-name"
  map-hidden>
</gmp-place-contextual-list-config>
 
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");
PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
パラメータ:
layout
attr: layout
入力タイプ: PlaceContextualListLayout optional
出力タイプ: PlaceContextualListLayout
レイアウト。
HTML 属性: layout="value-name"
mapHidden
attr: map-hidden
入力タイプ: boolean optional
出力タイプ: boolean
地図が非表示かどうか。
HTML 属性: map-hidden
継承元: addEventListener、 removeEventListener

PlaceContextualListConfigElementOptions インターフェース

インターフェース google.maps.places.PlaceContextualListConfigElementOptions
PlaceContextualListConfigElement によって実装

PlaceContextualListConfigElement のオプション。
layout
省略可
タイプ: PlaceContextualListLayout optional
デフォルト: PlaceContextualListLayout.VERTICAL
レイアウト。
mapHidden
省略可
タイプ: boolean optional
デフォルト: false
地図を非表示にする場合は true。

PlaceContextualListLayout 定数

定数 google.maps.places.PlaceContextualListLayout
ライブラリ "places"

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

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは PlaceContextualListLayoutString 型で定義されます。

const {PlaceContextualListLayout} = await google.maps.importLibrary("places");
COMPACT コンパクト リスト レイアウト: リストアイテムは 1 行にリンクとしてレンダリングされ、オーバーフローはプルダウン リストに表示されます。
VERTICAL 縦型リスト レイアウト: リストアイテムが縦型リストのカードとしてレンダリングされます。

PlacePinElement クラス

class google.maps.places.PlacePinElement extends HTMLElement implements PlacePinElementOptions
library "places"

場所のカテゴリ アイコンまたは写真を使用して、場所の地図ピンを表示します。場所を指定するには、PlaceDetailsPlaceRequestElement または PlaceDetailsLocationRequestElement を追加します。ピンを AdvancedMarkerElement のコンテンツとして使用します。3D 地図ではサポートされていません。

例: 

 <gmp-advanced-marker>
   <gmp-place-pin>
     <gmp-place-details-place-request
       place="PLACE_ID"
     ></gmp-place-details-place-request>
     <gmp-place-rating></gmp-place-rating>
   </gmp-place-pin>
 </gmp-advanced-marker>

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

<gmp-place-pin
  icon="value-name"
  scale="number">
</gmp-place-pin>
 
const {PlacePinElement} = await google.maps.importLibrary("places");
PlacePinElement
PlacePinElement([options])
パラメータ:
icon
attr: icon
入力タイプ: PlacePinIcon optional
出力タイプ: PlacePinIcon
デフォルト: PlacePinIcon.TYPE
ピン内に表示されるアイコン。PlacePinIcon をご覧ください。
HTML 属性: icon="value-name"
photoRendered
readonly
タイプ: boolean
読み取り専用。ピンに場所の写真が表示されている場合は true。icon が PHOTO でない場合は常に false。icon が PHOTO であっても、場所に写真がない場合や、写真の読み込みに失敗した場合は、false になり、ピンには代わりに場所タイプアイコンが表示されます。gmp-load が配信される前に設定します。
place
readonly
タイプ: Place optional
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。undefined（場所がまだ読み込まれていないか、読み込みに失敗した場合）。
scale
attr: scale
入力タイプ: number optional
出力タイプ: number
デフォルト: 1
ピンのサイズ乗数。
HTML 属性: scale="number"
default
ピンに表示されるオプションのコンテンツ（PlaceRatingElement、カスタム <span>、テキストなど）。Light DOM の子は、ピンに直接スロットされます。コンテンツが表示される場所は icon によって異なります。TYPE の場合は場所タイプアイコンの横、PHOTO の場合は写真のバッジ、NONE の場合はピンのメイン コンテンツとして表示されます。
--gmp-background
ピンの背景色: 楕円、フォトフレーム、フォトバッジ、ビーク、場所タイプピンの枠線。
--gmp-border-radius
PHOTO ピンのピル（スロット付きコンテンツを含む場所タイプアイコン、またはスロット付きコンテンツのみ）とフォトフレームの角丸。デフォルトでは、スロット付きコンテンツを含む場所タイプアイコンの場合は 30px、スロット付きコンテンツのみの場合は 12px、12px フォトフレームになります。スロット付きコンテンツのない場所タイプのピンには適用されません。
--gmp-glyph-background
場所タイプのグリフの背景色。デフォルトは、場所の iconBackgroundColor です。
--gmp-glyph-color
場所タイプのグリフの色。PHOTO ピンが場所タイプアイコンにフォールバックする場合など、グリフが表示されるたびに適用されます。
継承元: addEventListener、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、ネットワーク障害、認証情報の障害（API キーが正しくないなど）、解決できないプレイス ID、位置情報のない場所などが原因で、ピンをまったくレンダリングできない場合に発生します。ピンは非表示になっています。このイベントはバブルしません。
gmp-load
function(event)
引数:
このイベントは、Place Details が読み込まれ、ピンがレンダリングされると呼び出されます。icon が PHOTO の場合、写真の読み込みが完了するか失敗した後にのみ呼び出されます。写真の読み込みに失敗しただけでは、gmp-error は呼び出されません。読み込まれた場所を PlacePinElement.place から読み取り、写真が表示されているかどうかを PlacePinElement.photoRendered から読み取ります。このイベントはバブルしません。

PlacePinElementOptions インターフェース

インターフェース google.maps.places.PlacePinElementOptions
PlacePinElement によって実装

PlacePinElement を作成するためのオプション。
icon
省略可
タイプ: PlacePinIcon optional
PlacePinElement.icon をご覧ください。
scale
省略可
タイプ: number optional
PlacePinElement.scale をご覧ください。

PlacePinIcon 定数

定数 google.maps.places.PlacePinIcon
ライブラリ "places"

PlacePinElement のアイコン オプション。デフォルトは TYPE です。選択したアイコンに必要なデータがない場合、ピンは TYPE にフォールバックします。TYPE に必要なデータがない場合は、代わりに汎用アイコンが表示されます。

これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは PlacePinIconString 型で定義されます。

const {PlacePinIcon} = await google.maps.importLibrary("places");
NONE アイコンは表示されず、スロットされたコンテンツのみが表示されます。
PHOTO 場所の写真を円で表示します。場所に写真がない場合は TYPE にフォールバックします。
TYPE 場所のカテゴリ アイコンを表示します。