diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/.eslintsrc.json b/dist/samples/ui-kit-advanced-place-details-compact/app/.eslintsrc.json
new file mode 100644
index 000000000..4c44dab04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/.eslintsrc.json
@@ -0,0 +1,13 @@
+{
+ "extends": [
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "rules": {
+ "@typescript-eslint/ban-ts-comment": 0,
+ "@typescript-eslint/no-this-alias": 1,
+ "@typescript-eslint/no-empty-function": 1,
+ "@typescript-eslint/explicit-module-boundary-types": 1,
+ "@typescript-eslint/no-unused-vars": 1
+ }
+}
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/README.md b/dist/samples/ui-kit-advanced-place-details-compact/app/README.md
new file mode 100644
index 000000000..7f54cf7e6
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/README.md
@@ -0,0 +1,35 @@
+# Google Maps JavaScript Sample
+
+## ui-kit-advanced-place-details-compact
+
+The ui-kit-advanced-place-details-compact sample demonstrates how to use the UI Kit for Place Details in a compact layout.
+
+Follow these instructions to set up and run ui-kit-advanced-place-details-compact sample on your local computer.
+
+## Setup
+
+### Before starting run:
+
+`$npm i`
+
+### Run an example on a local web server
+
+First `cd` to the folder for the sample to run, then:
+
+`$npm start`
+
+### Build an individual example
+
+From `samples/`:
+
+`$npm run build --workspace=ui-kit-advanced-place-details-compact/`
+
+### Build all of the examples.
+
+From `samples/`:
+`$npm run build-all`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/index.html b/dist/samples/ui-kit-advanced-place-details-compact/app/index.html
new file mode 100644
index 000000000..9479b2dab
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Place Details Compact with Google Maps
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/index.ts b/dist/samples/ui-kit-advanced-place-details-compact/app/index.ts
new file mode 100644
index 000000000..4aa756526
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/index.ts
@@ -0,0 +1,84 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_details_compact] */
+// Use querySelector to select elements for interaction.
+/* [START maps_ui_kit_advanced_place_details_compact_query_selector] */
+const map = document.querySelector('gmp-map')!;
+const placeDetails = document.querySelector<
+ HTMLElement & { place?: google.maps.places.Place }
+>('gmp-advanced-place-details-compact')!;
+const placeDetailsRequest = document.querySelector(
+ 'gmp-place-details-place-request'
+)!;
+const marker = document.querySelector(
+ 'gmp-advanced-marker'
+)!;
+/* [END maps_ui_kit_advanced_place_details_compact_query_selector] */
+async function init(): Promise {
+ // 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();
+ }
+ });
+
+ /* [START maps_ui_kit_advanced_place_details_compact_event] */
+ // 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.');
+ }
+ }
+ );
+}
+/* [END maps_ui_kit_advanced_place_details_compact_event] */
+void init();
+/* [END maps_ui_kit_advanced_place_details_compact] */
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/package.json b/dist/samples/ui-kit-advanced-place-details-compact/app/package.json
new file mode 100644
index 000000000..03ea2782f
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "@js-api-samples/ui-kit-advanced-place-details-compact",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "bash ../build-single.sh",
+ "test": "tsc && npm run build:vite --workspace=.",
+ "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js",
+ "build:vite": "vite build --config ../../vite.config.js --base './'",
+ "preview": "vite preview --config ../../vite.config.js"
+ },
+ "author": "Google LLC"
+}
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/style.css b/dist/samples/ui-kit-advanced-place-details-compact/app/style.css
new file mode 100644
index 000000000..1dbd2d4d4
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/style.css
@@ -0,0 +1,26 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_details_compact] */
+/*
+ * 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;
+}
+/* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/app/tsconfig.json b/dist/samples/ui-kit-advanced-place-details-compact/app/tsconfig.json
new file mode 100644
index 000000000..976bcc6ef
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/app/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "rootDir": "."
+ },
+ "include": ["./*.ts"]
+}
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CEzprmY2.css b/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CEzprmY2.css
new file mode 100644
index 000000000..e6be44830
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CEzprmY2.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0;padding:0}.container{width:100%;height:100vh;display:flex}gmp-map{flex-grow:1}
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CupoL2UV.js b/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CupoL2UV.js
new file mode 100644
index 000000000..db7437d04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CupoL2UV.js
@@ -0,0 +1 @@
+(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=document.querySelector(`gmp-map`),t=document.querySelector(`gmp-advanced-place-details-compact`),n=document.querySelector(`gmp-place-details-place-request`),r=document.querySelector(`gmp-advanced-marker`);async function i(){Promise.all([google.maps.importLibrary(`marker`),google.maps.importLibrary(`places`)]);let{InfoWindow:i}=await google.maps.importLibrary(`maps`);await window.customElements.whenDefined(`gmp-map`),e.innerMap.setOptions({mapTypeControl:!1,streetViewControl:!1}),await window.customElements.whenDefined(`gmp-advanced-marker`),r.collisionBehavior=`REQUIRED_AND_HIDES_OPTIONAL`;let a=new i;a.addListener(`close`,()=>{r.position=null});let o=()=>{a.isOpen||(a.setContent(t),a.open({anchor:r}))};t.addEventListener(`gmp-load`,()=>{!e.center&&t.place?.location&&(e.center=r.position=t.place.location,o())}),e.innerMap.addListener(`click`,e=>{e.stop(),`placeId`in e&&e.placeId?(r.position=e.latLng,n.setAttribute(`place`,`places/${e.placeId}`),o()):(r.position=null,n.removeAttribute(`place`),console.log(`No place was selected.`))})}i();
\ No newline at end of file
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/dist/index.html b/dist/samples/ui-kit-advanced-place-details-compact/dist/index.html
new file mode 100644
index 000000000..7469cf3b4
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/dist/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Place Details Compact with Google Maps
+
+
+
+
+
+
+