Places Widgets

PlaceAutocompleteElement クラス

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
ライブラリ "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
含まれるプライマリのプレイス タイプ（「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-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 クラスの同じ名前のプロパティを参照してください。
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
ライブラリ "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
含まれるプライマリのプレイス タイプ（「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-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 を構築するためのオプション。
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
ライブラリ "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 マップの開示ダイアログで、場所の住所、評価、種類、料金、現在営業中かどうか、営業時間、クチコミ、電話番号、ウェブサイト、プラスコード、主な機能、本文テキストに使用されます。
--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
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で em 単位で定義されています。デフォルトは 16px です。
継承: addEventListener、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否された場合（API キーが正しくないなど）に発生します。このイベントはバブリングしません。
gmp-load
function(event)
引数:
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。

PlaceDetailsElementOptions インターフェース

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

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

PlaceDetailsCompactElement クラス

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
ライブラリ "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
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で em 単位で定義されています。デフォルトは 16px です。
継承: addEventListener、 removeEventListener
gmp-error
function(event)
引数:
このイベントは、バックエンドへのリクエストが拒否された場合（API キーが正しくないなど）に発生します。このイベントはバブリングしません。
gmp-load
function(event)
引数:
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。

PlaceDetailsCompactElementOptions インターフェース

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

PlaceDetailsCompactElement のオプション。
internalUsageAttributionIds
省略可
タイプ: Iterable<string> optional
特定のパッケージまたは OSS ライブラリに呼び出しを帰属させるために使用される識別子。
orientation
省略可
タイプ: PlaceDetailsOrientation optional
PlaceDetailsCompactElement.orientation をご覧ください。
truncationPreferred
省略可
タイプ: boolean optional
PlaceDetailsCompactElement.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
ライブラリ "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 のオプション。
place
省略可
タイプ: Place|string optional
PlaceDetailsPlaceRequestElement.placeを見る

PlaceDetailsLocationRequestElement クラス

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
ライブラリ "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 のオプション。
location
省略可
場所をレンダリングする場所。

PlaceSearchElement クラス

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
ライブラリ "places"

場所検索の結果をリストで表示します。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

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 をご覧ください。

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
ライブラリ "places"

近隣検索リクエストに基づいて結果を読み込むように 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 のオプション。
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
ライブラリ "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
最低限必要な充電率（キロワット）。
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 のオプション。
evConnectorTypes
省略可
タイプ: Array<EVConnectorType> optional
優先する EV コネクタの種類のリスト。詳しくは、SearchByTextRequest.evSearchOptions と PlaceTextSearchRequestElement.evConnectorTypes をご覧ください。
evMinimumChargingRateKw
省略可
タイプ: number optional
最低限必要な充電率（キロワット）。詳しくは、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)
パラメータ:
戻り値: なし
プレイス結果を返す優先エリアを設定します。このエリアが優先されますが、このエリアに限定されません。
setComponentRestrictions
setComponentRestrictions(restrictions)
パラメータ:
戻り値: なし
コンポーネントの制限を設定します。コンポーネントの制限は、予測を親コンポーネント内のもののみに制限するために使用されます（国など）。
setFields
setFields(fields)
パラメータ:
  • fields: Array<string> optional
戻り値: なし
詳細が正常に取得されたときに、詳細レスポンスの Place に含めるフィールドを設定します。フィールドの一覧については、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 には、place_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
ライブラリ "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 のオプション。
contextToken
省略可
タイプ: string optional
Google マップによるグラウンディングのレスポンスによって提供されるコンテキスト トークン。

PlaceContextualListConfigElement クラス

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
ライブラリ "places"

スポット コンテキスト要素のリストビューのオプションを構成する 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 のオプション。
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 縦型リスト レイアウト: リストアイテムが縦型リストのカードとしてレンダリングされます。