> [!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 Advanced Place Details Element and Advanced Place Details Compact
Element are HTML elements that render details for a place:

- The [`AdvancedPlaceDetailsElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsElement) 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 [`AdvancedPlaceDetailsCompactElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsCompactElement) 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.


Both the Advanced Place Details Element and Advanced Place Details Compact
Element offer the same [advanced features](https://developers.google.com/maps/documentation/javascript/places-ui-kit/advanced-place-details.md.txt#advanced-features),
including customizing action buttons, omitting the place name, and
filtering reviews and media.


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.

## Advanced Place Details Element


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


The
[`AdvancedPlaceDetailsElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#AdvancedPlaceDetailsElement)
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-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](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-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>
```

> [!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-advanced-place-details` element by nesting child elements
to select and configure the place details, as shown in this example:

```html
        <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-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-attribution></gmp-place-attribution>
        </gmp-advanced-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.


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 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](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 Advanced Place Details element, or
with
[`gmp-place-standard-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceStandardContentElement)
to display a standard configuration.

#### 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-advanced-place-details` element, or you can include
`gmp-place-popular-times` as a direct child of
`gmp-advanced-place-details`. The
`gmp-place-popular-times` element is supported only in the full
`AdvancedPlaceDetailsElement` and
`PlaceDetailsElement` (not in
`AdvancedPlaceDetailsCompactElement` or
`PlaceDetailsCompactElement`).


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-advanced-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-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](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 a complete code example

### TypeScript

```typescript
// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${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();
```

### JavaScript

```javascript
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-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.setAttribute(
                'place',
                `places/${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",
                v: "beta"
            });
        </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-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-advanced-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-advanced-place-details/jsfiddle)

## Advanced Place Details Compact Element


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


The
[`AdvancedPlaceDetailsCompactElement`](https://developers.google.com/maps/documentation/javascript/reference/places-widget.md.txt#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](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-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>
```

> [!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-advanced-place-details-compact` element by nesting child
elements to select and configure the place details, as shown in this
snippet:

```html
<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](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 Advanced Place Details Compact
element, or with
[`gmp-place-standard-content`](https://developers.google.com/maps/documentation/javascript/reference/place-widget-child-elements.md.txt#PlaceStandardContentElement)
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](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 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.

```css
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;
}
```

### See a complete code example

### TypeScript

```typescript
// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

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

### JavaScript

```javascript
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-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 && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            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",
                v: "beta"
            });
        </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-advanced-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-advanced-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="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <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-advanced-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-advanced-place-details-compact/jsfiddle)

## 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`.

```html
<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](https://developers.google.com/maps/documentation/javascript/policies.md.txt#visual-requirements).

### Omit the Place name


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

```html
<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".

```html
<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.

```javascript
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);
});
```