Get Started Contact sales

    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" 
 );
    PlaceContentConfigElement
    PlaceContentConfigElement([options])
    Parameters:
    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" 
 );
    PlaceAllContentElement
    PlaceAllContentElement([options])
    Parameters:
    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" 
 );
    PlaceStandardContentElement
    PlaceStandardContentElement([options])
    Parameters:
    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" 
 );
    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

    interface google.maps.places . PlaceMediaElementOptions

    Options for PlaceMediaElement .
    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" 
 );
    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" 
 );
    PlaceAddressElement
    PlaceAddressElement([options])
    Parameters:
    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" 
 );
    PlaceRatingElement
    PlaceRatingElement([options])
    Parameters:
    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" 
 );
    PlaceTypeElement
    PlaceTypeElement([options])
    Parameters:
    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" 
 );
    PlacePriceElement
    PlacePriceElement([options])
    Parameters:
    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" 
 );
    PlaceAccessibleEntranceIconElement
    PlaceAccessibleEntranceIconElement([options])
    Parameters:
    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" 
 );
    PlaceOpenNowStatusElement
    PlaceOpenNowStatusElement([options])
    Parameters:
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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" 
 );
    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

    interface google.maps.places . PlaceAttributionElementOptions

    Options for PlaceAttributionElement .
    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" 
 );
    BLACK Black attribution text.
    GRAY Gray attribution text.
    WHITE White attribution text.
    Design a Mobile Site
    View Site in Mobile | Classic
    Share by: