> [!NOTE]
> **Select the right component for your use case:**
>
> - [Place Details Element](https://developers.google.com/maps/documentation/javascript/places-ui-kit/place-details.md.txt) renders details such as opening hours, website, and reviews for a selected place. It is billed in the [Essentials tier](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt#places-ui-kit-essentials).
> - [Advanced Place Details Element](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-details.md.txt) extends the Place Details Element, letting you configure action buttons and apply search and filtering options to reviews and media. It is billed in the [Pro tier](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt#places-ui-kit).


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

- The [`PlaceDetailsElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsElement) supports all [visualizable Place data](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt), and may include multiple photos.
- The [`PlaceDetailsCompactElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsCompactElement) is designed to consume minimal space and display a concise set of information about a place, including name, address, rating, etc. It may also include a single photo.


Use the
[Customization tool](https://developers.google.com/maps/documentation/javascript/places-ui-kit/customization-tool.md.txt)
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.

## Place Details Element


Click a marker on the map to see its place details in a Place Details
Element.
<iframe src="https://maps-docs-team.web.app/samples/ui-kit-place-details/dist/" allow="fullscreen; "></iframe>


The
[`PlaceDetailsElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsElement)
supports a broad range of content elements, including full opening hours,
popular times, website, phone number,
[AI-powered summary](https://developers.google.com/maps/documentation/javascript/places-ui-kit/ai-powered-summaries-ui-kit.md.txt)
with fallback to editorial summary, type-specific highlights, reviews,
[AI-powered review summary](https://developers.google.com/maps/documentation/javascript/places-ui-kit/ai-powered-summaries-ui-kit.md.txt), plus code, and feature lists.


To display place details on a map, add a
`gmp-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](https://developers.google.com/maps/documentation/javascript/place.md.txt), a
[place ID](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt), or a Place's resource name:

```html
<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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
```

> [!TIP]
> **Tip:** You can find the place ID of a specific place using the [place ID finder](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt#find-id).

### Configure the content


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

```html
        <gmp-place-details>
            <gmp-place-details-place-request
                place="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-popular-times></gmp-place-popular-times>
            <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-details>
```


Each child content element selects a corresponding place detail to
display:
[`gmp-place-address`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceAddressElement)
selects the place's address,
[`gmp-place-price`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlacePriceElement)
selects the place's price level, etc. The elements
[`gmp-place-summary`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceSummaryElement)
and
[`gmp-place-review-summary`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceReviewSummaryElement)
provide an
[AI-powered](https://developers.google.com/maps/documentation/javascript/places-ui-kit/ai-powered-summaries-ui-kit.md.txt)
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. Only the content elements that you include are
displayed, so include `gmp-place-name` to show the place's
name.


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

- The [`gmp-place-media`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceMediaElement) 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`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceAttributionElement) element is used to display the source of the photo. 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](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt)
reference documentation for more information about all supported content
elements.


For simplicity, you can also use
[`gmp-place-all-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceAllContentElement)
to show all details available in the Place Details element, or
[`gmp-place-standard-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceStandardContentElement)
to display a standard configuration. Both of these elements include the
place's name.

> [!WARNING]
> **Deprecated:** The [`gmp-place-content-config`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceContentConfigElement) element is deprecated. Instead of nesting content elements inside `gmp-place-content-config`, add them directly to the `gmp-place-details` element, as shown in the preceding example. Existing code that uses `gmp-place-content-config` continues to work, but if the element also has content elements as direct children, `gmp-place-content-config` is ignored.

#### Popular times


The `gmp-place-popular-times` element displays popular times
and busyness information in the **Overview** tab below
opening hours:

- An interactive hourly busyness histogram for each day of the week, defaulting to the place's current local day.
- Current busyness status (live busyness when available, such as "Live: Busier than usual", or typical historical busyness) and typical wait time for the current hour.
- Peak wait time for the selected day, when available.


Popular times are included automatically when you use
`gmp-place-all-content` or
`gmp-place-standard-content` on a
`gmp-place-details` element, or you can include
`gmp-place-popular-times` as a direct child of
`gmp-place-details`. The
`gmp-place-popular-times` element is supported only in the full
`PlaceDetailsElement` and
`AdvancedPlaceDetailsElement` (not in
`PlaceDetailsCompactElement`,
`AdvancedPlaceDetailsCompactElement`, or the deprecated
`gmp-place-content-config` element).


Not all places have popular times data. If popular times data isn't
available for a place, the section is omitted without error. To check
whether popular times data was rendered, use the read-only
`rendered` property of the
`PlacePopularTimesElement` after the parent element fires the
`gmp-load` event:

```javascript
const detailsElement = document.querySelector('gmp-place-details');
const popularTimesElement = detailsElement.querySelector('gmp-place-popular-times');

detailsElement.addEventListener('gmp-load', () => {
  console.log('Popular times rendered:', popularTimesElement.rendered);
});
```


You can customize the colors of the popular times histogram bars and live
busyness indicator using the
`--gmp-popular-times-bar-color`,
`--gmp-popular-times-bar-current-hour-color`, and
`--gmp-popular-times-bar-current-hour-live-color` CSS
properties. See
[Places UI Kit Custom Styling](https://developers.google.com/maps/documentation/javascript/places-ui-kit/custom-styling.md.txt)
for details.

### Configure the appearance


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


The `gmp-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](https://developers.google.com/maps/documentation/javascript/places-ui-kit/custom-styling.md.txt)
for more details.

> [!IMPORTANT]
> **Important:** When making visual modifications, you must adhere to the [Attribution requirements](https://developers.google.com/maps/documentation/javascript/policies.md.txt).

### See the complete code example

### JavaScript

```javascript
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();
```

### CSS

```css
/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}
```

### HTML

```html
<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>
```

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-place-details/jsfiddle)

## Place Details Compact Element


Click a marker on the map to see its place details in a Place Details
Compact Element.
<iframe src="https://maps-docs-team.web.app/samples/ui-kit-place-details-compact/dist/" allow="fullscreen; "></iframe>


The
[`PlaceDetailsCompactElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsCompactElement)
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 `PlaceDetailsCompactElement` 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-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-place-details-compact` element contains a child element,
`gmp-place-details-place-request`, to select the place. This
can be a
[Place object](https://developers.google.com/maps/documentation/javascript/place.md.txt), a
[place ID](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt), or a Place's resource name.

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

> [!TIP]
> **Tip:** You can find the place ID of a specific place using the [place ID finder](https://developers.google.com/maps/documentation/places/web-service/place-id.md.txt#find-id).

### Configure the content


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

```html
<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-open-now-status></gmp-place-open-now-status>
  <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-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. Only the content
elements that you include are displayed, so include
`gmp-place-name` to show the place's name. Some of these
elements can be further configured using content-specific attributes.


See the
[Place Widget Content Customization](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt)
reference documentation for more information about all supported content
elements.


For simplicity, you can also use
[`gmp-place-all-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceAllContentElement)
to show all details available in the Place Details Compact element, or
[`gmp-place-standard-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceStandardContentElement)
to display a standard configuration. Both of these elements include the
place's name.

> [!WARNING]
> **Deprecated:** The [`gmp-place-content-config`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceContentConfigElement) element is deprecated. Add content elements directly to the `gmp-place-details-compact` element instead.

### Configure the appearance


The recommended width range for the
`gmp-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-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-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](https://developers.google.com/maps/documentation/javascript/places-ui-kit/custom-styling.md.txt)
for more details.

> [!IMPORTANT]
> **Important:** When making visual modifications, you must adhere to the [Attribution requirements](https://developers.google.com/maps/documentation/javascript/policies.md.txt).


Note that if the Place Details Compact element is added to an info window,
custom styling must be applied directly to the
`gmp-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.

```html
<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
```

### See a complete code example


This example demonstrates adding a
[`PlaceDetailsCompactElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#PlaceDetailsCompactElement)
to a map programmatically using an
[`InfoWindow`](https://developers.google.com/maps/documentation/javascript/reference/info-window.md.txt)
and an
[`AdvancedMarkerElement`](https://developers.google.com/maps/documentation/javascript/reference/marker.md.txt#AdvancedMarkerElement).  

### JavaScript

```javascript
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();
```

### CSS

```css
/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}
```

### HTML

```html
<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <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-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>
```

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/ui-kit-place-details-compact/jsfiddle)