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 属性:
|
requestedLanguage |
タイプ:
string optional 結果を返す言語の言語 ID(可能であれば)。選択した言語の結果は上位に表示されますが、候補は選択した言語に限定されません。サポートされている言語の一覧をご覧ください。
HTML 属性:
|
requestedRegion |
タイプ:
string optional 結果のフォーマット設定と結果のフィルタリングに使用される地域コード。候補は、この国に限定されません。地域コードには、ccTLD(「トップレベル ドメイン」)の 2 文字の値を指定します。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」(
.co.uk )ですが、ISO 3166-1 コードは「gb」(技術的には「グレート ブリテンおよび北アイルランド連合王国」のエンティティ)です。HTML 属性:
|
types |
タイプ:
Array<string> optional 返される予測のタイプ。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。
HTML 属性:
|
部品 | |
---|---|
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 の下にプルダウン リストとして表示されます。 |
メソッド | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
removeEventListener |
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 |
locationBias optional |
タイプ:
LocationBias optional |
locationRestriction optional |
タイプ:
LocationRestriction optional |
requestedLanguage optional |
タイプ:
string optional |
requestedRegion optional |
タイプ:
string optional |
types optional |
タイプ:
Array<string> optional |
PlaceAutocompletePlaceSelectEvent クラス
google.maps.places.PlaceAutocompletePlaceSelectEvent
クラス
このイベントは、ユーザーが Place Autocomplete 要素を使用して場所を選択した後に作成されます。event.place
を使用して選択内容にアクセスします。
このクラスは Event
を拡張します。
const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
place |
タイプ:
Place |
PlaceAutocompleteRequestErrorEvent クラス
google.maps.places.PlaceAutocompleteRequestErrorEvent
クラス
このイベントは、ネットワーク リクエストに問題がある場合に PlaceAutocompleteElement によって出力されます。
このクラスは Event
を拡張します。
const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
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) パラメータ:
戻り値: なし
詳細が正常に取得されたときに、詳細レスポンスのプレイスに含めるフィールドを設定します。フィールドの一覧については、 PlaceResult をご覧ください。 |
setOptions |
setOptions(options) パラメータ:
戻り値: なし
|
setTypes |
setTypes(types) パラメータ:
戻り値: なし
返される予測のタイプを設定します。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。 |
継承:
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'] です。 |
|
タイプ:
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 返される予測のタイプ。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。 |
SearchBox クラス
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 クエリ予測のバイアスをかける領域。予測は、これらの境界をターゲットとするクエリを優先しますが、これに限定されるものではありません。 |