PlaceAutocompleteElement クラス
google.maps.places.PlaceAutocompleteElement
クラス
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 included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceAutocompleteElementOptions
を実装します。
const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) パラメータ:
|
プロパティ | |
---|---|
includedPrimaryTypes |
タイプ:
Array<string> optional プライマリの場所タイプ(「restaurant」、「gas_station」など)が含まれます。
このリストに主要なタイプが含まれている場合にのみ、プレイスが返されます。最大 5 つの値を指定できます。タイプが指定されていない場合は、すべての Place タイプが返されます。 HTML 属性:
|
includedRegionCodes |
タイプ:
Array<string> optional 指定された地域の結果のみを含めます。最大 15 個の CLDR 2 文字の地域コードで指定します。空のセットは結果を制限しません。
locationRestriction と includedRegionCodes の両方が設定されている場合、結果は交差領域に配置されます。HTML 属性:
|
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 属性:
|
origin |
タイプ:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 距離の計算の起点。指定しない場合、距離は計算されません。高度が指定されていても、計算には使用されません。
HTML 属性:
|
requestedLanguage |
タイプ:
string optional 可能な場合、結果が返される言語の言語識別子。選択した言語の検索結果のランキングが高くなる可能性がありますが、候補は選択した言語に限定されません。サポートされている言語の一覧をご覧ください。
HTML 属性:
|
requestedRegion |
タイプ:
string optional 結果のフォーマットと結果のフィルタリングに使用される地域コード。この国に限定して候補が表示されるわけではありません。地域コードには、ccTLD(「トップレベル ドメイン」)の 2 文字の値を指定します。ほとんどの ccTLD コードは ISO 3166-1 コードと同一ですが、いくつか注意が必要な例外もあります。たとえば、英国の ccTLD は「uk」(
.co.uk )ですが、ISO 3166-1 コードは「gb」(厳密には「グレートブリテンおよび北アイルランド連合王国」のエンティティ用)です。HTML 属性:
|
unitSystem |
タイプ:
UnitSystem optional 距離の表示に使用される単位系。指定しない場合、単位系は requestedRegion によって決定されます。
HTML 属性:
|
部品 | |
---|---|
prediction-item |
1 つの予測を表す予測のプルダウンの項目。 |
prediction-item-icon |
予測リスト内の各項目の左に表示されるアイコン。 |
prediction-item-main-text |
予測のメインテキストである prediction-item の一部。地理的位置の場合、ここには、「札幌」のような地名や「北十条 4 丁目」のような所番地が含まれます。デフォルトでは、prediction-item-main-text は黒で表示されます。予測アイテムに追加のテキストがある場合、そのテキストは予測アイテムのメインテキスト以外となり、予測アイテムのスタイルを継承します。デフォルトでは色はグレーになります。この追加のテキストは通常、住所です。 |
prediction-item-match |
返される予測のうち、ユーザーの入力に一致する部分。デフォルトでは、この一致するテキストは太字でハイライト表示されます。一致テキストは prediction-item 内の任意の場所に存在します。prediction-item-main-text の一部であるとは限りません。 |
prediction-item-selected |
ユーザーがキーボードで移動したときの項目。注: 選択した項目は、この部分スタイルと予測アイテムの部分スタイルの両方の影響を受けます。 |
prediction-list |
プレイスの Autocomplete サービスが返す予測のリストを含む視覚要素。このリストは、PlaceAutocompleteElement の下にプルダウン リストとして表示されます。 |
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
イベント | |
---|---|
gmp-error |
function(errorEvent) 引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。 |
gmp-select |
function(placePredictionSelectEvent) 引数:
このイベントは、ユーザーが場所の候補を選択したときに発生します。Place オブジェクトに変換できる PlacePrediction オブジェクトが含まれます。 |
PlaceAutocompleteElementOptions インターフェース
google.maps.places.PlaceAutocompleteElementOptions
インターフェース
PlaceAutocompleteElement を構築するためのオプション。各プロパティの説明については、PlaceAutocompleteElement クラスの同じ名前のプロパティを参照してください。
プロパティ | |
---|---|
locationBias optional |
タイプ:
LocationBias optional |
locationRestriction optional |
タイプ:
LocationRestriction optional |
name optional |
タイプ:
string optional |
requestedLanguage optional |
タイプ:
string optional |
PlacePredictionSelectEvent クラス
google.maps.places.PlacePredictionSelectEvent
クラス
このイベントは、ユーザーが PlaceAutocompleteElement で候補アイテムを選択した後に作成されます。event.placePrediction
を使用して選択にアクセスします。
PlacePrediction.toPlace
を呼び出して placePrediction を Place
に変換します。
このクラスは Event
を拡張します。
const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
placePrediction |
タイプ:
PlacePrediction PlacePrediction.toPlace を呼び出して、これを Place に変換します。 |
PlaceAutocompleteRequestErrorEvent クラス
google.maps.places.PlaceAutocompleteRequestErrorEvent
クラス
このイベントは、ネットワーク リクエストに問題がある場合に PlaceAutocompleteElement によって出力されます。
このクラスは Event
を拡張します。
const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
PlaceContextualElement クラス
google.maps.places.PlaceContextualElement
クラス
コンテキスト トークンを使用して、Grounding with Google Maps レスポンスのコンテキスト ビューを表示するウィジェット。
カスタム要素:
<gmp-place-contextual context-token="string"></gmp-place-contextual>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceContextualElementOptions
を実装します。
const {PlaceContextualElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
contextToken |
タイプ:
string optional コンテキスト トークン。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceContextualElementOptions インターフェース
google.maps.places.PlaceContextualElementOptions
インターフェース
PlaceContextualElement
のオプション。
プロパティ | |
---|---|
contextToken optional |
タイプ:
string optional Google マップによるグラウンディングのレスポンスで提供されるコンテキスト トークン。 |
PlaceContextualListConfigElement クラス
google.maps.places.PlaceContextualListConfigElement
クラス
場所コンテキスト要素のリストビューのオプションを構成する HTML 要素。
カスタム要素:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceContextualListConfigElementOptions
を実装します。
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
layout |
タイプ:
PlaceContextualListLayout optional レイアウト。
HTML 属性:
|
mapHidden |
タイプ:
boolean optional 地図が非表示かどうか。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceContextualListConfigElementOptions インターフェース
google.maps.places.PlaceContextualListConfigElementOptions
インターフェース
PlaceContextualListConfigElement のオプション。
プロパティ | |
---|---|
layout optional |
タイプ:
PlaceContextualListLayout optional レイアウト。デフォルトは、 PlaceContextualListLayout.VERTICAL です。 |
mapHidden optional |
タイプ:
boolean optional 地図が非表示かどうか。デフォルトでは地図が表示されます(値は false)。 |
PlaceContextualListLayout 定数
google.maps.places.PlaceContextualListLayout
定数
スポット コンテキスト要素がリストビューでサポートするレイアウトのリスト。
const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
定数 | |
---|---|
COMPACT |
コンパクト リスト レイアウト: リスト項目が 1 行のリンクとしてレンダリングされ、オーバーフローはドロップダウン リストに表示されます。 |
VERTICAL |
縦型リスト レイアウト: リストアイテムが縦型リストのカードとしてレンダリングされます。 |
PlaceDetailsElement クラス
google.maps.places.PlaceDetailsElement
クラス
場所の詳細を表示する HTML 要素。configureFromPlace()
メソッドまたは configureFromLocation()
メソッドを使用して、レンダリングするコンテンツを指定します。Place Details Element を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。
カスタム要素:
<gmp-place-details size="small"></gmp-place-details>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceDetailsElementOptions
を実装します。
const {PlaceDetailsElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) パラメータ:
|
プロパティ | |
---|---|
place |
タイプ:
Place optional 読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクト。 |
size |
タイプ:
PlaceDetailsSize optional PlaceDetailsElement のサイズ バリエーション。デフォルトでは、要素に
PlaceDetailsSize.X_LARGE が表示されます。HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
configureFromLocation |
configureFromLocation(location) パラメータ:
戻り値:
Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。リバース ジオコーディングを使用して LatLng からウィジェットを構成します。 |
configureFromPlace |
configureFromPlace(place) パラメータ:
戻り値:
Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。Place オブジェクトまたはプレイス ID からウィジェットを構成します。 |
|
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 |
PlaceDetailsSize 定数
google.maps.places.PlaceDetailsSize
定数
PlaceDetailsElement
のサイズ バリエーション。
const {PlaceDetailsSize} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
定数 | |
---|---|
LARGE |
大きな画像、基本情報、連絡先情報を含む大きなバリエーション。 |
MEDIUM |
大きな画像と基本情報を含む中サイズのバリエーション。 |
SMALL |
小さな画像と基本情報を含む小さなバリエーション。 |
X_LARGE |
写真のコラージュ、レビュー、場所に関する包括的な情報を含む特大バリエーション。 |
PlaceDetailsCompactElement クラス
google.maps.places.PlaceDetailsCompactElement
クラス
場所の詳細をコンパクトなレイアウトで表示します。PlaceDetailsPlaceRequestElement
を追加して、レンダリングする場所を指定します。PlaceContentConfigElement
、PlaceStandardContentElement
、PlaceAllContentElement
を追加して、レンダリングするコンテンツを指定します。
この要素を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。
カスタム要素:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceDetailsCompactElementOptions
を実装します。
const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options]) パラメータ:
|
プロパティ | |
---|---|
orientation |
タイプ:
PlaceDetailsOrientation optional デフォルト:
PlaceDetailsOrientation.VERTICAL 要素の向きのバリエーション(縦向きまたは横向き)。
HTML 属性:
|
place |
タイプ:
Place optional 読み取り専用。現在レンダリングされている場所の ID、位置情報、ビューポートを含む Place オブジェクト。 |
truncationPreferred |
タイプ:
boolean デフォルト:
false true の場合、場所の名前と住所は折り返されず、1 行に収まるように切り捨てられます。
HTML 属性:
|
CSS プロパティ | |
---|---|
--gmp-mat-color-info |
情報提供の感情を含む UI 要素の色。車椅子のアイコンに使用されます。 |
--gmp-mat-color-negative |
ネガティブな感情の UI 要素の色。[現在休業中] ステータスの [休業中] テキストに使用されます。 |
--gmp-mat-color-neutral-container |
ニュートラルな塗りつぶし UI 要素のコンテナの色。画像のプレースホルダに使用されます。 |
--gmp-mat-color-on-secondary-container |
セカンダリ コンテナの色に対するテキストとアイコンの色。[地図で開く] ボタンのテキストとアイコンに使用されます。 |
--gmp-mat-color-on-surface |
サーフェス色に対するテキストとアイコンの色。通常のテキストに使用されます。 |
--gmp-mat-color-on-surface-variant |
サーフェス色に対するテキストとアイコンの低強調色。強調されていないテキストに使用されます。 |
--gmp-mat-color-outline-decorative |
インタラクティブでない要素の輪郭線の色。要素の枠線に使用されます。 |
--gmp-mat-color-positive |
肯定的な感情を示す UI 要素の色。「営業中」ステータスの「営業中」テキストに使用されます。 |
--gmp-mat-color-primary |
サーフェス色に対するインタラクティブなテキストとアイコンの色。アトリビューション ダイアログのレビュー数とリンクに使用されます。 |
--gmp-mat-color-secondary-container |
表面に対して目立たない塗りつぶし色。色調ボタンなどの劣性コンポーネントに使用します。[地図で開く] ボタンの背景に使用されます。 |
--gmp-mat-color-surface |
背景の色。要素とアトリビューション ダイアログの背景に使用されます。 |
--gmp-mat-font-body-medium |
アトリビューション ダイアログの本文テキストに使用されます。 |
--gmp-mat-font-body-small |
場所の住所、評価、タイプ、価格、現在営業中のステータスに使用されます。 |
--gmp-mat-font-family |
すべてのテキストに使用されるベースのフォント ファミリー。 |
--gmp-mat-font-headline-medium |
アトリビューション ダイアログの見出しテキストに使用されます。 |
--gmp-mat-font-label-large |
アトリビューション ダイアログの [地図で開く] ボタンとリンクに使用されます。 |
--gmp-mat-font-title-small |
場所の名前に使用されます。 |
background-color |
要素の背景色をオーバーライドします。 |
border |
要素の境界線をオーバーライドします。 |
border-radius |
要素の枠線の角丸半径をオーバーライドします。 |
color-scheme |
|
font-size |
要素内のすべてのテキストとアイコンをスケーリングします。これらは内部で em 単位で定義されています。デフォルトは 16px です。 |
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
イベント | |
---|---|
gmp-error |
function(event) 引数:
このイベントは、バックエンドへのリクエストが拒否されたときに発生します(API キーが正しくない場合など)。このイベントはバブリングしません。 |
gmp-load |
function(event) 引数:
このイベントは、要素が読み込まれてコンテンツがレンダリングされると発生します。このイベントはバブリングしません。 |
PlaceDetailsCompactElementOptions インターフェース
google.maps.places.PlaceDetailsCompactElementOptions
インターフェース
PlaceDetailsCompactElement
のオプション。
プロパティ | |
---|---|
orientation optional |
タイプ:
PlaceDetailsOrientation optional |
truncationPreferred optional |
タイプ:
boolean optional |
PlaceDetailsOrientation 定数
google.maps.places.PlaceDetailsOrientation
定数
PlaceDetailsCompactElement
の向きのバリエーション。
const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
定数 | |
---|---|
HORIZONTAL |
横向き。 |
VERTICAL |
縦向き。 |
PlaceDetailsPlaceRequestElement クラス
google.maps.places.PlaceDetailsPlaceRequestElement
クラス
場所オブジェクト、ID、リソース名に基づいてデータを読み込むように、Place Details Compact 要素を構成します。この要素を PlaceDetailsCompactElement
の子として追加して、指定した場所のデータを読み込みます。
カスタム要素:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceDetailsPlaceRequestElementOptions
を実装します。
const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options]) パラメータ:
|
プロパティ | |
---|---|
place |
タイプ:
Place optional Place Details Compact 要素で詳細を表示する場所オブジェクト、ID、またはリソース名。このプロパティは、リソース名として属性に反映されます。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceDetailsPlaceRequestElementOptions インターフェース
google.maps.places.PlaceDetailsPlaceRequestElementOptions
インターフェース
PlaceDetailsPlaceRequestElement
のオプション。
プロパティ | |
---|---|
place optional |
タイプ:
Place|string optional |
PlaceContentConfigElement クラス
google.maps.places.PlaceContentConfigElement
クラス
Place Details Compact 要素で表示するコンテンツを設定します。この要素を PlaceDetailsCompactElement
の子として追加して使用します。PlaceContentConfigElement
に次のいずれかの要素を追加して、対応するコンテンツを表示します。
PlaceMediaElement
、PlaceAddressElement
、PlaceRatingElement
、PlaceTypeElement
、PlacePriceElement
、PlaceAccessibleEntranceIconElement
、PlaceOpenNowStatusElement
、PlaceAttributionElement
子の順序は関係ありません。要素はカスタマイズできない標準の順序でコンテンツをレンダリングします。
カスタム要素:
<gmp-place-content-config></gmp-place-content-config>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceContentConfigElementOptions
を実装します。
const {PlaceContentConfigElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceContentConfigElement |
PlaceContentConfigElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceContentConfigElementOptions インターフェース
google.maps.places.PlaceContentConfigElementOptions
インターフェース
PlaceContentConfigElement
のオプション。
PlaceMediaElement クラス
google.maps.places.PlaceMediaElement
クラス
場所の写真などのメディアを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-media lightbox-preferred></gmp-place-media>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceMediaElementOptions
を実装します。
const {PlaceMediaElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceMediaElement |
PlaceMediaElement([options]) パラメータ:
|
プロパティ | |
---|---|
lightboxPreferred |
タイプ:
boolean optional デフォルト:
false 両方のオプションがサポートされている場合に、メディア ライトボックスを有効にするか無効にするか。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceMediaElementOptions インターフェース
google.maps.places.PlaceMediaElementOptions
インターフェース
PlaceMediaElement
のオプション。
プロパティ | |
---|---|
lightboxPreferred optional |
タイプ:
boolean optional PlaceMediaElement.lightboxPreferred をご覧ください。 |
PlaceAddressElement クラス
google.maps.places.PlaceAddressElement
クラス
スポットの住所を表示するように Place Details Compact 要素を設定します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-address></gmp-place-address>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceAddressElementOptions
を実装します。
const {PlaceAddressElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceAddressElement |
PlaceAddressElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceAddressElementOptions インターフェース
google.maps.places.PlaceAddressElementOptions
インターフェース
PlaceAddressElement
のオプション。
PlaceRatingElement クラス
google.maps.places.PlaceRatingElement
クラス
場所の詳細コンパクト要素を構成して、場所の評価を表示します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-rating></gmp-place-rating>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceRatingElementOptions
を実装します。
const {PlaceRatingElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceRatingElement |
PlaceRatingElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceRatingElementOptions インターフェース
google.maps.places.PlaceRatingElementOptions
インターフェース
PlaceRatingElement
のオプション。
PlaceTypeElement クラス
google.maps.places.PlaceTypeElement
クラス
場所のタイプを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-type></gmp-place-type>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceTypeElementOptions
を実装します。
const {PlaceTypeElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceTypeElement |
PlaceTypeElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceTypeElementOptions インターフェース
google.maps.places.PlaceTypeElementOptions
インターフェース
PlaceTypeElement
のオプション。
PlacePriceElement クラス
google.maps.places.PlacePriceElement
クラス
場所の詳細コンパクト要素を構成して、場所の価格帯または価格範囲を表示します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-price></gmp-place-price>
このクラスは HTMLElement
を拡張します。
このクラスは PlacePriceElementOptions
を実装します。
const {PlacePriceElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlacePriceElement |
PlacePriceElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlacePriceElementOptions インターフェース
google.maps.places.PlacePriceElementOptions
インターフェース
PlacePriceElement
のオプション。
PlaceAccessibleEntranceIconElement クラス
google.maps.places.PlaceAccessibleEntranceIconElement
クラス
場所に入りやすい入り口がある場合に車椅子アイコンを表示するように、Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceAccessibleEntranceIconElementOptions
を実装します。
const {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceAccessibleEntranceIconElement |
PlaceAccessibleEntranceIconElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceAccessibleEntranceIconElementOptions インターフェース
google.maps.places.PlaceAccessibleEntranceIconElementOptions
インターフェース
PlaceAccessibleEntranceIconElement
のオプション。
PlaceOpenNowStatusElement クラス
google.maps.places.PlaceOpenNowStatusElement
クラス
場所の現在の営業中または休業中のステータスを表示するように Place Details Compact 要素を構成します。この要素を PlaceContentConfigElement
の子として追加して使用します。
カスタム要素:
<gmp-place-open-now-status></gmp-place-open-now-status>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceOpenNowStatusElementOptions
を実装します。
const {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceOpenNowStatusElement |
PlaceOpenNowStatusElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceOpenNowStatusElementOptions インターフェース
google.maps.places.PlaceOpenNowStatusElementOptions
インターフェース
PlaceOpenNowStatusElement
のオプション。
PlaceAttributionElement クラス
google.maps.places.PlaceAttributionElement
クラス
Place Details Compact 要素で Google マップの帰属表示テキストをカスタマイズできます。この要素を PlaceContentConfigElement
の子として追加して使用します。この要素を省略した場合でも、帰属表示はデフォルトの色で表示されます。
カスタム要素:
<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceAttributionElementOptions
を実装します。
const {PlaceAttributionElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceAttributionElement |
PlaceAttributionElement([options]) パラメータ:
|
プロパティ | |
---|---|
darkSchemeColor |
タイプ:
AttributionColor optional デフォルト:
AttributionColor.WHITE ダークモードでの Google マップの帰属表示の色。
HTML 属性:
|
lightSchemeColor |
タイプ:
AttributionColor optional デフォルト:
AttributionColor.GRAY ライトモードでの Google マップの帰属表示の色。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceAttributionElementOptions インターフェース
google.maps.places.PlaceAttributionElementOptions
インターフェース
PlaceAttributionElement
のオプション。
プロパティ | |
---|---|
darkSchemeColor optional |
タイプ:
AttributionColor optional |
lightSchemeColor optional |
タイプ:
AttributionColor optional |
AttributionColor 定数
google.maps.places.AttributionColor
定数
Google マップの帰属表示テキストの色オプション。帰属表示は、これらの色のいずれかを使用するようにカスタマイズできます。
const {AttributionColor} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
定数 | |
---|---|
BLACK |
黒色の帰属表示テキスト。 |
GRAY |
帰属表示のテキストは灰色です。 |
WHITE |
白い帰属表示テキスト。 |
PlaceAllContentElement クラス
google.maps.places.PlaceAllContentElement
クラス
利用可能なすべてのコンテンツを表示するように、Place Details Compact 要素を設定します。この要素を PlaceDetailsCompactElement
の子として追加して使用します。
カスタム要素:
<gmp-place-all-content></gmp-place-all-content>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceAllContentElementOptions
を実装します。
const {PlaceAllContentElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceAllContentElement |
PlaceAllContentElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceAllContentElementOptions インターフェース
google.maps.places.PlaceAllContentElementOptions
インターフェース
PlaceAllContentElement
のオプション。
PlaceStandardContentElement クラス
google.maps.places.PlaceStandardContentElement
クラス
標準のコンテンツ セット(メディア、評価、タイプ、価格、バリアフリーの入り口アイコン、現在営業中ステータス)を表示するように、場所の詳細コンパクト要素を構成します。この要素を PlaceDetailsCompactElement
の子として追加して使用します。
カスタム要素:
<gmp-place-standard-content></gmp-place-standard-content>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceStandardContentElementOptions
を実装します。
const {PlaceStandardContentElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceStandardContentElement |
PlaceStandardContentElement([options]) パラメータ:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
PlaceStandardContentElementOptions インターフェース
google.maps.places.PlaceStandardContentElementOptions
インターフェース
PlaceStandardContentElement
のオプション。
PlaceListElement クラス
google.maps.places.PlaceListElement
クラス
場所検索の結果をリストで表示する HTML 要素。configureFromSearchByTextRequest()
メソッドまたは configureFromSearchNearbyRequest()
メソッドを使用して、結果をレンダリングするリクエストを指定します。プレイス リスト要素を使用するには、Google Cloud コンソールでプロジェクトの Places UI Kit API を有効にします。
カスタム要素:
<gmp-place-list selectable></gmp-place-list>
このクラスは HTMLElement
を拡張します。
このクラスは PlaceListElementOptions
を実装します。
const {PlaceListElement} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
PlaceListElement |
PlaceListElement([options]) パラメータ:
|
プロパティ | |
---|---|
places |
読み取り専用。現在レンダリングされている場所の ID、位置、ビューポートを含む Place オブジェクトの配列。 |
selectable |
タイプ:
boolean リスト項目が選択可能かどうか。true の場合、リストアイテムはクリック時に
gmp-placeselect イベントをディスパッチするボタンになります。キーボードによるナビゲーションと選択もサポートされています。HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定されたイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) パラメータ:
戻り値:
Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。Places Text Search API リクエストの検索結果をレンダリングするようにウィジェットを構成します。 |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) パラメータ:
戻り値:
Promise<void> 場所データが読み込まれてレンダリングされると解決される Promise。Places Nearby Search API リクエストの検索結果をレンダリングするようにウィジェットを構成します。 |
|
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 |
PlaceListPlaceSelectEvent クラス
google.maps.places.PlaceListPlaceSelectEvent
クラス
このイベントは、ユーザーが場所を選択したときに PlaceListElement
によって発行されます。
このクラスは Event
を拡張します。
const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
index |
タイプ:
number 選択した場所のリスト インデックス。 |
place |
タイプ:
Place 選択された場所の ID、場所、ビューポートを含む Place オブジェクト。 |
Autocomplete クラス
google.maps.places.Autocomplete
クラス
ユーザーのテキスト入力に基づいて場所の候補を提供するウィジェット。text
タイプの入力要素にアタッチされ、そのフィールドへのテキスト入力をリッスンします。予測のリストはプルダウン リストとして表示され、テキストが入力されるたびに更新されます。
このクラスは MVCObject
を拡張します。
const {Autocomplete} = await google.maps.importLibrary("places")
を呼び出してアクセスします。
Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) パラメータ:
指定された入力テキスト フィールドに指定されたオプションで関連付けられる Autocomplete の新しいインスタンスを作成します。 |
メソッド | |
---|---|
getBounds |
getBounds() パラメータ: なし
戻り値:
LatLngBounds|undefined バイアス範囲。予測がバイアスされる範囲を返します。 |
getFields |
getFields() パラメータ: なし
戻り値:
Array<string>|undefined 詳細が正常に取得されたときに、詳細レスポンスに含める場所のフィールドを返します。フィールドの一覧については、 PlaceResult をご覧ください。 |
getPlace |
getPlace() パラメータ: なし
戻り値:
PlaceResult ユーザーが選択した Place。詳細が正常に取得された場合は、ユーザーが選択した場所の詳細を返します。それ以外の場合は、 name プロパティが入力フィールドの現在の値に設定されたスタブ Place オブジェクトを返します。 |
setBounds |
setBounds(bounds) パラメータ:
戻り値: なし
プレイスの結果を返す優先エリアを設定します。このエリアが優先されますが、このエリアに限定されません。 |
setComponentRestrictions |
setComponentRestrictions(restrictions) パラメータ:
戻り値: なし
コンポーネントの制限を設定します。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。(国など)。 |
setFields |
setFields(fields) パラメータ:
戻り値: なし
詳細が正常に取得されたときに、詳細レスポンスで Place に含めるフィールドを設定します。フィールドの一覧については、 PlaceResult をご覧ください。 |
setOptions |
setOptions(options) パラメータ:
戻り値: なし
|
setTypes |
setTypes(types) パラメータ:
戻り値: なし
返される予測のタイプを設定します。サポートされているタイプについては、 デベロッパー ガイドをご覧ください。タイプが指定されていない場合は、すべてのタイプが返されます。 |
継承:
addListener 、
bindTo 、
get 、
notify 、
set 、
setValues 、
unbind 、
unbindAll
|
イベント | |
---|---|
place_changed |
function() 引数: なし
このイベントは、ユーザーが選択した場所で PlaceResult が利用可能になったときに発生します。ユーザーがコントロールで提案されなかった場所の名前を入力して Enter キーを押した場合、または Place Details リクエストが失敗した場合、 PlaceResult の name プロパティにはユーザー入力が含まれ、他のプロパティは定義されません。 |
AutocompleteOptions インターフェース
google.maps.places.AutocompleteOptions
インターフェース
Autocomplete
オブジェクトに設定できるオプション。
プロパティ | |
---|---|
bounds optional |
タイプ:
LatLngBounds|LatLngBoundsLiteral optional 場所を検索するエリア。 |
componentRestrictions optional |
タイプ:
ComponentRestrictions optional コンポーネントの制限。コンポーネントの制限は、予測を親コンポーネント内の予測のみに制限するために使用されます。(国など)。 |
fields optional |
タイプ:
Array<string> optional 詳細が正常に取得された場合に、詳細レスポンスに含める Place のフィールド。これらのフィールドは課金対象となります。 ['ALL'] が渡された場合は、使用可能なフィールドがすべて返され、課金されます(本番環境のデプロイでは推奨されません)。フィールドの一覧については、PlaceResult をご覧ください。ネストされたフィールドは、ドットパス("geometry.location" など)で指定できます。デフォルトは ['ALL'] です。 |
|
タイプ:
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 クエリ予測のバイアスをかけるエリア。この境界を対象とするクエリが優先されますが、これに限定されません。 |