Get Started Contact sales

    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 .

     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.

     const 
  
 { 
 AttributionColor 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 );
    BLACK Black attribution text.
    GRAY Gray attribution text.
    WHITE White attribution text.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: