Place Widget Content Customization

PlaceContentConfigElement クラス

class google.maps.places.PlaceContentConfigElement extends HTMLElement implements PlaceContentConfigElementOptions
library "places"

非推奨: コンテンツ要素またはプリセット要素（PlaceAllContentElement、PlaceStandardContentElement）を PlaceDetailsElement または PlaceDetailsCompactElement に直接追加するか、PlaceSearchElement の <template slot="details-item"> 子要素内に追加します。現在のところ、PlaceContentConfigElement の廃止予定はありません。サポートを終了する 12 か月前までに改めてお知らせいたします。詳しくは、https://developers.google.com/maps/deprecations をご覧ください。

カスタムのコンテンツ セットを表示するように PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成します。この要素を使用するには、子として追加します。

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement の場合は、PlaceContentConfigElement に次のいずれかの要素を追加して、対応するコンテンツを表示します。
PlaceAddressElement、PlaceAccessibleEntranceIconElement、PlaceAttributionElement PlaceMediaElement、PlaceOpenNowStatusElement、PlacePriceElement、PlaceRatingElement、PlaceTypeElement。

PlaceDetailsElement に固有の要素として、
PlaceFeatureListElement PlaceOpeningHoursElement、PlacePhoneNumberElement、PlacePlusCodeElement、PlaceReviewSummaryElement、PlaceReviewsElement、PlaceSummaryElement、PlaceTypeSpecificHighlightsElement、PlaceWebsiteElement のいずれかを追加することもできます。

子要素の順序は重要ではありません。この要素は、カスタマイズできない標準の順序でコンテンツをレンダリングします。例:

 <gmp-place-details>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
     <gmp-place-address></gmp-place-address>
   </gmp-place-content-config>
 </gmp-place-details> 

<gmp-place-content-config></gmp-place-content-config>

const {PlaceContentConfigElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceContentConfigElement	PlaceContentConfigElement([options]) パラメータ: options: PlaceContentConfigElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceContentConfigElementOptions インターフェース

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

非推奨: コンテンツ要素またはプリセット要素（PlaceAllContentElement、PlaceStandardContentElement）を PlaceDetailsElement または PlaceDetailsCompactElement に直接追加するか、PlaceSearchElement の <template slot="details-item"> 子要素内に追加します。現在のところ、PlaceContentConfigElement の廃止予定はありません。サポートを終了する 12 か月前までに改めてお知らせいたします。詳しくは、https://developers.google.com/maps/deprecations をご覧ください。

PlaceContentConfigElement のオプション。

PlaceAllContentElement クラス

class google.maps.places.PlaceAllContentElement extends HTMLElement implements PlaceAllContentElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、利用可能なすべてのコンテンツを表示します。この要素を使用するには、子として追加します。次に例を示します。

 <gmp-place-details>
   <gmp-place-all-content></gmp-place-all-content>
 </gmp-place-details>
 

<gmp-place-all-content></gmp-place-all-content>

const {PlaceAllContentElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceAllContentElement	PlaceAllContentElement([options]) パラメータ: options: PlaceAllContentElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceAllContentElementOptions インターフェース

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

PlaceAllContentElement のオプション。

PlaceStandardContentElement クラス

class google.maps.places.PlaceStandardContentElement extends HTMLElement implements PlaceStandardContentElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、基準セットのコンテンツを表示します。この要素を使用するには、子として追加します。
PlaceDetailsElement の場合、標準コンテンツは次の要素で構成されます。

• メディア
• 住所
• 評価
• type
• 価格
• バリアフリーの出入口アイコン
• ウェブサイト
• 電話番号
• 営業時間
• 概要
• タイプ固有のハイライト
• レビュー
• 特徴量リスト

PlaceDetailsCompactElement の場合、標準コンテンツは以下で構成されます。

• メディア
• 評価
• type
• 価格
• バリアフリーの出入口アイコン
• 「営業中」ステータス

PlaceSearchElement の場合、標準コンテンツは以下で構成されます。

• メディア
• 評価
• type
• 価格
• バリアフリーの出入口アイコン

例:

 <gmp-place-details>
   <gmp-place-standard-content></gmp-place-standard-content>
 </gmp-place-details>
 

<gmp-place-standard-content></gmp-place-standard-content>

const {PlaceStandardContentElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceStandardContentElement	PlaceStandardContentElement([options]) パラメータ: options: PlaceStandardContentElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceStandardContentElementOptions インターフェース

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

PlaceStandardContentElement のオプション。

PlaceMediaElement クラス

class google.maps.places.PlaceMediaElement extends HTMLElement implements PlaceMediaElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、場所のメディア（写真など）を表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-media lightbox-preferred></gmp-place-media>
 </gmp-place-content-config>
 

<gmp-place-media
  lightbox-preferred
  preferred-size="value-name">
</gmp-place-media>

const {PlaceMediaElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceMediaElement	PlaceMediaElement([options]) パラメータ: options: PlaceMediaElementOptions optional

プロパティ
lightboxPreferred attr: lightbox-preferred	入力タイプ: boolean optional 出力タイプ: boolean デフォルト: false メディア ライトボックスを有効にするか無効にするか（両方のオプションがサポートされている場合）。 HTML 属性: lightbox-preferred
preferredSize attr: preferred-size	入力タイプ: MediaSize optional 出力タイプ: MediaSize optional デフォルト: null 複数のサイズがサポートされている場合（PlaceSearchElement 業種など）に優先されるメディアサイズ。指定しない場合、カテゴリ PlaceSearchElement ではデフォルトで MediaSize.SMALL が使用されます。 HTML 属性: preferred-size="value-name"

メソッド
継承元: addEventListener、 removeEventListener

PlaceMediaElementOptions インターフェース

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

PlaceMediaElement のオプション。

プロパティ
lightboxPreferred 省略可	タイプ: boolean optional PlaceMediaElement.lightboxPreferred をご覧ください。
preferredSize 省略可	タイプ: MediaSize optional PlaceMediaElement.preferredSize をご覧ください。

MediaSize 定数

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

複数のサイズがサポートされている場合（PlaceSearchElement 業種など）に優先されるメディアサイズ。

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

const {MediaSize} = await google.maps.importLibrary("places");

定数
LARGE	メディアサイズが大きい。
MEDIUM	中サイズのメディア。
SMALL	メディアサイズが小さい。

PlaceAddressElement クラス

class google.maps.places.PlaceAddressElement extends HTMLElement implements PlaceAddressElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、場所の住所を表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-address></gmp-place-address>
 </gmp-place-content-config>
 

<gmp-place-address></gmp-place-address>

const {PlaceAddressElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceAddressElement	PlaceAddressElement([options]) パラメータ: options: PlaceAddressElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceAddressElementOptions インターフェース

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

PlaceAddressElement のオプション。

PlaceRatingElement クラス

class google.maps.places.PlaceRatingElement extends HTMLElement implements PlaceRatingElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、または PlaceSearchElement を構成して、場所の評価を表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-rating></gmp-place-rating>
 </gmp-place-content-config>
 

<gmp-place-rating></gmp-place-rating>

const {PlaceRatingElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceRatingElement	PlaceRatingElement([options]) パラメータ: options: PlaceRatingElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceRatingElementOptions インターフェース

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

PlaceRatingElement のオプション。

PlaceTypeElement クラス

class google.maps.places.PlaceTypeElement extends HTMLElement implements PlaceTypeElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、場所のタイプを表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-type></gmp-place-type>
 </gmp-place-content-config>
 

<gmp-place-type></gmp-place-type>

const {PlaceTypeElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceTypeElement	PlaceTypeElement([options]) パラメータ: options: PlaceTypeElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceTypeElementOptions インターフェース

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

PlaceTypeElement のオプション。

PlacePriceElement クラス

class google.maps.places.PlacePriceElement extends HTMLElement implements PlacePriceElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、場所の価格レベルまたは価格帯を表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-price></gmp-place-price>
 </gmp-place-content-config>
 

<gmp-place-price></gmp-place-price>

const {PlacePriceElement} = await google.maps.importLibrary("places");

コンストラクタ
PlacePriceElement	PlacePriceElement([options]) パラメータ: options: PlacePriceElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlacePriceElementOptions インターフェース

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

PlacePriceElement のオプション。

PlaceAccessibleEntranceIconElement クラス

class google.maps.places.PlaceAccessibleEntranceIconElement extends HTMLElement implements PlaceAccessibleEntranceIconElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、車椅子対応の入り口がある場所に車椅子アイコンを表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
 </gmp-place-content-config>
 

<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>

const {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceAccessibleEntranceIconElement	PlaceAccessibleEntranceIconElement([options]) パラメータ: options: PlaceAccessibleEntranceIconElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceAccessibleEntranceIconElementOptions インターフェース

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

PlaceAccessibleEntranceIconElement のオプション。

PlaceOpenNowStatusElement クラス

class google.maps.places.PlaceOpenNowStatusElement extends HTMLElement implements PlaceOpenNowStatusElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement を構成して、場所の現在の営業状況（営業中または休業中）を表示します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-open-now-status></gmp-place-open-now-status>
 </gmp-place-content-config>
 

<gmp-place-open-now-status></gmp-place-open-now-status>

const {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceOpenNowStatusElement	PlaceOpenNowStatusElement([options]) パラメータ: options: PlaceOpenNowStatusElementOptions optional

メソッド
継承元: addEventListener、 removeEventListener

PlaceOpenNowStatusElementOptions インターフェース

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

PlaceOpenNowStatusElement のオプション。

PlaceReviewSummaryElement クラス

class google.maps.places.PlaceReviewSummaryElement extends HTMLElement implements PlaceReviewSummaryElementOptions
library "places"

場所のクチコミの要約を表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-review-summary></gmp-place-review-summary>
 </gmp-place-content-config>
 

<gmp-place-review-summary></gmp-place-review-summary>

const {PlaceReviewSummaryElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceReviewSummaryElementOptions インターフェース

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

PlaceReviewSummaryElement のオプション。

PlaceReviewsElement クラス

class google.maps.places.PlaceReviewsElement extends HTMLElement implements PlaceReviewsElementOptions
library "places"

場所のクチコミを表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-reviews></gmp-place-reviews>
 </gmp-place-content-config>
 

<gmp-place-reviews></gmp-place-reviews>

const {PlaceReviewsElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceReviewsElementOptions インターフェース

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

PlaceReviewsElement のオプション。

PlaceSummaryElement クラス

class google.maps.places.PlaceSummaryElement extends HTMLElement implements PlaceSummaryElementOptions
library "places"

場所の概要を表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-summary></gmp-place-summary>
 </gmp-place-content-config>
 

<gmp-place-summary></gmp-place-summary>

const {PlaceSummaryElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceSummaryElementOptions インターフェース

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

PlaceSummaryElement のオプション。

PlaceFeatureListElement クラス

class google.maps.places.PlaceFeatureListElement extends HTMLElement implements PlaceFeatureListElementOptions
library "places"

[概要] タブに場所の機能リストを表示するように PlaceDetailsElement を構成します。特徴リストには、ユーザー補助オプション、設備、利用可能なお支払い方法などを含めることができます。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-feature-list></gmp-place-feature-list>
 </gmp-place-content-config>
 

<gmp-place-feature-list></gmp-place-feature-list>

const {PlaceFeatureListElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceFeatureListElementOptions インターフェース

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

PlaceFeatureListElement のオプション。

PlaceOpeningHoursElement クラス

class google.maps.places.PlaceOpeningHoursElement extends HTMLElement implements PlaceOpeningHoursElementOptions
library "places"

場所の営業時間を表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-opening-hours></gmp-place-opening-hours>
 </gmp-place-content-config>
 

<gmp-place-opening-hours></gmp-place-opening-hours>

const {PlaceOpeningHoursElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceOpeningHoursElementOptions インターフェース

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

PlaceOpeningHoursElement のオプション。

PlacePhoneNumberElement クラス

class google.maps.places.PlacePhoneNumberElement extends HTMLElement implements PlacePhoneNumberElementOptions
library "places"

場所の電話番号を表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-phone-number></gmp-place-phone-number>
 </gmp-place-content-config>
 

<gmp-place-phone-number></gmp-place-phone-number>

const {PlacePhoneNumberElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlacePhoneNumberElementOptions インターフェース

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

PlacePhoneNumberElement のオプション。

PlacePlusCodeElement クラス

class google.maps.places.PlacePlusCodeElement extends HTMLElement implements PlacePlusCodeElementOptions
library "places"

場所の Plus Code を表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-plus-code></gmp-place-plus-code>
 </gmp-place-content-config>
 

<gmp-place-plus-code></gmp-place-plus-code>

const {PlacePlusCodeElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlacePlusCodeElementOptions インターフェース

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

PlacePlusCodeElement のオプション。

PlaceTypeSpecificHighlightsElement クラス

class google.maps.places.PlaceTypeSpecificHighlightsElement extends HTMLElement implements PlaceTypeSpecificHighlightsElementOptions
library "places"

ガソリン価格や EV 充電器の空き状況など、場所のタイプ固有のハイライトを表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
 </gmp-place-content-config>
 

<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>

const {PlaceTypeSpecificHighlightsElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceTypeSpecificHighlightsElementOptions インターフェース

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

PlaceTypeSpecificHighlightsElement のオプション。

PlaceWebsiteElement クラス

class google.maps.places.PlaceWebsiteElement extends HTMLElement implements PlaceWebsiteElementOptions
library "places"

場所のウェブサイトを表示するように PlaceDetailsElement を構成します。この要素を使用するには、PlaceContentConfigElement の子として追加します。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-website></gmp-place-website>
 </gmp-place-content-config>
 

<gmp-place-website></gmp-place-website>

const {PlaceWebsiteElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceWebsiteElementOptions インターフェース

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

PlaceWebsiteElement のオプション。

PlaceAttributionElement クラス

class google.maps.places.PlaceAttributionElement extends HTMLElement implements PlaceAttributionElementOptions
library "places"

PlaceDetailsCompactElement、PlaceDetailsElement、PlaceSearchElement で Google マップの帰属表示テキストをカスタマイズできます。この要素を使用するには、PlaceContentConfigElement の子として追加します。この要素を省略した場合でも、帰属情報はデフォルトの色で表示されます。次に例を示します。

 <gmp-place-content-config>
   <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
   ></gmp-place-attribution>
 </gmp-place-content-config>
 

<gmp-place-attribution
  dark-scheme-color="value-name"
  light-scheme-color="value-name">
</gmp-place-attribution>

const {PlaceAttributionElement} = await google.maps.importLibrary("places");

コンストラクタ
PlaceAttributionElement	PlaceAttributionElement([options]) パラメータ: options: PlaceAttributionElementOptions optional

プロパティ
darkSchemeColor attr: dark-scheme-color	入力タイプ: AttributionColor optional 出力タイプ: AttributionColor デフォルト: AttributionColor.WHITE ダークモードでの Google マップの帰属表示の色。 HTML 属性: dark-scheme-color="value-name"
lightSchemeColor attr: light-scheme-color	入力タイプ: AttributionColor optional 出力タイプ: AttributionColor デフォルト: AttributionColor.GRAY ライトモードでの Google マップの帰属表示の色。 HTML 属性: light-scheme-color="value-name"

メソッド
継承元: addEventListener、 removeEventListener

PlaceAttributionElementOptions インターフェース

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

PlaceAttributionElement のオプション。

プロパティ
darkSchemeColor 省略可	タイプ: AttributionColor optional PlaceAttributionElement.darkSchemeColor をご覧ください。
lightSchemeColor 省略可	タイプ: AttributionColor optional PlaceAttributionElement.lightSchemeColor をご覧ください。

AttributionColor 定数

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

Google マップの帰属表示テキストの色のオプション。帰属表示は、これらの色のいずれかを使用するようにカスタマイズできます。

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

const {AttributionColor} = await google.maps.importLibrary("places");

定数
BLACK	黒の帰属表示テキスト。
GRAY	グレーの帰属表示テキスト。
WHITE	白の帰属表示テキスト。

PlaceButtonElement クラス

class google.maps.places.PlaceButtonElement extends HTMLElement implements PlaceButtonElementOptions
library "places"

action-main スロットまたは action-corner スロットに挿入されたボタンを表示します。PlaceButtonElement にはデフォルトの動作はありません。要素にイベント リスナーをアタッチして、その動作を定義します。デフォルトでは、ボタンは action-main スロットに表示されます。

<gmp-place-button
  action-aria-label="string"
  label="string">
</gmp-place-button>

const {PlaceButtonElement} = await google.maps.importLibrary("places");

プロパティ
actionAriaLabel attr: action-aria-label	タイプ: string optional デフォルト: undefined 内部コントロールの ARIA ラベル。アイコンのみのコントロールには、その目的と動作を説明する aria-label を必ず設定する必要があります。コーナーにレンダリングされるコントロールにはラベルが表示されないため、コーナー コントロールのラベルの代わりに aria-label を使用することをおすすめします。 HTML 属性: action-aria-label="string"
label attr: label	タイプ: string optional デフォルト: undefined コントロールに表示するラベル。事前定義されたアクション タイプを持つリンクの場合、この属性は無視されます。action-corner スロットにレンダリングされたリンクとボタンにはラベルが表示されません。代わりに action-aria-label 属性を使用して、角を制御することをおすすめします。 HTML 属性: label="string"

スロット
icon-start	ラベルの前に配置されるアイコン コンテンツのスロット。これは、メインとコーナーのアクション コントロールの両方に使用されます。コントロールがコーナー状態に折りたたまれると、このスロットのコンテンツがレンダリングされます。

部品
button	内部コントロール要素をターゲットとする CSS パーツ。

メソッド
継承元: addEventListener、 removeEventListener

イベント
gmp-click	function(event) 引数: event: PlaceActionEvent optional コントロールがクリックされたときに呼び出されます。

PlaceButtonElementOptions インターフェース

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

PlaceButtonElement のオプション。

プロパティ
actionAriaLabel 省略可	タイプ: string optional 内部コントロールの ARIA ラベル。アイコンのみのコントロールには、その目的と動作を説明する aria-label を必ず設定する必要があります。コーナーにレンダリングされるコントロールにはラベルが表示されないため、コーナー コントロールのラベルの代わりに aria-label を使用することをおすすめします。
label 省略可	タイプ: string optional コントロールに表示するラベル。事前定義されたアクション タイプを持つリンクの場合、この属性は無視されます。action-corner スロットにレンダリングされたリンクとボタンにはラベルが表示されません。代わりに action-aria-label 属性を使用して、角を制御することをおすすめします。

PlaceLinkElement クラス

class google.maps.places.PlaceLinkElement extends HTMLElement implements PlaceLinkElementOptions
library "places"

action-main スロットまたは action-corner スロットに挿入されたリンクを表示します。デフォルトでは、リンクは action-main スロットに表示されます。action 属性を使用して、リンクの動作を指定します。ActionLinkType には、使用可能なアクション タイプがいくつかあります。カスタムリンクの場合は、custom アクション タイプを指定し、href 属性と label 属性を設定します。

<gmp-place-link
  action="value-name"
  action-aria-label="string"
  default-icon-hidden
  href="string"
  label="string"
  target="string">
</gmp-place-link>

const {PlaceLinkElement} = await google.maps.importLibrary("places");

プロパティ
action attr: action	タイプ: ActionLinkType optional リンクがクリックされたときに実行するアクションのタイプ。リンクのデフォルトのラベル、アイコン、リンク先 href を指定します。custom タイプを使用し、href 属性を指定して、宛先を手動で設定します。 HTML 属性: action="value-name"
actionAriaLabel attr: action-aria-label	タイプ: string optional デフォルト: undefined 内部コントロールの ARIA ラベル。アイコンのみのコントロールには、その目的と動作を説明する aria-label を必ず設定する必要があります。コーナーにレンダリングされるコントロールにはラベルが表示されないため、コーナー コントロールのラベルの代わりに aria-label を使用することをおすすめします。 HTML 属性: action-aria-label="string"
defaultIconHidden attr: default-icon-hidden	入力タイプ: boolean optional 出力タイプ: boolean デフォルト: false カスタム以外のすべてのリンクタイプでデフォルトのアイコンを非表示にするかどうか。 HTML 属性: default-icon-hidden
href attr: href	タイプ: string optional デフォルト: undefined リンクがクリックされたときに開く URL。これは、action 属性が custom に設定されている場合にのみ使用されます。 HTML 属性: href="string"
label attr: label	タイプ: string optional デフォルト: undefined コントロールに表示するラベル。事前定義されたアクション タイプを持つリンクの場合、この属性は無視されます。action-corner スロットにレンダリングされたリンクとボタンにはラベルが表示されません。代わりに action-aria-label 属性を使用して、角を制御することをおすすめします。 HTML 属性: label="string"
target attr: target	タイプ: string optional デフォルト: undefined リンクを開く場所を指定します。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target をご覧ください。 HTML 属性: target="string"

スロット
icon-start	ラベルの前に配置されるアイコン コンテンツのスロット。これは、メインとコーナーのアクション コントロールの両方に使用されます。コントロールがコーナー状態に折りたたまれると、このスロットのコンテンツがレンダリングされます。

部品
button	内部コントロール要素をターゲットとする CSS パーツ。

メソッド
継承元: addEventListener、 removeEventListener

イベント
gmp-click	function(event) 引数: event: PlaceActionEvent optional コントロールがクリックされたときに呼び出されます。

PlaceLinkElementOptions インターフェース

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

PlaceLinkElement のオプション。

プロパティ
action 省略可	タイプ: ActionLinkType optional PlaceLinkElement.action をご覧ください。
actionAriaLabel 省略可	タイプ: string optional 内部コントロールの ARIA ラベル。アイコンのみのコントロールには、その目的と動作を説明する aria-label を必ず設定する必要があります。コーナーにレンダリングされるコントロールにはラベルが表示されないため、コーナー コントロールのラベルの代わりに aria-label を使用することをおすすめします。
href 省略可	タイプ: string optional PlaceLinkElement.href をご覧ください。
label 省略可	タイプ: string optional コントロールに表示するラベル。事前定義されたアクション タイプを持つリンクの場合、この属性は無視されます。action-corner スロットにレンダリングされたリンクとボタンにはラベルが表示されません。代わりに action-aria-label 属性を使用して、角を制御することをおすすめします。
target 省略可	タイプ: string optional PlaceLinkElement.target をご覧ください。

ActionLinkType 定数

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

PlaceLinkElement がクリックされたときに実行されるアクション。アイコン、ラベル、href リンク先を決定します。

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

const {ActionLinkType} = await google.maps.importLibrary("places");

定数
CALL	tel: リンクをトリガーして、その場所に電話をかけます。動作はオペレーティング システムによって異なります。
CUSTOM	このアクション タイプはカスタムリンクに使用します。このアクション タイプを使用する場合は、PlaceLinkElement に href 属性を設定する必要があります。
OPEN_DIRECTIONS	PlaceLinkElement.target で指定された場所への経路を開きます。
OPEN_MAP	PlaceLinkElement.target で指定された場所で地図を開きます。
OPEN_WEBSITE	PlaceLinkElement.target で指定された場所にあるスポットのウェブサイトを開きます。

ActionButtonPosition 定数

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

Place Details ウィジェット内のコントロールのスロット位置。

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

const {ActionButtonPosition} = await google.maps.importLibrary("places");

定数
ACTION_CORNER	コントロールはウィジェットの隅に表示されます。コーナー コントロールはアイコンのみをレンダリングします。
ACTION_MAIN	コントロールは、ウィジェットのメイン コンテンツ領域にレンダリングされます。ラベルとアイコンがレンダリングされます。

PlaceActionEvent クラス

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

操作ボタンがクリックされたときに発生するイベント。

const {PlaceActionEvent} = await google.maps.importLibrary("places");

プロパティ
place readonly	タイプ: Place クリックされた場所。

PlaceNameElement クラス

class google.maps.places.PlaceNameElement extends HTMLElement implements PlaceNameElementOptions
library "places"

Place Details 要素内に場所の名前を表示します。

<gmp-place-name></gmp-place-name>

const {PlaceNameElement} = await google.maps.importLibrary("places");

メソッド
継承元: addEventListener、 removeEventListener

PlaceNameElementOptions インターフェース

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

PlaceNameElement のオプション。