Place Widget Content Customization

PlaceContentConfigElement class

class google.maps.places.PlaceContentConfigElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceContentConfigElement	PlaceContentConfigElement([options]) Parameters: options: PlaceContentConfigElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceContentConfigElementOptions interface

interface google.maps.places.PlaceContentConfigElementOptions

Options for PlaceContentConfigElement.

PlaceAllContentElement class

class google.maps.places.PlaceAllContentElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceAllContentElement	PlaceAllContentElement([options]) Parameters: options: PlaceAllContentElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceAllContentElementOptions interface

interface google.maps.places.PlaceAllContentElementOptions

Options for PlaceAllContentElement.

PlaceStandardContentElement class

class google.maps.places.PlaceStandardContentElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceStandardContentElement	PlaceStandardContentElement([options]) Parameters: options: PlaceStandardContentElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceStandardContentElementOptions interface

interface google.maps.places.PlaceStandardContentElementOptions

Options for PlaceStandardContentElement.

PlaceMediaElement class

class google.maps.places.PlaceMediaElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceMediaElement	PlaceMediaElement([options]) Parameters: options: PlaceMediaElementOptions optional

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

interface google.maps.places.PlaceMediaElementOptions

Options for PlaceMediaElement.

Properties
lightboxPreferred optional	Type: boolean optional See PlaceMediaElement.lightboxPreferred.
preferredSize optional	Type: MediaSize optional See PlaceMediaElement.preferredSize.

MediaSize constants

constants google.maps.places.MediaSize
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} = await google.maps.importLibrary("places");

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

PlaceAddressElement class

class google.maps.places.PlaceAddressElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceAddressElement	PlaceAddressElement([options]) Parameters: options: PlaceAddressElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceAddressElementOptions interface

interface google.maps.places.PlaceAddressElementOptions

Options for PlaceAddressElement.

PlaceRatingElement class

class google.maps.places.PlaceRatingElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceRatingElement	PlaceRatingElement([options]) Parameters: options: PlaceRatingElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceRatingElementOptions interface

interface google.maps.places.PlaceRatingElementOptions

Options for PlaceRatingElement.

PlaceTypeElement class

class google.maps.places.PlaceTypeElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceTypeElement	PlaceTypeElement([options]) Parameters: options: PlaceTypeElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceTypeElementOptions interface

interface google.maps.places.PlaceTypeElementOptions

Options for PlaceTypeElement.

PlacePriceElement class

class google.maps.places.PlacePriceElement 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} = await google.maps.importLibrary("places");

Constructor
PlacePriceElement	PlacePriceElement([options]) Parameters: options: PlacePriceElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlacePriceElementOptions interface

interface google.maps.places.PlacePriceElementOptions

Options for PlacePriceElement.

PlaceAccessibleEntranceIconElement class

class google.maps.places.PlaceAccessibleEntranceIconElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceAccessibleEntranceIconElement	PlaceAccessibleEntranceIconElement([options]) Parameters: options: PlaceAccessibleEntranceIconElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceAccessibleEntranceIconElementOptions interface

interface google.maps.places.PlaceAccessibleEntranceIconElementOptions

Options for PlaceAccessibleEntranceIconElement.

PlaceOpenNowStatusElement class

class google.maps.places.PlaceOpenNowStatusElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceOpenNowStatusElement	PlaceOpenNowStatusElement([options]) Parameters: options: PlaceOpenNowStatusElementOptions optional

Methods
Inherited: addEventListener, removeEventListener

PlaceOpenNowStatusElementOptions interface

interface google.maps.places.PlaceOpenNowStatusElementOptions

Options for PlaceOpenNowStatusElement.

PlaceReviewSummaryElement class

class google.maps.places.PlaceReviewSummaryElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceReviewSummaryElementOptions interface

interface google.maps.places.PlaceReviewSummaryElementOptions

Options for PlaceReviewSummaryElement.

PlaceReviewsElement class

class google.maps.places.PlaceReviewsElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceReviewsElementOptions interface

interface google.maps.places.PlaceReviewsElementOptions

Options for PlaceReviewsElement.

PlaceSummaryElement class

class google.maps.places.PlaceSummaryElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceSummaryElementOptions interface

interface google.maps.places.PlaceSummaryElementOptions

Options for PlaceSummaryElement.

PlaceFeatureListElement class

class google.maps.places.PlaceFeatureListElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceFeatureListElementOptions interface

interface google.maps.places.PlaceFeatureListElementOptions

Options for PlaceFeatureListElement.

PlaceOpeningHoursElement class

class google.maps.places.PlaceOpeningHoursElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceOpeningHoursElementOptions interface

interface google.maps.places.PlaceOpeningHoursElementOptions

Options for PlaceOpeningHoursElement.

PlacePhoneNumberElement class

class google.maps.places.PlacePhoneNumberElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlacePhoneNumberElementOptions interface

interface google.maps.places.PlacePhoneNumberElementOptions

Options for PlacePhoneNumberElement.

PlacePlusCodeElement class

class google.maps.places.PlacePlusCodeElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlacePlusCodeElementOptions interface

interface google.maps.places.PlacePlusCodeElementOptions

Options for PlacePlusCodeElement.

PlaceTypeSpecificHighlightsElement class

class google.maps.places.PlaceTypeSpecificHighlightsElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceTypeSpecificHighlightsElementOptions interface

interface google.maps.places.PlaceTypeSpecificHighlightsElementOptions

Options for PlaceTypeSpecificHighlightsElement.

PlaceWebsiteElement class

class google.maps.places.PlaceWebsiteElement 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} = await google.maps.importLibrary("places");

Methods
Inherited: addEventListener, removeEventListener

PlaceWebsiteElementOptions interface

interface google.maps.places.PlaceWebsiteElementOptions

Options for PlaceWebsiteElement.

PlaceAttributionElement class

class google.maps.places.PlaceAttributionElement 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} = await google.maps.importLibrary("places");

Constructor
PlaceAttributionElement	PlaceAttributionElement([options]) Parameters: options: PlaceAttributionElementOptions optional

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

interface google.maps.places.PlaceAttributionElementOptions

Options for PlaceAttributionElement.

Properties
darkSchemeColor optional	Type: AttributionColor optional See PlaceAttributionElement.darkSchemeColor.
lightSchemeColor optional	Type: AttributionColor optional See PlaceAttributionElement.lightSchemeColor.

AttributionColor constants

constants google.maps.places.AttributionColor
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} = await google.maps.importLibrary("places");

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