Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Place Widget Content Customization

[フレーム]

PlaceContentConfigElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement or PlaceSearchElement to show a custom set of content. Append this element as a child to use it.

For PlaceDetailsCompactElement , PlaceDetailsElement or PlaceSearchElement , append any of the following elements to the PlaceContentConfigElement to show the corresponding content:
PlaceAddressElement , PlaceAccessibleEntranceIconElement , PlaceAttributionElement PlaceMediaElement , PlaceOpenNowStatusElement , PlacePriceElement , PlaceRatingElement , PlaceTypeElement .

Specific to PlaceDetailsElement , you may also append any of the following elements:
PlaceFeatureListElement PlaceOpeningHoursElement , PlacePhoneNumberElement , PlacePlusCodeElement , PlaceReviewSummaryElement , PlaceReviewsElement , PlaceSummaryElement , PlaceTypeSpecificHighlightsElement , PlaceWebsiteElement .

The order of the children does not matter; the element renders content in a standard order which is not customizable. Example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceContentConfigElement
PlaceContentConfigElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceContentConfigElementOptions interface

google.maps.places.PlaceContentConfigElementOptions interface

Options for PlaceContentConfigElement.

PlaceAllContentElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show all available content. Append this element as a child to use it. For example: 

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

<gmp-place-all-content></gmp-place-all-content>
 
const{PlaceAllContentElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceAllContentElement
PlaceAllContentElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceAllContentElementOptions interface

google.maps.places.PlaceAllContentElementOptions interface

Options for PlaceAllContentElement.

PlaceStandardContentElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a standard set of content. Append this element as a child to use it.
For PlaceDetailsElement , standard content consists of:

  • media
  • address
  • rating
  • type
  • price
  • accessible entrance icon
  • website
  • phone number
  • opening hours
  • summary
  • type specific highlights
  • reviews
  • feature list

For PlaceDetailsCompactElement , standard content consists of:
  • media
  • rating
  • type
  • price
  • accessible entrance icon
  • open now status

For PlaceSearchElement , standard content consists of:
  • media
  • rating
  • type
  • price
  • accessible entrance icon

For example: 
 <gmp-place-details>
  <gmp-place-standard-content></gmp-place-standard-content>
 </gmp-place-details>
 

<gmp-place-standard-content></gmp-place-standard-content>
 
const{PlaceStandardContentElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceStandardContentElement
PlaceStandardContentElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceStandardContentElementOptions interface

google.maps.places.PlaceStandardContentElementOptions interface

Options for PlaceStandardContentElement.

PlaceMediaElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a place's media, such as photos. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceMediaElement
PlaceMediaElement([options])
Parameters:

Properties
lightboxPreferred
attr: lightbox-preferred
Input type: boolean optional
Output type: boolean
Default: false
Whether to enable or disable the media lightbox, in cases where both options are supported.
HTML attribute: lightbox-preferred
preferredSize
attr: preferred-size
Input type: MediaSize optional
Output type: MediaSize optional
Default: null
The preferred media size in cases where multiple sizes are supported, such as the vertical PlaceSearchElement . The vertical PlaceSearchElement will use MediaSize.SMALL by default if this is not specified.
HTML attribute: preferred-size="value-name"

Methods
Inherited: addEventListener , removeEventListener

PlaceMediaElementOptions interface

google.maps.places.PlaceMediaElementOptions interface

Options for PlaceMediaElement.

Properties
lightboxPreferred
optional
Type: boolean optional
preferredSize
optional
Type: MediaSize optional

MediaSize constants

google.maps.places.MediaSize constants
library "places"

The preferred media size in cases where multiple sizes are supported, such as the vertical PlaceSearchElement .

These constants are also usable as strings. In TypeScript, the string literals are defined by the MediaSizeString type.

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

Constants
LARGE Large media size.
MEDIUM Medium media size.
SMALL Small media size.

PlaceAddressElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a place's address. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-address></gmp-place-address>
 
const{PlaceAddressElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceAddressElement
PlaceAddressElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceAddressElementOptions interface

google.maps.places.PlaceAddressElementOptions interface

Options for PlaceAddressElement.

PlaceRatingElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a place's rating. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-rating></gmp-place-rating>
 
const{PlaceRatingElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceRatingElement
PlaceRatingElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceRatingElementOptions interface

google.maps.places.PlaceRatingElementOptions interface

Options for PlaceRatingElement.

PlaceTypeElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a place's type. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-type></gmp-place-type>
 
const{PlaceTypeElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceTypeElement
PlaceTypeElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceTypeElementOptions interface

google.maps.places.PlaceTypeElementOptions interface

Options for PlaceTypeElement.

PlacePriceElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a place's price level or price range. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-price></gmp-place-price>
 
const{PlacePriceElement}=awaitgoogle.maps.importLibrary("places");

Constructor
PlacePriceElement
PlacePriceElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlacePriceElementOptions interface

google.maps.places.PlacePriceElementOptions interface

Options for PlacePriceElement.

PlaceAccessibleEntranceIconElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show a wheelchair icon if the place has an accessible entrance. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceAccessibleEntranceIconElement
PlaceAccessibleEntranceIconElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceAccessibleEntranceIconElementOptions interface

google.maps.places.PlaceAccessibleEntranceIconElementOptions interface

Options for PlaceAccessibleEntranceIconElement.

PlaceOpenNowStatusElement class

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

Configures a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement to show the current open or closed status of a place. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceOpenNowStatusElement
PlaceOpenNowStatusElement([options])
Parameters:

Methods
Inherited: addEventListener , removeEventListener

PlaceOpenNowStatusElementOptions interface

google.maps.places.PlaceOpenNowStatusElementOptions interface

Options for PlaceOpenNowStatusElement.

PlaceReviewSummaryElement class

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

Configures a PlaceDetailsElement to show a place's review summary. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceReviewSummaryElementOptions interface

google.maps.places.PlaceReviewSummaryElementOptions interface

Options for PlaceReviewSummaryElement.

PlaceReviewsElement class

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

Configures a PlaceDetailsElement to show a place's reviews. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-reviews></gmp-place-reviews>
 
const{PlaceReviewsElement}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceReviewsElementOptions interface

google.maps.places.PlaceReviewsElementOptions interface

Options for PlaceReviewsElement.

PlaceSummaryElement class

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

Configures a PlaceDetailsElement to show a place's summary. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-summary></gmp-place-summary>
 
const{PlaceSummaryElement}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceSummaryElementOptions interface

google.maps.places.PlaceSummaryElementOptions interface

Options for PlaceSummaryElement.

PlaceFeatureListElement class

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

Configures a PlaceDetailsElement to show a place's feature list in the "About" tab. Feature list can include accessibility options, amenities, accepted payment methods, and more. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceFeatureListElementOptions interface

google.maps.places.PlaceFeatureListElementOptions interface

Options for PlaceFeatureListElement.

PlaceOpeningHoursElement class

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

Configures a PlaceDetailsElement to show a place's opening hours. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceOpeningHoursElementOptions interface

google.maps.places.PlaceOpeningHoursElementOptions interface

Options for PlaceOpeningHoursElement.

PlacePhoneNumberElement class

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

Configures a PlaceDetailsElement to show a place's phone number. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlacePhoneNumberElementOptions interface

google.maps.places.PlacePhoneNumberElementOptions interface

Options for PlacePhoneNumberElement.

PlacePlusCodeElement class

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

Configures a PlaceDetailsElement to show a place's plus code. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlacePlusCodeElementOptions interface

google.maps.places.PlacePlusCodeElementOptions interface

Options for PlacePlusCodeElement.

PlaceTypeSpecificHighlightsElement class

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

Configures a PlaceDetailsElement to show a place's type-specific highlights, such as gas prices and EV charger availability. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceTypeSpecificHighlightsElementOptions interface

google.maps.places.PlaceTypeSpecificHighlightsElementOptions interface

Options for PlaceTypeSpecificHighlightsElement.

PlaceWebsiteElement class

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

Configures a PlaceDetailsElement to show a place's website. Append this element as a child of a PlaceContentConfigElement to use it. For example: 

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

<gmp-place-website></gmp-place-website>
 
const{PlaceWebsiteElement}=awaitgoogle.maps.importLibrary("places");

Methods
Inherited: addEventListener , removeEventListener

PlaceWebsiteElementOptions interface

google.maps.places.PlaceWebsiteElementOptions interface

Options for PlaceWebsiteElement.

PlaceAttributionElement class

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

Allows customization of the Google Maps attribution text in a PlaceDetailsCompactElement , PlaceDetailsElement , or PlaceSearchElement . Append this element as a child of a PlaceContentConfigElement to use it. If this element is omitted, attribution will still be shown with default colors. For example: 

 <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}=awaitgoogle.maps.importLibrary("places");

Constructor
PlaceAttributionElement
PlaceAttributionElement([options])
Parameters:

Properties
darkSchemeColor
attr: dark-scheme-color
Input type: AttributionColor optional
Output type: AttributionColor
Default: AttributionColor.WHITE
The color of the Google Maps attribution in dark mode.
HTML attribute: dark-scheme-color="value-name"
lightSchemeColor
attr: light-scheme-color
Input type: AttributionColor optional
Output type: AttributionColor
Default: AttributionColor.GRAY
The color of the Google Maps attribution in light mode.
HTML attribute: light-scheme-color="value-name"

Methods
Inherited: addEventListener , removeEventListener

PlaceAttributionElementOptions interface

google.maps.places.PlaceAttributionElementOptions interface

Options for PlaceAttributionElement.

Properties
darkSchemeColor
optional
Type: AttributionColor optional
lightSchemeColor
optional
Type: AttributionColor optional

AttributionColor constants

google.maps.places.AttributionColor constants
library "places"

Color options for Google Maps attribution text. Attribution may be customized to use any of these colors.

These constants are also usable as strings. In TypeScript, the string literals are defined by the AttributionColorString type.

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

Constants
BLACK Black attribution text.
GRAY Gray attribution text.
WHITE White attribution text.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2026年09月01日 UTC.