Places Widgets

PlaceAutocompleteElement クラス

google.maps.places.PlaceAutocompleteElement クラス

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

カスタム要素:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>

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

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

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
パラメータ: 
componentRestrictions
タイプ:  ComponentRestrictions optional
コンポーネントの制限事項。コンポーネントの制限は、予測を親コンポーネント内のものに制限するために使用されます。（国など）。
locationBias
タイプ:  LocationBias optional
場所の検索時に使用する柔軟な境界またはヒント。
locationRestriction
タイプ:  LocationRestriction optional
検索結果を制限する範囲。
name
タイプ:  string optional
入力要素に使用する名前。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name をご覧ください。入力の name 属性と同じ動作をします。これは、フォームの送信時に使用される名前です。詳しくは、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form をご覧ください。
HTML 属性:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
タイプ:  string optional
結果を返す言語の言語 ID（可能であれば）。選択した言語の結果は上位に表示されますが、候補は選択した言語に限定されません。サポートされている言語の一覧をご覧ください。
HTML 属性:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
タイプ:  string optional
結果のフォーマット設定と結果のフィルタリングに使用される地域コード。候補は、この国に限定されません。地域コードには、ccTLD（「トップレベル ドメイン」）の 2 文字の値を指定します。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」（.co.uk）ですが、ISO 3166-1 コードは「gb」（技術的には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ）です。
HTML 属性:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
タイプ:  Array<string> optional
返される予測のタイプ。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。
HTML 属性:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
予測のプルダウン内の項目。1 つの予測を表します。
prediction-item-icon
予測リスト内の各項目の左に表示されるアイコン。
prediction-item-main-text
予測のメインテキストである prediction-item の一部。地理的位置の場合、ここには、「札幌」のような地名や「北十条 4 丁目」のような所番地が含まれます。デフォルトでは、prediction-item-main-text の色は黒です。prediction-item に追加のテキストがある場合、そのテキストは prediction-item-main-text 以外となり、prediction-item のスタイルを継承します。デフォルトでは色はグレーになります。この追加のテキストは通常、住所です。
prediction-item-match
返される予測のうち、ユーザーの入力に一致する部分。デフォルトでは、この一致するテキストは太字でハイライト表示されます。一致テキストは prediction-item 内の任意の場所に存在します。prediction-item-main-text に含まれるとは限りません。
prediction-item-selected
ユーザーがキーボードから移動したときの項目。注: 選択したアイテムには、この部分スタイルと予測アイテムの部分スタイルの両方の影響が及ぶことになります。
prediction-list
プレイスの Autocomplete サービスが返す予測のリストを含む視覚要素。このリストは、PlaceAutocompleteElement の下にプルダウン リストとして表示されます。
BetaaddEventListener
addEventListener(type, listener[, options])
パラメータ: 
  • type:  string リッスンするイベントタイプを表す大文字と小文字を区別する文字列。
  • listener:  EventListener|EventListenerObject通知を受け取るオブジェクト。これは、handleEvent メソッドを含む関数またはオブジェクトである必要があります。
  • options:  boolean|AddEventListenerOptions optional オプションをご覧ください。カスタム イベントでは capture と passive のみがサポートされます。
戻り値:  void
指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。
BetaremoveEventListener
removeEventListener(type, listener[, options])
パラメータ: 
戻り値:  void
以前に addEventListener で登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
引数: 
このイベントは、ユーザーが場所の候補を選択したときに発生します。Place オブジェクトが含まれています。
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
引数: 
このイベントは、バックエンドへのリクエストが拒否されたときに発生します（API キーが正しくないなど）。このイベントはバブルアップしません。

PlaceAutocompleteElementOptions インターフェース

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

PlaceAutocompleteElement の作成オプション。
componentRestrictions optional
タイプ:  ComponentRestrictions optional
PlaceAutocompleteElement.componentRestrictionsを見る
locationBias optional
タイプ:  LocationBias optional
PlaceAutocompleteElement.locationBiasを見る
locationRestriction optional
タイプ:  LocationRestriction optional
PlaceAutocompleteElement.locationRestrictionを見る
requestedLanguage optional
タイプ:  string optional
PlaceAutocompleteElement.requestedLanguageを見る
requestedRegion optional
タイプ:  string optional
PlaceAutocompleteElement.requestedRegionを見る
types optional
タイプ:  Array<string> optional
PlaceAutocompleteElement.typesを見る

PlaceAutocompletePlaceSelectEvent クラス

google.maps.places.PlaceAutocompletePlaceSelectEvent クラス

このイベントは、ユーザーが Place Autocomplete 要素を使用して場所を選択した後に作成されます。event.place を使用して選択内容にアクセスします。

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

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

PlaceAutocompleteRequestErrorEvent クラス

google.maps.places.PlaceAutocompleteRequestErrorEvent クラス

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

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

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

PlaceDetailsElement クラス

google.maps.places.PlaceDetailsElement クラス

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

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

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

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

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

PlaceDetailsElementOptions インターフェース

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

PlaceDetailsElement のオプション。
size optional
タイプ:  PlaceDetailsSize optional
PlaceDetailsElement.sizeを見る

PlaceDetailsSize 定数

google.maps.places.PlaceDetailsSize 定数

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

const {PlaceDetailsSize} = await google.maps.importLibrary("places") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
LARGE 大きな画像、基本情報、連絡先情報を含む大きなバリアント。
MEDIUM 大きな画像と基本情報を含めた中程度のバリエーション。
SMALL 小さい画像と基本情報を含む小さいバリアント。
X_LARGE 写真コラージュ、レビュー、包括的な場所情報を含む特大サイズのバリエーション。

PlaceListElement クラス

google.maps.places.PlaceListElement クラス

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

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

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

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

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

PlaceListElementOptions インターフェース

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

PlaceListElement のオプション。
selectable optional
タイプ:  boolean optional
PlaceListElement.selectableを見る

PlaceListPlaceSelectEvent クラス

google.maps.places.PlaceListPlaceSelectEvent クラス

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

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

const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
index
タイプ:  number
選択した場所のリスト インデックス。
place
タイプ:  Place
選択した場所の ID、位置情報、ビューポートを含む Place オブジェクト。

Autocomplete クラス

google.maps.places.Autocomplete クラス

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

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

const {Autocomplete} = await google.maps.importLibrary("places") を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
Autocomplete
Autocomplete(inputField[, opts])
パラメータ: 
指定されたオプションで指定された入力テキスト フィールドにアタッチする Autocomplete の新しいインスタンスを作成します。
getBounds
getBounds()
パラメータ: なし
戻り値:  LatLngBounds|undefined バイアスの範囲。
予測のバイアスがある範囲を返します。
getFields
getFields()
パラメータ: なし
戻り値:  Array<string>|undefined
詳細が正常に取得された場合に、詳細レスポンスでプレイスに含めるフィールドを返します。フィールドの一覧については、PlaceResult をご覧ください。
getPlace
getPlace()
パラメータ: なし
戻り値:  PlaceResult ユーザーが選択した場所。
ユーザーが選択したプレイスの詳細が正常に取得された場合は、その詳細を返します。それ以外の場合は、name プロパティが入力フィールドの現在の値に設定されたスタブの Place オブジェクトを返します。
setBounds
setBounds(bounds)
パラメータ: 
戻り値: なし
プレイスの結果を返す範囲を設定します。この領域内に含まれる場所が優先されますが、これに限定されません。
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 キーを押した場合、または場所の詳細リクエストが失敗した場合、PlaceResult には name プロパティにユーザー入力が含まれ、他のプロパティは定義されません。

AutocompleteOptions インターフェース

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

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

google.maps.places.SearchBox クラス

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

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

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

SearchBoxOptions インターフェース

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

SearchBox オブジェクトに設定できるオプション。
bounds optional
タイプ:  LatLngBounds|LatLngBoundsLiteral optional
クエリ予測のバイアスをかける領域。予測は、これらの境界をターゲットとするクエリを優先しますが、これに限定されるものではありません。