Advanced Place Details Elements (preview)

The Advanced Place Details Element and Advanced Place Details Compact Element are HTML elements that render details for a place:

Both the Advanced Place Details Element and Advanced Place Details Compact Element offer the same advanced features, including customizing action buttons, omitting the place name, and filtering reviews and media.

Use the Customization tool to visualize how different sets of properties will affect the appearance of a Places Details element and access the code in HTML/CSS, Kotlin/XML, and Swift.

Advanced Place Details Element (preview)

Click a marker on the map to see its place details in an Advanced Place Details Element.

The AdvancedPlaceDetailsElement supports a broad range of content elements, including full opening hours, website, phone number, AI-powered summary with fallback to editorial summary, type-specific highlights, reviews, AI-powered review summary, plus code, and feature lists.

To display place details on a map, add a gmp-advanced-place-details element to the gmp-map element on the HTML page. Include a child element, gmp-place-details-place-request, to select the place. This can be a Place object, a place ID, or a Place's resource name: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Configure the content

You can control the specific place content displayed by the gmp-advanced-place-details element by nesting child elements to select and configure the place details, as shown in this example: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Each child content element selects a corresponding place detail to display: gmp-place-address selects the place's address, gmp-place-price selects the place's price level, etc. The elements gmp-place-summary and gmp-place-review-summary provide an AI-powered summary of the place and its reviews, respectively. The order of child elements is irrelevant, as the selected details are always rendered in a fixed predefined order.

Some of these elements can be further configured using content-specific attributes:

  • The gmp-place-media element is used to display a single photo, and includes a lightbox-preferred attribute that opens the photo in a lightbox when clicked. Lightbox is disabled by default.
  • The gmp-place-attribution element is used to display overarching Maps API data attribution configurations, such as the source of a photo or review. The light-scheme-color and dark-scheme-color attributes are used to set the color of the attribution text in light and dark mode.

See the Place Widget Content Customization reference documentation for more information about all supported content elements.

For simplicity, you can also use gmp-place-all-content to show all details available in the Advanced Place Details element, or with gmp-place-standard-content to display a standard configuration.

Configure the appearance

The recommended width range for the gmp-advanced-place-details element is 250px-400px. Widths less than 250px may not display correctly. Set the height to suit your application. The Advanced Place Details element is designed to scroll within the allotted space as needed.

The gmp-advanced-place-details element also supports a variety of custom CSS properties to configure the element's colors and fonts. See Places UI Kit Custom Styling for more details.

Advanced Place Details Compact Element (preview)

Click a marker on the map to see its place details in an Advanced Place Details Compact Element.

The AdvancedPlaceDetailsCompactElement renders details for a selected place using minimal space. This may be useful in an info window highlighting a place on a map, in a social media experience like sharing a location in a chat, as a suggestion for selecting your current location, or within a media article to reference the place on Google Maps. The AdvancedPlaceDetailsCompactElement can display name, address, rating, type, price, accessibility icon, open status, and a single photo. It can be displayed horizontally or vertically, as selected by the orientation attribute.

In the following snippet, gmp-advanced-place-details-compact is configured with orientation set to horizontal. An additional attribute, truncation-preferred, truncates certain content to fit on one line instead of wrapping. The gmp-advanced-place-details-compact element contains a child element, gmp-place-details-place-request, to select the place. This can be a Place object, a place ID, or a Place's resource name. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

Configure the content

You can control the specific place content displayed by the gmp-advanced-place-details-compact element by nesting child elements to select and configure the place details, as shown in this snippet: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

Each child content element selects a corresponding place detail to display. The order of child elements is irrelevant, as the selected details are always rendered in a fixed predefined order. Some of these elements can be further configured using content-specific attributes.

See the Place Widget Content Customization reference documentation for more information about all supported content elements.

For simplicity, you can also use gmp-place-all-content to show all details available in the Advanced Place Details Compact element, or with gmp-place-standard-content to display a standard configuration.

Configure the appearance

The recommended width range for the gmp-advanced-place-details-compact element in vertical orientation is 180px-300px. Widths less than 160px may not display correctly. Do not set a fixed height.

The recommended width range for the gmp-advanced-place-details-compact element in horizontal orientation is 180px-500px. Widths less than 160px may not display correctly. At widths less than 350px, the thumbnail image will not be shown. Do not set a fixed height.

The gmp-advanced-place-details-compact element also supports a variety of custom CSS properties to configure the element's colors and fonts. See Places UI Kit Custom Styling for more details.

Note that if the Advanced Place Details Compact element is added to an info window, custom styling must be applied directly to the gmp-advanced-place-details-compact element. This is because the info window is part of the map's shadow DOM, so external CSS styles will not be applied. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

This example demonstrates adding an AdvancedPlaceDetailsCompactElement to a map programmatically using an InfoWindow and an AdvancedMarkerElement.

Advanced features

Customize action buttons

Add action buttons as direct children of the Advanced Place Details component. Use <gmp-place-link> for standard navigational connections, and explicitly specify the action attribute. You can optionally specify the slot attribute. Valid predefined actions are open-website, open-directions, open-map, and call. If the slot attribute is omitted, it defaults to action-main. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Visual attribution requirements

Important: You must make it clear to end-users when a custom action button will share user information with a third party other than Google. See visual attribution requirements.

Omit the Place name

To omit the place name, explicitly exclude the <gmp-place-name> element from your custom content. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

Filter reviews and media

This code sample shows only media and reviews that mention "coffee".

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

You can also use JavaScript to retrieve the total number of items that match the given search query by reading the searchMediaCount and searchReviewsCount properties. You must wait for the gmp-load event before accessing these properties. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});