Place Widget Content Customization

PlaceContentConfigElement class

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

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} = await google.maps.importLibrary("places");
PlaceContentConfigElement
PlaceContentConfigElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceContentConfigElementOptions interface

google.maps.places.PlaceContentConfigElementOptions interface

Options for PlaceContentConfigElement.

PlaceAllContentElement class

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

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} = await google.maps.importLibrary("places");
PlaceAllContentElement
PlaceAllContentElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceAllContentElementOptions interface

google.maps.places.PlaceAllContentElementOptions interface

Options for PlaceAllContentElement.

PlaceStandardContentElement class

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

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} = await google.maps.importLibrary("places");
PlaceStandardContentElement
PlaceStandardContentElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceStandardContentElementOptions interface

google.maps.places.PlaceStandardContentElementOptions interface

Options for PlaceStandardContentElement.

PlaceMediaElement class

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

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} = await google.maps.importLibrary("places");
PlaceMediaElement
PlaceMediaElement([options])
Parameters: 
lightboxPreferred
Type:  boolean optional
Default: false
Whether to enable or disable the media lightbox, in cases where both options are supported.
HTML attribute: lightbox-preferred
preferredSize
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"
Inherited: addEventListener, removeEventListener

PlaceMediaElementOptions interface

google.maps.places.PlaceMediaElementOptions interface

Options for PlaceMediaElement.
lightboxPreferred optional
Type:  boolean optional
See PlaceMediaElement.lightboxPreferred.
preferredSize optional
Type:  MediaSize optional
See PlaceMediaElement.preferredSize.

MediaSize constants

google.maps.places.MediaSize constants

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} = await google.maps.importLibrary("places");
LARGE Large media size.
MEDIUM Medium media size.
SMALL Small media size.

PlaceAddressElement class

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

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} = await google.maps.importLibrary("places");
PlaceAddressElement
PlaceAddressElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceAddressElementOptions interface

google.maps.places.PlaceAddressElementOptions interface

Options for PlaceAddressElement.

PlaceRatingElement class

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

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} = await google.maps.importLibrary("places");
PlaceRatingElement
PlaceRatingElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceRatingElementOptions interface

google.maps.places.PlaceRatingElementOptions interface

Options for PlaceRatingElement.

PlaceTypeElement class

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

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} = await google.maps.importLibrary("places");
PlaceTypeElement
PlaceTypeElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceTypeElementOptions interface

google.maps.places.PlaceTypeElementOptions interface

Options for PlaceTypeElement.

PlacePriceElement class

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

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} = await google.maps.importLibrary("places");
PlacePriceElement
PlacePriceElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlacePriceElementOptions interface

google.maps.places.PlacePriceElementOptions interface

Options for PlacePriceElement.

PlaceAccessibleEntranceIconElement class

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

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} = await google.maps.importLibrary("places");
PlaceAccessibleEntranceIconElement
PlaceAccessibleEntranceIconElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceAccessibleEntranceIconElementOptions interface

google.maps.places.PlaceAccessibleEntranceIconElementOptions interface

Options for PlaceAccessibleEntranceIconElement.

PlaceOpenNowStatusElement class

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

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} = await google.maps.importLibrary("places");
PlaceOpenNowStatusElement
PlaceOpenNowStatusElement([options])
Parameters: 
Inherited: addEventListener, removeEventListener

PlaceOpenNowStatusElementOptions interface

google.maps.places.PlaceOpenNowStatusElementOptions interface

Options for PlaceOpenNowStatusElement.

PlaceReviewSummaryElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceReviewSummaryElementOptions interface

google.maps.places.PlaceReviewSummaryElementOptions interface

Options for PlaceReviewSummaryElement.

PlaceReviewsElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceReviewsElementOptions interface

google.maps.places.PlaceReviewsElementOptions interface

Options for PlaceReviewsElement.

PlaceSummaryElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceSummaryElementOptions interface

google.maps.places.PlaceSummaryElementOptions interface

Options for PlaceSummaryElement.

PlaceFeatureListElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceFeatureListElementOptions interface

google.maps.places.PlaceFeatureListElementOptions interface

Options for PlaceFeatureListElement.

PlaceOpeningHoursElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceOpeningHoursElementOptions interface

google.maps.places.PlaceOpeningHoursElementOptions interface

Options for PlaceOpeningHoursElement.

PlacePhoneNumberElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlacePhoneNumberElementOptions interface

google.maps.places.PlacePhoneNumberElementOptions interface

Options for PlacePhoneNumberElement.

PlacePlusCodeElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlacePlusCodeElementOptions interface

google.maps.places.PlacePlusCodeElementOptions interface

Options for PlacePlusCodeElement.

PlaceTypeSpecificHighlightsElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceTypeSpecificHighlightsElementOptions interface

google.maps.places.PlaceTypeSpecificHighlightsElementOptions interface

Options for PlaceTypeSpecificHighlightsElement.

PlaceWebsiteElement class

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

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} = await google.maps.importLibrary("places");
Inherited: addEventListener, removeEventListener

PlaceWebsiteElementOptions interface

google.maps.places.PlaceWebsiteElementOptions interface

Options for PlaceWebsiteElement.

PlaceAttributionElement class

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

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} = await google.maps.importLibrary("places");
PlaceAttributionElement
PlaceAttributionElement([options])
Parameters: 
darkSchemeColor
Type:  AttributionColor optional
Default: AttributionColor.WHITE
The color of the Google Maps attribution in dark mode.
HTML attribute: dark-scheme-color="value-name"
lightSchemeColor
Type:  AttributionColor optional
Default: AttributionColor.GRAY
The color of the Google Maps attribution in light mode.
HTML attribute: light-scheme-color="value-name"
Inherited: addEventListener, removeEventListener

PlaceAttributionElementOptions interface

google.maps.places.PlaceAttributionElementOptions interface

Options for PlaceAttributionElement.
darkSchemeColor optional
Type:  AttributionColor optional
See PlaceAttributionElement.darkSchemeColor.
lightSchemeColor optional
Type:  AttributionColor optional
See PlaceAttributionElement.lightSchemeColor.

AttributionColor constants

google.maps.places.AttributionColor constants

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} = await google.maps.importLibrary("places");
BLACK Black attribution text.
GRAY Gray attribution text.
WHITE White attribution text.