Place Widget Content Customization Stay organized with collections Save and categorize content based on your preferences.
PlaceContentConfigElementclass
google.maps.places.PlaceContentConfigElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
orPlaceSearchElement
to show a custom set of content. Append this element as a child to use it.
ForPlaceDetailsCompactElement
,PlaceDetailsElement
orPlaceSearchElement
, append any of the following elements to thePlaceContentConfigElement
to show the corresponding content:PlaceAddressElement
,PlaceAccessibleEntranceIconElement
,PlaceAttributionElement
PlaceMediaElement
,PlaceOpenNowStatusElement
,PlacePriceElement
,PlaceRatingElement
,PlaceTypeElement
.
Specific toPlaceDetailsElement
, you may also append any of the following elements:PlaceFeatureListElement
PlaceOpeningHoursElement
,PlacePhoneNumberElement
,PlacePlusCodeElement
,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>
Custom element:<gmp-place-content-config></gmp-place-content-config>
This class extendsHTMLElement
.
This class implementsPlaceContentConfigElementOptions
.
Access by callingconst {PlaceContentConfigElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceContentConfigElement | PlaceContentConfigElement([options]) Parameters:
|
PlaceContentConfigElementOptionsinterface
google.maps.places.PlaceContentConfigElementOptions
interface
Options forPlaceContentConfigElement
.
PlaceAllContentElementclass
google.maps.places.PlaceAllContentElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
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>
Custom element:<gmp-place-all-content></gmp-place-all-content>
This class extendsHTMLElement
.
This class implementsPlaceAllContentElementOptions
.
Access by callingconst {PlaceAllContentElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceAllContentElement | PlaceAllContentElement([options]) Parameters:
|
PlaceAllContentElementOptionsinterface
google.maps.places.PlaceAllContentElementOptions
interface
Options forPlaceAllContentElement
.
PlaceStandardContentElementclass
google.maps.places.PlaceStandardContentElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a standard set of content. Append this element as a child to use it.
ForPlaceDetailsElement
, 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>
Custom element:<gmp-place-standard-content></gmp-place-standard-content>
This class extendsHTMLElement
.
This class implementsPlaceStandardContentElementOptions
.
Access by callingconst {PlaceStandardContentElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceStandardContentElement | PlaceStandardContentElement([options]) Parameters:
|
PlaceStandardContentElementOptionsinterface
google.maps.places.PlaceStandardContentElementOptions
interface
Options forPlaceStandardContentElement
.
PlaceMediaElementclass
google.maps.places.PlaceMediaElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a place's media, such as photos. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
Custom element:<gmp-place-media lightbox-preferred preferred-size="small"></gmp-place-media>
This class extendsHTMLElement
.
This class implementsPlaceMediaElementOptions
.
Access by callingconst {PlaceMediaElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceMediaElement | PlaceMediaElement([options]) Parameters:
|
Properties | |
---|---|
lightboxPreferred | Type: booleanoptional Default: false Whether to enable or disable the media lightbox, in cases where both options are supported. HTML attribute:
|
preferredSize | Type: MediaSizeoptional Default: null The preferred media size in cases where multiple sizes are supported, such as the vertical PlaceSearchElement . The verticalPlaceSearchElement will useMediaSize.SMALL by default if this is not specified.HTML attribute:
|
PlaceMediaElementOptionsinterface
google.maps.places.PlaceMediaElementOptions
interface
Options forPlaceMediaElement
.
Properties | |
---|---|
lightboxPreferredoptional | Type: booleanoptional |
preferredSizeoptional | Type: MediaSizeoptional |
MediaSizeconstants
google.maps.places.MediaSize
constants
The preferred media size in cases where multiple sizes are supported, such as the verticalPlaceSearchElement
.
Access by callingconst {MediaSize} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constants | |
---|---|
LARGE | Large media size. |
MEDIUM | Medium media size. |
SMALL | Small media size. |
PlaceAddressElementclass
google.maps.places.PlaceAddressElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a place's address. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-address></gmp-place-address>
</gmp-place-content-config>
Custom element:<gmp-place-address></gmp-place-address>
This class extendsHTMLElement
.
This class implementsPlaceAddressElementOptions
.
Access by callingconst {PlaceAddressElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceAddressElement | PlaceAddressElement([options]) Parameters:
|
PlaceAddressElementOptionsinterface
google.maps.places.PlaceAddressElementOptions
interface
Options forPlaceAddressElement
.
PlaceRatingElementclass
google.maps.places.PlaceRatingElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a place's rating. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-rating></gmp-place-rating>
</gmp-place-content-config>
Custom element:<gmp-place-rating></gmp-place-rating>
This class extendsHTMLElement
.
This class implementsPlaceRatingElementOptions
.
Access by callingconst {PlaceRatingElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceRatingElement | PlaceRatingElement([options]) Parameters:
|
PlaceRatingElementOptionsinterface
google.maps.places.PlaceRatingElementOptions
interface
Options forPlaceRatingElement
.
PlaceTypeElementclass
google.maps.places.PlaceTypeElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a place's type. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-type></gmp-place-type>
</gmp-place-content-config>
Custom element:<gmp-place-type></gmp-place-type>
This class extendsHTMLElement
.
This class implementsPlaceTypeElementOptions
.
Access by callingconst {PlaceTypeElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceTypeElement | PlaceTypeElement([options]) Parameters:
|
PlaceTypeElementOptionsinterface
google.maps.places.PlaceTypeElementOptions
interface
Options forPlaceTypeElement
.
PlacePriceElementclass
google.maps.places.PlacePriceElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a place's price level or price range. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-price></gmp-place-price>
</gmp-place-content-config>
Custom element:<gmp-place-price></gmp-place-price>
This class extendsHTMLElement
.
This class implementsPlacePriceElementOptions
.
Access by callingconst {PlacePriceElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlacePriceElement | PlacePriceElement([options]) Parameters:
|
PlacePriceElementOptionsinterface
google.maps.places.PlacePriceElementOptions
interface
Options forPlacePriceElement
.
PlaceAccessibleEntranceIconElementclass
google.maps.places.PlaceAccessibleEntranceIconElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show a wheelchair icon if the place has an accessible entrance. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
</gmp-place-content-config>
Custom element:<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
This class extendsHTMLElement
.
This class implementsPlaceAccessibleEntranceIconElementOptions
.
Access by callingconst {PlaceAccessibleEntranceIconElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceAccessibleEntranceIconElement | PlaceAccessibleEntranceIconElement([options]) Parameters:
|
PlaceAccessibleEntranceIconElementOptionsinterface
google.maps.places.PlaceAccessibleEntranceIconElementOptions
interface
Options forPlaceAccessibleEntranceIconElement
.
PlaceOpenNowStatusElementclass
google.maps.places.PlaceOpenNowStatusElement
class
Configures aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
to show the current open or closed status of a place. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-open-now-status></gmp-place-open-now-status>
</gmp-place-content-config>
Custom element:<gmp-place-open-now-status></gmp-place-open-now-status>
This class extendsHTMLElement
.
This class implementsPlaceOpenNowStatusElementOptions
.
Access by callingconst {PlaceOpenNowStatusElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceOpenNowStatusElement | PlaceOpenNowStatusElement([options]) Parameters:
|
PlaceOpenNowStatusElementOptionsinterface
google.maps.places.PlaceOpenNowStatusElementOptions
interface
Options forPlaceOpenNowStatusElement
.
PlaceReviewsElementclass
google.maps.places.PlaceReviewsElement
class
Configures aPlaceDetailsElement
to show a place's reviews. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-reviews></gmp-place-reviews>
</gmp-place-content-config>
Custom element:<gmp-place-reviews></gmp-place-reviews>
This class extendsHTMLElement
.
This class implementsPlaceReviewsElementOptions
.
Access by callingconst {PlaceReviewsElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceReviewsElementOptionsinterface
google.maps.places.PlaceReviewsElementOptions
interface
Options forPlaceReviewsElement
.
PlaceSummaryElementclass
google.maps.places.PlaceSummaryElement
class
Configures aPlaceDetailsElement
to show a place's summary. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-summary></gmp-place-summary>
</gmp-place-content-config>
Custom element:<gmp-place-summary></gmp-place-summary>
This class extendsHTMLElement
.
This class implementsPlaceSummaryElementOptions
.
Access by callingconst {PlaceSummaryElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceSummaryElementOptionsinterface
google.maps.places.PlaceSummaryElementOptions
interface
Options forPlaceSummaryElement
.
PlaceFeatureListElementclass
google.maps.places.PlaceFeatureListElement
class
Configures aPlaceDetailsElement
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 aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-feature-list></gmp-place-feature-list>
</gmp-place-content-config>
Custom element:<gmp-place-feature-list></gmp-place-feature-list>
This class extendsHTMLElement
.
This class implementsPlaceFeatureListElementOptions
.
Access by callingconst {PlaceFeatureListElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceFeatureListElementOptionsinterface
google.maps.places.PlaceFeatureListElementOptions
interface
Options forPlaceFeatureListElement
.
PlaceOpeningHoursElementclass
google.maps.places.PlaceOpeningHoursElement
class
Configures aPlaceDetailsElement
to show a place's opening hours. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-opening-hours></gmp-place-opening-hours>
</gmp-place-content-config>
Custom element:<gmp-place-opening-hours></gmp-place-opening-hours>
This class extendsHTMLElement
.
This class implementsPlaceOpeningHoursElementOptions
.
Access by callingconst {PlaceOpeningHoursElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceOpeningHoursElementOptionsinterface
google.maps.places.PlaceOpeningHoursElementOptions
interface
Options forPlaceOpeningHoursElement
.
PlacePhoneNumberElementclass
google.maps.places.PlacePhoneNumberElement
class
Configures aPlaceDetailsElement
to show a place's phone number. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-phone-number></gmp-place-phone-number>
</gmp-place-content-config>
Custom element:<gmp-place-phone-number></gmp-place-phone-number>
This class extendsHTMLElement
.
This class implementsPlacePhoneNumberElementOptions
.
Access by callingconst {PlacePhoneNumberElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlacePhoneNumberElementOptionsinterface
google.maps.places.PlacePhoneNumberElementOptions
interface
Options forPlacePhoneNumberElement
.
PlacePlusCodeElementclass
google.maps.places.PlacePlusCodeElement
class
Configures aPlaceDetailsElement
to show a place's plus code. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-plus-code></gmp-place-plus-code>
</gmp-place-content-config>
Custom element:<gmp-place-plus-code></gmp-place-plus-code>
This class extendsHTMLElement
.
This class implementsPlacePlusCodeElementOptions
.
Access by callingconst {PlacePlusCodeElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlacePlusCodeElementOptionsinterface
google.maps.places.PlacePlusCodeElementOptions
interface
Options forPlacePlusCodeElement
.
PlaceTypeSpecificHighlightsElementclass
google.maps.places.PlaceTypeSpecificHighlightsElement
class
Configures aPlaceDetailsElement
to show a place's type-specific highlights, such as gas prices and EV charger availability. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
</gmp-place-content-config>
Custom element:<gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
This class extendsHTMLElement
.
This class implementsPlaceTypeSpecificHighlightsElementOptions
.
Access by callingconst {PlaceTypeSpecificHighlightsElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceTypeSpecificHighlightsElementOptionsinterface
google.maps.places.PlaceTypeSpecificHighlightsElementOptions
interface
Options forPlaceTypeSpecificHighlightsElement
.
PlaceWebsiteElementclass
google.maps.places.PlaceWebsiteElement
class
Configures aPlaceDetailsElement
to show a place's website. Append this element as a child of aPlaceContentConfigElement
to use it. For example:
<gmp-place-content-config>
<gmp-place-website></gmp-place-website>
</gmp-place-content-config>
Custom element:<gmp-place-website></gmp-place-website>
This class extendsHTMLElement
.
This class implementsPlaceWebsiteElementOptions
.
Access by callingconst {PlaceWebsiteElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
PlaceWebsiteElementOptionsinterface
google.maps.places.PlaceWebsiteElementOptions
interface
Options forPlaceWebsiteElement
.
PlaceAttributionElementclass
google.maps.places.PlaceAttributionElement
class
Allows customization of the Google Maps attribution text in aPlaceDetailsCompactElement
,PlaceDetailsElement
, orPlaceSearchElement
. Append this element as a child of aPlaceContentConfigElement
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>
Custom element:<gmp-place-attribution dark-scheme-color="white" light-scheme-color="white"></gmp-place-attribution>
This class extendsHTMLElement
.
This class implementsPlaceAttributionElementOptions
.
Access by callingconst {PlaceAttributionElement} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
Constructor | |
---|---|
PlaceAttributionElement | PlaceAttributionElement([options]) Parameters:
|
Properties | |
---|---|
darkSchemeColor | Type: AttributionColoroptional Default: AttributionColor.WHITE The color of the Google Maps attribution in dark mode. HTML attribute:
|
lightSchemeColor | Type: AttributionColoroptional Default: AttributionColor.GRAY The color of the Google Maps attribution in light mode. HTML attribute:
|
PlaceAttributionElementOptionsinterface
google.maps.places.PlaceAttributionElementOptions
interface
Options forPlaceAttributionElement
.
Properties | |
---|---|
darkSchemeColoroptional | Type: AttributionColoroptional |
lightSchemeColoroptional | Type: AttributionColoroptional |
AttributionColorconstants
google.maps.places.AttributionColor
constants
Color options for Google Maps attribution text. Attribution may be customized to use any of these colors.
Access by callingconst {AttributionColor} = await google.maps.importLibrary("places")
.
SeeLibraries in the Maps JavaScript API.
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 theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-18 UTC.