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");

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

Methods
Inherited: `addEventListener`, `removeEventListener`

PlaceContentConfigElementOptions interface

google.maps.places.PlaceContentConfigElementOptions interface

Options for PlaceContentConfigElement.

PlaceAllContentElementOptions interface

google.maps.places.PlaceAllContentElementOptions interface

Options for PlaceAllContentElement.

PlaceStandardContentElementOptions interface

google.maps.places.PlaceStandardContentElementOptions interface

Options for PlaceStandardContentElement.

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");

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"`

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`

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");

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

PlaceAddressElementOptions interface

google.maps.places.PlaceAddressElementOptions interface

Options for PlaceAddressElement.

PlaceRatingElementOptions interface

google.maps.places.PlaceRatingElementOptions interface

Options for PlaceRatingElement.

PlaceTypeElementOptions interface

google.maps.places.PlaceTypeElementOptions interface

Options for PlaceTypeElement.

PlacePriceElementOptions interface

google.maps.places.PlacePriceElementOptions interface

Options for PlacePriceElement.

PlaceAccessibleEntranceIconElementOptions interface

google.maps.places.PlaceAccessibleEntranceIconElementOptions interface

Options for PlaceAccessibleEntranceIconElement.

PlaceOpenNowStatusElementOptions interface

google.maps.places.PlaceOpenNowStatusElementOptions interface

Options for PlaceOpenNowStatusElement.

PlaceReviewSummaryElementOptions interface

google.maps.places.PlaceReviewSummaryElementOptions interface

Options for PlaceReviewSummaryElement.

PlaceReviewsElementOptions interface

google.maps.places.PlaceReviewsElementOptions interface

Options for PlaceReviewsElement.

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");

Methods
Inherited: `addEventListener`, `removeEventListener`

PlaceFeatureListElementOptions interface

google.maps.places.PlaceFeatureListElementOptions interface

Options for PlaceFeatureListElement.

PlaceOpeningHoursElementOptions interface

google.maps.places.PlaceOpeningHoursElementOptions interface

Options for PlaceOpeningHoursElement.

PlacePhoneNumberElementOptions interface

google.maps.places.PlacePhoneNumberElementOptions interface

Options for PlacePhoneNumberElement.

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");

Methods
Inherited: `addEventListener`, `removeEventListener`

PlaceTypeSpecificHighlightsElementOptions interface

google.maps.places.PlaceTypeSpecificHighlightsElementOptions interface

Options for PlaceTypeSpecificHighlightsElement.

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");

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"`

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`

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");

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