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
    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"
    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
    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"
    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.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: