From 764a9abe93db14074b6efef7e1c646bbc6b503de Mon Sep 17 00:00:00 2001
From: googlemaps-bot <googlemaps-bot@google.com>
Date: Thu, 27 Aug 2026 20:39:12 +0000
Subject: [PATCH] Update dist folder [skip ci]

---
 dist/index.html                               |   5 +
 .../app/.eslintsrc.json                       |  13 ++
 .../app/README.md                             |  35 +++++
 .../app/index.html                            |  66 ++++++++
 .../app/index.ts                              |  84 +++++++++++
 .../app/package.json                          |  12 ++
 .../app/style.css                             |  26 ++++
 .../app/tsconfig.json                         |   7 +
 .../dist/assets/index-CEzprmY2.css            |   1 +
 .../dist/assets/index-CupoL2UV.js             |   1 +
 .../dist/index.html                           |  66 ++++++++
 .../docs/index.html                           |  66 ++++++++
 .../docs/index.js                             |  80 ++++++++++
 .../docs/index.ts                             |  84 +++++++++++
 .../docs/style.css                            |  26 ++++
 .../jsfiddle/demo.css                         |  25 ++++
 .../jsfiddle/demo.details                     |   7 +
 .../jsfiddle/demo.html                        |  61 ++++++++
 .../jsfiddle/demo.js                          |  78 ++++++++++
 .../app/.eslintsrc.json                       |  13 ++
 .../app/README.md                             |  35 +++++
 .../app/index.html                            |  54 +++++++
 .../app/index.ts                              |  74 +++++++++
 .../app/package.json                          |  12 ++
 .../app/style.css                             |  38 +++++
 .../app/tsconfig.json                         |   7 +
 .../dist/assets/index-BruqyFb5.css            |   1 +
 .../dist/assets/index-Ce4BbSc9.js             |   1 +
 .../dist/index.html                           |  54 +++++++
 .../docs/index.html                           |  54 +++++++
 .../docs/index.js                             |  68 +++++++++
 .../docs/index.ts                             |  74 +++++++++
 .../docs/style.css                            |  38 +++++
 .../jsfiddle/demo.css                         |  37 +++++
 .../jsfiddle/demo.details                     |   7 +
 .../jsfiddle/demo.html                        |  51 +++++++
 .../jsfiddle/demo.js                          |  63 ++++++++
 .../app/.eslintsrc.json                       |  13 ++
 .../ui-kit-advanced-place-list/app/README.md  |  41 +++++
 .../ui-kit-advanced-place-list/app/index.html |  34 +++++
 .../ui-kit-advanced-place-list/app/index.ts   |  25 ++++
 .../app/package.json                          |  12 ++
 .../ui-kit-advanced-place-list/app/style.css  |  14 ++
 .../app/tsconfig.json                         |   7 +
 .../dist/assets/index-71yeQ8Ss.css            |   1 +
 .../dist/assets/index-CQvm5kXq.js             |   1 +
 .../dist/index.html                           |  34 +++++
 .../docs/index.html                           |  34 +++++
 .../ui-kit-advanced-place-list/docs/index.js  |  26 ++++
 .../ui-kit-advanced-place-list/docs/index.ts  |  25 ++++
 .../ui-kit-advanced-place-list/docs/style.css |  14 ++
 .../jsfiddle/demo.css                         |  13 ++
 .../jsfiddle/demo.details                     |   7 +
 .../jsfiddle/demo.html                        |  33 ++++
 .../jsfiddle/demo.js                          |  24 +++
 .../app/.eslintsrc.json                       |  13 ++
 .../app/README.md                             |  35 +++++
 .../app/index.html                            |  83 +++++++++++
 .../app/index.ts                              | 134 +++++++++++++++++
 .../app/package.json                          |  12 ++
 .../app/style.css                             |  49 ++++++
 .../app/tsconfig.json                         |   7 +
 .../dist/assets/index-B6noFkXX.css            |   1 +
 .../dist/assets/index-D3_VQZrQ.js             |   1 +
 .../dist/index.html                           |  83 +++++++++++
 .../docs/index.html                           |  83 +++++++++++
 .../docs/index.js                             | 124 +++++++++++++++
 .../docs/index.ts                             | 134 +++++++++++++++++
 .../docs/style.css                            |  49 ++++++
 .../jsfiddle/demo.css                         |  47 ++++++
 .../jsfiddle/demo.details                     |   7 +
 .../jsfiddle/demo.html                        |  78 ++++++++++
 .../jsfiddle/demo.js                          | 117 +++++++++++++++
 .../app/.eslintsrc.json                       |  13 ++
 .../app/README.md                             |  35 +++++
 .../app/index.html                            |  81 ++++++++++
 .../app/index.ts                              | 141 ++++++++++++++++++
 .../app/package.json                          |  12 ++
 .../app/style.css                             |  73 +++++++++
 .../app/tsconfig.json                         |   7 +
 .../dist/assets/index-BTqMLNSS.css            |   1 +
 .../dist/assets/index-DM1-FnzU.js             |   1 +
 .../dist/index.html                           |  81 ++++++++++
 .../docs/index.html                           |  81 ++++++++++
 .../docs/index.js                             | 134 +++++++++++++++++
 .../docs/index.ts                             | 141 ++++++++++++++++++
 .../docs/style.css                            |  73 +++++++++
 .../jsfiddle/demo.css                         |  71 +++++++++
 .../jsfiddle/demo.details                     |   7 +
 .../jsfiddle/demo.html                        |  76 ++++++++++
 .../jsfiddle/demo.js                          | 127 ++++++++++++++++
 index.html                                    |   5 +
 package-lock.json                             |  10 --
 93 files changed, 3999 insertions(+), 10 deletions(-)
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/.eslintsrc.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/README.md
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/package.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/app/tsconfig.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CEzprmY2.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/dist/assets/index-CupoL2UV.js
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/dist/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/docs/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/docs/index.js
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/docs/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/docs/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.details
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.js
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/.eslintsrc.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/README.md
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/package.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details/app/tsconfig.json
 create mode 100644 dist/samples/ui-kit-advanced-place-details/dist/assets/index-BruqyFb5.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details/dist/assets/index-Ce4BbSc9.js
 create mode 100644 dist/samples/ui-kit-advanced-place-details/dist/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details/docs/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details/docs/index.js
 create mode 100644 dist/samples/ui-kit-advanced-place-details/docs/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-details/docs/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.css
 create mode 100644 dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.details
 create mode 100644 dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.html
 create mode 100644 dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.js
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/.eslintsrc.json
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/README.md
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/package.json
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-list/app/tsconfig.json
 create mode 100644 dist/samples/ui-kit-advanced-place-list/dist/assets/index-71yeQ8Ss.css
 create mode 100644 dist/samples/ui-kit-advanced-place-list/dist/assets/index-CQvm5kXq.js
 create mode 100644 dist/samples/ui-kit-advanced-place-list/dist/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-list/docs/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-list/docs/index.js
 create mode 100644 dist/samples/ui-kit-advanced-place-list/docs/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-list/docs/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.css
 create mode 100644 dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.details
 create mode 100644 dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.html
 create mode 100644 dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/.eslintsrc.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/README.md
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/package.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/app/tsconfig.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-B6noFkXX.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-D3_VQZrQ.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/dist/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/docs/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/docs/index.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/docs/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/docs/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.details
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/.eslintsrc.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/README.md
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/package.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/app/tsconfig.json
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-BTqMLNSS.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-DM1-FnzU.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/dist/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/docs/index.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/docs/index.js
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/docs/index.ts
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/docs/style.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.css
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.details
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.html
 create mode 100644 dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.js

diff --git a/dist/index.html b/dist/index.html
index 60d9dd653..e351a5435 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -149,6 +149,11 @@ <h1>Maps JSAPI Samples</h1>
   <li><a href='/samples/routes-route-matrix/dist'>routes-route-matrix</a></li>
   <li><a href='/samples/streetview-overlays/dist'>streetview-overlays</a></li>
   <li><a href='/samples/test-example/dist'>test-example</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-details/dist'>ui-kit-advanced-place-details</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-details-compact/dist'>ui-kit-advanced-place-details-compact</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-list/dist'>ui-kit-advanced-place-list</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-search-nearby/dist'>ui-kit-advanced-place-search-nearby</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-search-text/dist'>ui-kit-advanced-place-search-text</a></li>
   <li><a href='/samples/ui-kit-place-details/dist'>ui-kit-place-details</a></li>
   <li><a href='/samples/ui-kit-place-details-compact/dist'>ui-kit-place-details-compact</a></li>
   <li><a href='/samples/ui-kit-place-search-nearby/dist'>ui-kit-place-search-nearby</a></li>
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 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details_compact] -->
+<!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.
+        -->
+        <!--[START maps_ui_kit_advanced_place_details_compact_map_setup] -->
+        <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>
+            <!--[END maps_ui_kit_advanced_place_details_compact_map_setup] -->
+            <!--[START maps_ui_kit_advanced_place_details_compact_config] -->
+
+            <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>
+
+            <!--[END maps_ui_kit_advanced_place_details_compact_config] -->
+        </gmp-advanced-place-details-compact>
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details_compact] -->
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<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'
+)!;
+/* [END maps_ui_kit_advanced_place_details_compact_query_selector] */
+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();
+        }
+    });
+
+    /* [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 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details_compact] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Details Compact with Google Maps</title>
+        <meta charset="utf-8" />
+        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                v: "beta"
+            });
+        </script>
+      <script type="module" crossorigin src="./assets/index-CupoL2UV.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-CEzprmY2.css">
+    </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.
+        -->
+        <!--[START maps_ui_kit_advanced_place_details_compact_map_setup] -->
+        <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>
+            <!--[END maps_ui_kit_advanced_place_details_compact_map_setup] -->
+            <!--[START maps_ui_kit_advanced_place_details_compact_config] -->
+
+            <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>
+
+            <!--[END maps_ui_kit_advanced_place_details_compact_config] -->
+        </gmp-advanced-place-details-compact>
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details_compact] -->
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/docs/index.html b/dist/samples/ui-kit-advanced-place-details-compact/docs/index.html
new file mode 100644
index 000000000..9479b2dab
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/docs/index.html
@@ -0,0 +1,66 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details_compact] -->
+<!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.
+        -->
+        <!--[START maps_ui_kit_advanced_place_details_compact_map_setup] -->
+        <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>
+            <!--[END maps_ui_kit_advanced_place_details_compact_map_setup] -->
+            <!--[START maps_ui_kit_advanced_place_details_compact_config] -->
+
+            <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>
+
+            <!--[END maps_ui_kit_advanced_place_details_compact_config] -->
+        </gmp-advanced-place-details-compact>
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details_compact] -->
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/docs/index.js b/dist/samples/ui-kit-advanced-place-details-compact/docs/index.js
new file mode 100644
index 000000000..dc57cfa4c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/docs/index.js
@@ -0,0 +1,80 @@
+'use strict';
+/*
+ * @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(
+    '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() {
+    // 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) => {
+        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/docs/index.ts b/dist/samples/ui-kit-advanced-place-details-compact/docs/index.ts
new file mode 100644
index 000000000..4aa756526
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/docs/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<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'
+)!;
+/* [END maps_ui_kit_advanced_place_details_compact_query_selector] */
+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();
+        }
+    });
+
+    /* [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/docs/style.css b/dist/samples/ui-kit-advanced-place-details-compact/docs/style.css
new file mode 100644
index 000000000..1dbd2d4d4
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/docs/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/jsfiddle/demo.css b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.css
new file mode 100644
index 000000000..164bc3f4a
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.css
@@ -0,0 +1,25 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* 
+ * 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;
+}
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.details b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.details
new file mode 100644
index 000000000..e50f13673
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: ui-kit-advanced-place-details-compact
+authors:
+  - Geo Developer IX Documentation Team
+tags:
+  - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.html b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.html
new file mode 100644
index 000000000..e94e3e936
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.html
@@ -0,0 +1,61 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!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>
diff --git a/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.js b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.js
new file mode 100644
index 000000000..9754ce21d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details-compact/jsfiddle/demo.js
@@ -0,0 +1,78 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// 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();
diff --git a/dist/samples/ui-kit-advanced-place-details/app/.eslintsrc.json b/dist/samples/ui-kit-advanced-place-details/app/.eslintsrc.json
new file mode 100644
index 000000000..4c44dab04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/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/app/README.md b/dist/samples/ui-kit-advanced-place-details/app/README.md
new file mode 100644
index 000000000..1d24e870c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/app/README.md
@@ -0,0 +1,35 @@
+# Google Maps JavaScript Sample
+
+## ui-kit-advanced-place-details
+
+The ui-kit-advanced-place-details sample demonstrates how to use the UI Kit Place Details element.
+
+Follow these instructions to set up and run ui-kit-advanced-place-details 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/`
+
+### 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/app/index.html b/dist/samples/ui-kit-advanced-place-details/app/index.html
new file mode 100644
index 000000000..3559d8232
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/app/index.html
@@ -0,0 +1,54 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details] -->
+<!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>
+        <!--[START maps_ui_kit_advanced_place_details_map] -->
+        <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>
+        <!--[END maps_ui_kit_advanced_place_details_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details] -->
diff --git a/dist/samples/ui-kit-advanced-place-details/app/index.ts b/dist/samples/ui-kit-advanced-place-details/app/index.ts
new file mode 100644
index 000000000..c1491069c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/app/index.ts
@@ -0,0 +1,74 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_details] */
+
+// Use querySelector to select elements for interaction.
+/* [START maps_ui_kit_advanced_place_details_query_selector] */
+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'
+)!;
+/* [END maps_ui_kit_advanced_place_details_query_selector] */
+
+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();
+    });
+
+    /* [START maps_ui_kit_advanced_place_details_event] */
+    // 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';
+            }
+        }
+    );
+}
+/* [END maps_ui_kit_advanced_place_details_event] */
+
+void init();
+/* [END maps_ui_kit_advanced_place_details] */
diff --git a/dist/samples/ui-kit-advanced-place-details/app/package.json b/dist/samples/ui-kit-advanced-place-details/app/package.json
new file mode 100644
index 000000000..669725cc9
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/app/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@js-api-samples/ui-kit-advanced-place-details",
+  "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/app/style.css b/dist/samples/ui-kit-advanced-place-details/app/style.css
new file mode 100644
index 000000000..e25ed8162
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/app/style.css
@@ -0,0 +1,38 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_details] */
+/* 
+ * 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;
+}
+/* [END maps_ui_kit_place_details] */
diff --git a/dist/samples/ui-kit-advanced-place-details/app/tsconfig.json b/dist/samples/ui-kit-advanced-place-details/app/tsconfig.json
new file mode 100644
index 000000000..976bcc6ef
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/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/dist/assets/index-BruqyFb5.css b/dist/samples/ui-kit-advanced-place-details/dist/assets/index-BruqyFb5.css
new file mode 100644
index 000000000..e58cb92cd
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/dist/assets/index-BruqyFb5.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0;padding:0}.container{width:100%;height:100vh;display:flex}gmp-map{flex-grow:1}.ui-panel{width:400px;margin-top:10px;margin-left:20px}gmp-place-details{border:none;width:100%;margin:0}
diff --git a/dist/samples/ui-kit-advanced-place-details/dist/assets/index-Ce4BbSc9.js b/dist/samples/ui-kit-advanced-place-details/dist/assets/index-Ce4BbSc9.js
new file mode 100644
index 000000000..cc4fc3c68
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/dist/assets/index-Ce4BbSc9.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`),n=document.querySelector(`gmp-place-details-place-request`),r=document.querySelector(`gmp-advanced-marker`);async function i(){await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`marker`),google.maps.importLibrary(`places`)]),e.innerMap.setOptions({mapTypeControl:!1});let i=()=>{t.place?.location&&(e.innerMap.panTo(t.place.location),e.innerMap.setZoom(16),r.position=t.place.location,r.collisionBehavior=`REQUIRED_AND_HIDES_OPTIONAL`,r.style.display=`block`)};t.addEventListener(`gmp-load`,()=>{i()}),e.innerMap.addListener(`click`,e=>{r.position=null,e.stop(),`placeId`in e&&e.placeId?(n.setAttribute(`place`,`places/${e.placeId}`),i()):(console.log(`No place was selected.`),r.style.display=`none`)})}i();
\ No newline at end of file
diff --git a/dist/samples/ui-kit-advanced-place-details/dist/index.html b/dist/samples/ui-kit-advanced-place-details/dist/index.html
new file mode 100644
index 000000000..25b3f53a7
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/dist/index.html
@@ -0,0 +1,54 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Details with Google Maps</title>
+        <meta charset="utf-8" />
+        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                v: "beta"
+            });
+        </script>
+      <script type="module" crossorigin src="./assets/index-Ce4BbSc9.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-BruqyFb5.css">
+    </head>
+    <body>
+        <!--[START maps_ui_kit_advanced_place_details_map] -->
+        <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>
+        <!--[END maps_ui_kit_advanced_place_details_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details] -->
diff --git a/dist/samples/ui-kit-advanced-place-details/docs/index.html b/dist/samples/ui-kit-advanced-place-details/docs/index.html
new file mode 100644
index 000000000..3559d8232
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/docs/index.html
@@ -0,0 +1,54 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_details] -->
+<!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>
+        <!--[START maps_ui_kit_advanced_place_details_map] -->
+        <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>
+        <!--[END maps_ui_kit_advanced_place_details_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_details] -->
diff --git a/dist/samples/ui-kit-advanced-place-details/docs/index.js b/dist/samples/ui-kit-advanced-place-details/docs/index.js
new file mode 100644
index 000000000..9cc2948a8
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/docs/index.js
@@ -0,0 +1,68 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_details] */
+
+// Use querySelector to select elements for interaction.
+/* [START maps_ui_kit_advanced_place_details_query_selector] */
+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');
+/* [END maps_ui_kit_advanced_place_details_query_selector] */
+
+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();
+    });
+
+    /* [START maps_ui_kit_advanced_place_details_event] */
+    // 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';
+        }
+    });
+}
+/* [END maps_ui_kit_advanced_place_details_event] */
+
+void init();
+/* [END maps_ui_kit_advanced_place_details] */
diff --git a/dist/samples/ui-kit-advanced-place-details/docs/index.ts b/dist/samples/ui-kit-advanced-place-details/docs/index.ts
new file mode 100644
index 000000000..c1491069c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/docs/index.ts
@@ -0,0 +1,74 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_details] */
+
+// Use querySelector to select elements for interaction.
+/* [START maps_ui_kit_advanced_place_details_query_selector] */
+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'
+)!;
+/* [END maps_ui_kit_advanced_place_details_query_selector] */
+
+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();
+    });
+
+    /* [START maps_ui_kit_advanced_place_details_event] */
+    // 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';
+            }
+        }
+    );
+}
+/* [END maps_ui_kit_advanced_place_details_event] */
+
+void init();
+/* [END maps_ui_kit_advanced_place_details] */
diff --git a/dist/samples/ui-kit-advanced-place-details/docs/style.css b/dist/samples/ui-kit-advanced-place-details/docs/style.css
new file mode 100644
index 000000000..e25ed8162
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/docs/style.css
@@ -0,0 +1,38 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_details] */
+/* 
+ * 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;
+}
+/* [END maps_ui_kit_place_details] */
diff --git a/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.css b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.css
new file mode 100644
index 000000000..37990ffb4
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.css
@@ -0,0 +1,37 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* 
+ * 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;
+}
diff --git a/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.details b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.details
new file mode 100644
index 000000000..d60123596
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: ui-kit-advanced-place-details
+authors:
+  - Geo Developer IX Documentation Team
+tags:
+  - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.html b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.html
new file mode 100644
index 000000000..fff55b84d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.html
@@ -0,0 +1,51 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!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>
diff --git a/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.js b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.js
new file mode 100644
index 000000000..a018837a9
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-details/jsfiddle/demo.js
@@ -0,0 +1,63 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// 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();
diff --git a/dist/samples/ui-kit-advanced-place-list/app/.eslintsrc.json b/dist/samples/ui-kit-advanced-place-list/app/.eslintsrc.json
new file mode 100644
index 000000000..4c44dab04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/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-list/app/README.md b/dist/samples/ui-kit-advanced-place-list/app/README.md
new file mode 100644
index 000000000..5b22c7870
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/README.md
@@ -0,0 +1,41 @@
+# Google Maps JavaScript Sample
+
+## ui-kit-advanced-place-list
+
+Display a list of nearby places using advanced place elements.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/ui-kit-advanced-place-list`
+`npm start`
+
+### Build an individual example
+
+`cd samples/ui-kit-advanced-place-list`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=ui-kit-advanced-place-list/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/ui-kit-advanced-place-list`
+`npx eslint index.ts`
+
+## 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-list/app/index.html b/dist/samples/ui-kit-advanced-place-list/app/index.html
new file mode 100644
index 000000000..a58e4ac1d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/index.html
@@ -0,0 +1,34 @@
+<!--
+ @license
+ Copyright 2024 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_ui_kit_advanced_place_list] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Advanced Place List</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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>
+        <gmp-advanced-place-list
+            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
+            <template slot="details-item">
+                <gmp-place-name></gmp-place-name>
+                <gmp-place-address></gmp-place-address>
+                <gmp-place-media query="coffee"></gmp-place-media>
+            </template>
+        </gmp-advanced-place-list>
+    </body>
+</html>
+<!-- [END maps_ui_kit_advanced_place_list] -->
diff --git a/dist/samples/ui-kit-advanced-place-list/app/index.ts b/dist/samples/ui-kit-advanced-place-list/app/index.ts
new file mode 100644
index 000000000..9b5448aa1
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/index.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* [START maps_ui_kit_advanced_place_list] */
+async function init() {
+    await google.maps.importLibrary('places');
+    await customElements.whenDefined('gmp-advanced-place-list');
+    const listElement = document.querySelector('gmp-advanced-place-list');
+
+    if (listElement) {
+        listElement.addEventListener('gmp-error', (e: Event) => {
+            const customEvent = e as CustomEvent<{ errors?: unknown }>;
+            console.error(
+                'Failed to load places: ',
+                customEvent.detail.errors ?? customEvent
+            );
+        });
+    }
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_list] */
diff --git a/dist/samples/ui-kit-advanced-place-list/app/package.json b/dist/samples/ui-kit-advanced-place-list/app/package.json
new file mode 100644
index 000000000..f44f30217
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@js-api-samples/ui-kit-advanced-place-list",
+  "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-list/app/style.css b/dist/samples/ui-kit-advanced-place-list/app/style.css
new file mode 100644
index 000000000..4947df625
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/style.css
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_list] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Roboto, Arial, sans-serif;
+}
+/* [END maps_ui_kit_advanced_place_list] */
diff --git a/dist/samples/ui-kit-advanced-place-list/app/tsconfig.json b/dist/samples/ui-kit-advanced-place-list/app/tsconfig.json
new file mode 100644
index 000000000..976bcc6ef
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/app/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["./*.ts"]
+}
diff --git a/dist/samples/ui-kit-advanced-place-list/dist/assets/index-71yeQ8Ss.css b/dist/samples/ui-kit-advanced-place-list/dist/assets/index-71yeQ8Ss.css
new file mode 100644
index 000000000..40c4d449c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/dist/assets/index-71yeQ8Ss.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0;padding:0;font-family:Roboto,Arial,sans-serif}
diff --git a/dist/samples/ui-kit-advanced-place-list/dist/assets/index-CQvm5kXq.js b/dist/samples/ui-kit-advanced-place-list/dist/assets/index-CQvm5kXq.js
new file mode 100644
index 000000000..3cabb99c8
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/dist/assets/index-CQvm5kXq.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)}})();async function e(){await google.maps.importLibrary(`places`),await customElements.whenDefined(`gmp-advanced-place-list`);let e=document.querySelector(`gmp-advanced-place-list`);e&&e.addEventListener(`gmp-error`,e=>{let t=e;console.error(`Failed to load places: `,t.detail.errors??t)})}e();
\ No newline at end of file
diff --git a/dist/samples/ui-kit-advanced-place-list/dist/index.html b/dist/samples/ui-kit-advanced-place-list/dist/index.html
new file mode 100644
index 000000000..a50e8c122
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/dist/index.html
@@ -0,0 +1,34 @@
+<!--
+ @license
+ Copyright 2024 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_ui_kit_advanced_place_list] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Advanced Place List</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                v: "beta"
+            });
+        </script>
+      <script type="module" crossorigin src="./assets/index-CQvm5kXq.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-71yeQ8Ss.css">
+    </head>
+    <body>
+        <gmp-advanced-place-list
+            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
+            <template slot="details-item">
+                <gmp-place-name></gmp-place-name>
+                <gmp-place-address></gmp-place-address>
+                <gmp-place-media query="coffee"></gmp-place-media>
+            </template>
+        </gmp-advanced-place-list>
+    </body>
+</html>
+<!-- [END maps_ui_kit_advanced_place_list] -->
diff --git a/dist/samples/ui-kit-advanced-place-list/docs/index.html b/dist/samples/ui-kit-advanced-place-list/docs/index.html
new file mode 100644
index 000000000..a58e4ac1d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/docs/index.html
@@ -0,0 +1,34 @@
+<!--
+ @license
+ Copyright 2024 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_ui_kit_advanced_place_list] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Advanced Place List</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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>
+        <gmp-advanced-place-list
+            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
+            <template slot="details-item">
+                <gmp-place-name></gmp-place-name>
+                <gmp-place-address></gmp-place-address>
+                <gmp-place-media query="coffee"></gmp-place-media>
+            </template>
+        </gmp-advanced-place-list>
+    </body>
+</html>
+<!-- [END maps_ui_kit_advanced_place_list] -->
diff --git a/dist/samples/ui-kit-advanced-place-list/docs/index.js b/dist/samples/ui-kit-advanced-place-list/docs/index.js
new file mode 100644
index 000000000..2c0b6eb12
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/docs/index.js
@@ -0,0 +1,26 @@
+'use strict';
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* [START maps_ui_kit_advanced_place_list] */
+async function init() {
+    await google.maps.importLibrary('places');
+    await customElements.whenDefined('gmp-advanced-place-list');
+    const listElement = document.querySelector('gmp-advanced-place-list');
+
+    if (listElement) {
+        listElement.addEventListener('gmp-error', (e) => {
+            const customEvent = e;
+            console.error(
+                'Failed to load places: ',
+                customEvent.detail.errors ?? customEvent
+            );
+        });
+    }
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_list] */
diff --git a/dist/samples/ui-kit-advanced-place-list/docs/index.ts b/dist/samples/ui-kit-advanced-place-list/docs/index.ts
new file mode 100644
index 000000000..9b5448aa1
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/docs/index.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* [START maps_ui_kit_advanced_place_list] */
+async function init() {
+    await google.maps.importLibrary('places');
+    await customElements.whenDefined('gmp-advanced-place-list');
+    const listElement = document.querySelector('gmp-advanced-place-list');
+
+    if (listElement) {
+        listElement.addEventListener('gmp-error', (e: Event) => {
+            const customEvent = e as CustomEvent<{ errors?: unknown }>;
+            console.error(
+                'Failed to load places: ',
+                customEvent.detail.errors ?? customEvent
+            );
+        });
+    }
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_list] */
diff --git a/dist/samples/ui-kit-advanced-place-list/docs/style.css b/dist/samples/ui-kit-advanced-place-list/docs/style.css
new file mode 100644
index 000000000..4947df625
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/docs/style.css
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_list] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Roboto, Arial, sans-serif;
+}
+/* [END maps_ui_kit_advanced_place_list] */
diff --git a/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.css b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.css
new file mode 100644
index 000000000..01ff663ff
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.css
@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Roboto, Arial, sans-serif;
+}
diff --git a/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.details b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.details
new file mode 100644
index 000000000..b438d650e
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: ui-kit-advanced-place-list
+authors:
+  - Geo Developer IX Documentation Team
+tags:
+  - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.html b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.html
new file mode 100644
index 000000000..9187e1c35
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.html
@@ -0,0 +1,33 @@
+<!--
+ @license
+ Copyright 2024 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html>
+    <head>
+        <title>Advanced Place List</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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>
+        <gmp-advanced-place-list
+            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
+            <template slot="details-item">
+                <gmp-place-name></gmp-place-name>
+                <gmp-place-address></gmp-place-address>
+                <gmp-place-media query="coffee"></gmp-place-media>
+            </template>
+        </gmp-advanced-place-list>
+    </body>
+</html>
diff --git a/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.js b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.js
new file mode 100644
index 000000000..7a244cd65
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-list/jsfiddle/demo.js
@@ -0,0 +1,24 @@
+'use strict';
+/**
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+async function init() {
+    await google.maps.importLibrary('places');
+    await customElements.whenDefined('gmp-advanced-place-list');
+    const listElement = document.querySelector('gmp-advanced-place-list');
+
+    if (listElement) {
+        listElement.addEventListener('gmp-error', (e) => {
+            const customEvent = e;
+            console.error(
+                'Failed to load places: ',
+                customEvent.detail.errors ?? customEvent
+            );
+        });
+    }
+}
+
+void init();
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/app/.eslintsrc.json b/dist/samples/ui-kit-advanced-place-search-nearby/app/.eslintsrc.json
new file mode 100644
index 000000000..4c44dab04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/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-search-nearby/app/README.md b/dist/samples/ui-kit-advanced-place-search-nearby/app/README.md
new file mode 100644
index 000000000..5d1a561f9
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/README.md
@@ -0,0 +1,35 @@
+# Google Maps JavaScript Sample
+
+## ui-kit-advanced-place-search-nearby
+
+The ui-kit-advanced-place-search-nearby sample demonstrates using the Places UI Kit PlaceSearchElement.
+
+Follow these instructions to set up and run ui-kit-advanced-place-search-nearby 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-search-nearby/`
+
+### 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-search-nearby/app/index.html b/dist/samples/ui-kit-advanced-place-search-nearby/app/index.html
new file mode 100644
index 000000000..affa30d0b
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/index.html
@@ -0,0 +1,83 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_nearby] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Search Nearby 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>
+        <!--[START maps_ui_kit_advanced_place_search_nearby_map] -->
+
+        <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 center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </gmp-map>
+            <div class="ui-panel">
+                <div class="controls">
+                    <label for="type-select">
+                        Select a place type:
+                        <select id="type-select" class="type-select">
+                            <option value="restaurant">Restaurant</option>
+                            <option value="cafe" selected>Cafe</option>
+                            <option value="electric_vehicle_charging_station">
+                                EV charging station
+                            </option>
+                        </select>
+                    </label>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-nearby-search-request
+                            max-result-count="5"></gmp-place-nearby-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+        </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></gmp-place-details-place-request>
+
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_nearby_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_nearby] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/app/index.ts b/dist/samples/ui-kit-advanced-place-search-nearby/app/index.ts
new file mode 100644
index 000000000..287295a08
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/index.ts
@@ -0,0 +1,134 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_nearby] */
+
+/* [START maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
+const placeSearch = document.querySelector<
+    HTMLElement & { places?: google.maps.places.Place[] }
+>('gmp-advanced-place-search')!;
+const placeSearchQuery = document.querySelector<
+    HTMLElement & {
+        locationRestriction?: {
+            center: google.maps.LatLng | google.maps.LatLngLiteral;
+            radius: number;
+        };
+        includedTypes?: string[];
+    }
+>('gmp-place-nearby-search-request')!;
+const placeDetails = document.querySelector<HTMLElement>(
+    'gmp-advanced-place-details-compact'
+)!;
+const placeRequest = document.querySelector<
+    HTMLElement & { place?: google.maps.places.Place }
+>('gmp-place-details-place-request')!;
+const typeSelect = document.querySelector<HTMLSelectElement>('.type-select')!;
+/* [END maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
+let infoWindow: google.maps.InfoWindow;
+
+// The init function is called when the page loads.
+async function init(): Promise<void> {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_nearby_event] */
+    // Add event listeners to the type select and place search elements.
+    typeSelect.addEventListener('change', () => {
+        searchPlaces();
+    });
+
+    placeSearch.addEventListener('gmp-select', (event: Event) => {
+        const place = (event as Event & { place?: google.maps.places.Place })
+            .place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_event] */
+/* [START maps_ui_kit_advanced_place_search_nearby_function] */
+// The searchPlaces function is called when the user changes the type select or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (typeSelect.value) {
+        const center = map.center!;
+        placeSearchQuery.locationRestriction = {
+            center,
+            radius: 50000, // 50km radius
+        };
+        placeSearchQuery.includedTypes = [typeSelect.value];
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) continue;
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_nearby] */
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/app/package.json b/dist/samples/ui-kit-advanced-place-search-nearby/app/package.json
new file mode 100644
index 000000000..9c0fa33dc
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "@js-api-samples/ui-kit-advanced-place-search-nearby-nearby",
+    "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-search-nearby/app/style.css b/dist/samples/ui-kit-advanced-place-search-nearby/app/style.css
new file mode 100644
index 000000000..9b97bfd8c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/style.css
@@ -0,0 +1,49 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_nearby] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
+
+/* [END maps_ui_kit_place_search_nearby] */
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/app/tsconfig.json b/dist/samples/ui-kit-advanced-place-search-nearby/app/tsconfig.json
new file mode 100644
index 000000000..976bcc6ef
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/app/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["./*.ts"]
+}
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-B6noFkXX.css b/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-B6noFkXX.css
new file mode 100644
index 000000000..ae8245720
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-B6noFkXX.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0}body{flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}.container{width:100%;height:100vh;display:flex}gmp-map{flex-grow:1}.ui-panel{width:400px;margin-top:10px;margin-left:20px;font-family:Arial,Helvetica,sans-serif;overflow-y:auto}.list-container{flex-direction:column;display:flex}gmp-place-search{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;border:none;width:100%;margin:0}
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-D3_VQZrQ.js b/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-D3_VQZrQ.js
new file mode 100644
index 000000000..ab2179ba1
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/dist/assets/index-D3_VQZrQ.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-search`),n=document.querySelector(`gmp-place-nearby-search-request`),r=document.querySelector(`gmp-advanced-place-details-compact`),i=document.querySelector(`gmp-place-details-place-request`),a=document.querySelector(`.type-select`),o=new Map,s;async function c(){let[{InfoWindow:n}]=await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`places`)]);r.remove(),s=new n({content:r,ariaLabel:`Place Details`}),e.innerMap.setOptions({clickableIcons:!1,mapTypeControl:!1,streetViewControl:!1}),a.addEventListener(`change`,()=>{l()}),t.addEventListener(`gmp-select`,e=>{let t=e.place;t?.id&&o.get(t.id)?.click()}),t.addEventListener(`gmp-load`,()=>{u()}),l()}function l(){s.close();for(let e of o.values())e.remove();o.clear(),a.value&&(n.locationRestriction={center:e.center,radius:5e4},n.includedTypes=[a.value])}async function u(){let[{AdvancedMarkerElement:n},{LatLngBounds:r}]=await Promise.all([google.maps.importLibrary(`marker`),google.maps.importLibrary(`core`)]),a=new r;if(!(!t.places||t.places.length===0)){for(let r of t.places){if(!r.location)continue;let t=new n({map:e.innerMap,position:r.location,collisionBehavior:`REQUIRED_AND_HIDES_OPTIONAL`});o.set(r.id,t),a.extend(r.location),t.addListener(`click`,()=>{i.place=r,s.open(e.innerMap,t)})}e.innerMap.fitBounds(a)}}c();
\ No newline at end of file
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/dist/index.html b/dist/samples/ui-kit-advanced-place-search-nearby/dist/index.html
new file mode 100644
index 000000000..3e7757899
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/dist/index.html
@@ -0,0 +1,83 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_nearby] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Search Nearby with Google Maps</title>
+        <meta charset="utf-8" />
+        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                v: "beta"
+            });
+        </script>
+      <script type="module" crossorigin src="./assets/index-D3_VQZrQ.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-B6noFkXX.css">
+    </head>
+    <body>
+        <!--[START maps_ui_kit_advanced_place_search_nearby_map] -->
+
+        <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 center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </gmp-map>
+            <div class="ui-panel">
+                <div class="controls">
+                    <label for="type-select">
+                        Select a place type:
+                        <select id="type-select" class="type-select">
+                            <option value="restaurant">Restaurant</option>
+                            <option value="cafe" selected>Cafe</option>
+                            <option value="electric_vehicle_charging_station">
+                                EV charging station
+                            </option>
+                        </select>
+                    </label>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-nearby-search-request
+                            max-result-count="5"></gmp-place-nearby-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+        </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></gmp-place-details-place-request>
+
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_nearby_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_nearby] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.html b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.html
new file mode 100644
index 000000000..affa30d0b
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.html
@@ -0,0 +1,83 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_nearby] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Search Nearby 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>
+        <!--[START maps_ui_kit_advanced_place_search_nearby_map] -->
+
+        <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 center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </gmp-map>
+            <div class="ui-panel">
+                <div class="controls">
+                    <label for="type-select">
+                        Select a place type:
+                        <select id="type-select" class="type-select">
+                            <option value="restaurant">Restaurant</option>
+                            <option value="cafe" selected>Cafe</option>
+                            <option value="electric_vehicle_charging_station">
+                                EV charging station
+                            </option>
+                        </select>
+                    </label>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-nearby-search-request
+                            max-result-count="5"></gmp-place-nearby-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+        </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></gmp-place-details-place-request>
+
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_nearby_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_nearby] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.js b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.js
new file mode 100644
index 000000000..2434acd13
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.js
@@ -0,0 +1,124 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_nearby] */
+
+/* [START maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector('gmp-map');
+const placeSearch = document.querySelector('gmp-advanced-place-search');
+const placeSearchQuery = document.querySelector(
+    'gmp-place-nearby-search-request'
+);
+const placeDetails = document.querySelector(
+    'gmp-advanced-place-details-compact'
+);
+const placeRequest = document.querySelector('gmp-place-details-place-request');
+const typeSelect = document.querySelector('.type-select');
+/* [END maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map();
+let infoWindow;
+
+// The init function is called when the page loads.
+async function init() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_nearby_event] */
+    // Add event listeners to the type select and place search elements.
+    typeSelect.addEventListener('change', () => {
+        searchPlaces();
+    });
+
+    placeSearch.addEventListener('gmp-select', (event) => {
+        const place = event.place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_event] */
+/* [START maps_ui_kit_advanced_place_search_nearby_function] */
+// The searchPlaces function is called when the user changes the type select or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (typeSelect.value) {
+        const center = map.center;
+        placeSearchQuery.locationRestriction = {
+            center,
+            radius: 50000, // 50km radius
+        };
+        placeSearchQuery.includedTypes = [typeSelect.value];
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) continue;
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_nearby] */
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.ts b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.ts
new file mode 100644
index 000000000..287295a08
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/docs/index.ts
@@ -0,0 +1,134 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_nearby] */
+
+/* [START maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
+const placeSearch = document.querySelector<
+    HTMLElement & { places?: google.maps.places.Place[] }
+>('gmp-advanced-place-search')!;
+const placeSearchQuery = document.querySelector<
+    HTMLElement & {
+        locationRestriction?: {
+            center: google.maps.LatLng | google.maps.LatLngLiteral;
+            radius: number;
+        };
+        includedTypes?: string[];
+    }
+>('gmp-place-nearby-search-request')!;
+const placeDetails = document.querySelector<HTMLElement>(
+    'gmp-advanced-place-details-compact'
+)!;
+const placeRequest = document.querySelector<
+    HTMLElement & { place?: google.maps.places.Place }
+>('gmp-place-details-place-request')!;
+const typeSelect = document.querySelector<HTMLSelectElement>('.type-select')!;
+/* [END maps_ui_kit_advanced_place_search_nearby_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
+let infoWindow: google.maps.InfoWindow;
+
+// The init function is called when the page loads.
+async function init(): Promise<void> {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_nearby_event] */
+    // Add event listeners to the type select and place search elements.
+    typeSelect.addEventListener('change', () => {
+        searchPlaces();
+    });
+
+    placeSearch.addEventListener('gmp-select', (event: Event) => {
+        const place = (event as Event & { place?: google.maps.places.Place })
+            .place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_event] */
+/* [START maps_ui_kit_advanced_place_search_nearby_function] */
+// The searchPlaces function is called when the user changes the type select or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (typeSelect.value) {
+        const center = map.center!;
+        placeSearchQuery.locationRestriction = {
+            center,
+            radius: 50000, // 50km radius
+        };
+        placeSearchQuery.includedTypes = [typeSelect.value];
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_nearby_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) continue;
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_nearby] */
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/docs/style.css b/dist/samples/ui-kit-advanced-place-search-nearby/docs/style.css
new file mode 100644
index 000000000..9b97bfd8c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/docs/style.css
@@ -0,0 +1,49 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_nearby] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
+
+/* [END maps_ui_kit_place_search_nearby] */
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.css b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.css
new file mode 100644
index 000000000..b982d334d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.css
@@ -0,0 +1,47 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.details b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.details
new file mode 100644
index 000000000..d5f7ff9f8
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: ui-kit-advanced-place-search-nearby
+authors:
+  - Geo Developer IX Documentation Team
+tags:
+  - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.html b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.html
new file mode 100644
index 000000000..c1fc8354c
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.html
@@ -0,0 +1,78 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html>
+    <head>
+        <title>Place Search Nearby 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 center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </gmp-map>
+            <div class="ui-panel">
+                <div class="controls">
+                    <label for="type-select">
+                        Select a place type:
+                        <select id="type-select" class="type-select">
+                            <option value="restaurant">Restaurant</option>
+                            <option value="cafe" selected>Cafe</option>
+                            <option value="electric_vehicle_charging_station">
+                                EV charging station
+                            </option>
+                        </select>
+                    </label>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-nearby-search-request
+                            max-result-count="5"></gmp-place-nearby-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+        </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></gmp-place-details-place-request>
+
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
diff --git a/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.js b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.js
new file mode 100644
index 000000000..9df92b121
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-nearby/jsfiddle/demo.js
@@ -0,0 +1,117 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector('gmp-map');
+const placeSearch = document.querySelector('gmp-advanced-place-search');
+const placeSearchQuery = document.querySelector(
+    'gmp-place-nearby-search-request'
+);
+const placeDetails = document.querySelector(
+    'gmp-advanced-place-details-compact'
+);
+const placeRequest = document.querySelector('gmp-place-details-place-request');
+const typeSelect = document.querySelector('.type-select');
+
+// Global variables for the map, markers, and info window.
+const markers = new Map();
+let infoWindow;
+
+// The init function is called when the page loads.
+async function init() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    // Add event listeners to the type select and place search elements.
+    typeSelect.addEventListener('change', () => {
+        searchPlaces();
+    });
+
+    placeSearch.addEventListener('gmp-select', (event) => {
+        const place = event.place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+
+// The searchPlaces function is called when the user changes the type select or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (typeSelect.value) {
+        const center = map.center;
+        placeSearchQuery.locationRestriction = {
+            center,
+            radius: 50000, // 50km radius
+        };
+        placeSearchQuery.includedTypes = [typeSelect.value];
+    }
+}
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) continue;
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
diff --git a/dist/samples/ui-kit-advanced-place-search-text/app/.eslintsrc.json b/dist/samples/ui-kit-advanced-place-search-text/app/.eslintsrc.json
new file mode 100644
index 000000000..4c44dab04
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/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-search-text/app/README.md b/dist/samples/ui-kit-advanced-place-search-text/app/README.md
new file mode 100644
index 000000000..60ec6494e
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/README.md
@@ -0,0 +1,35 @@
+# Google Maps JavaScript Sample
+
+## ui-kit-place-search-text
+
+The ui-kit-place-search-text-compact sample demonstrates performing a text search using the Places UI Kit Place Search element.
+
+Follow these instructions to set up and run ui-kit-place-search-text 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-place-search-text/`
+
+### 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-search-text/app/index.html b/dist/samples/ui-kit-advanced-place-search-text/app/index.html
new file mode 100644
index 000000000..65e731c1d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/index.html
@@ -0,0 +1,81 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_text] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Text Search 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>
+        <!--[START maps_ui_kit_advanced_place_search_text_map] -->
+
+        <div class="container">
+            <div class="ui-panel">
+                <div class="controls">
+                    <input
+                        type="text"
+                        id="query-input"
+                        class="query-input"
+                        placeholder="Search for a place"
+                        value="cafe" />
+                    <button class="search-button">Search</button>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-text-search-request
+                            max-result-count="5"></gmp-place-text-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
+            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </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></gmp-place-details-place-request>
+
+            <gmp-place-name></gmp-place-name>
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_text_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_text] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-text/app/index.ts b/dist/samples/ui-kit-advanced-place-search-text/app/index.ts
new file mode 100644
index 000000000..1d16690fc
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/index.ts
@@ -0,0 +1,141 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_text] */
+
+/* [START maps_ui_kit_advanced_place_search_text_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
+const placeSearch = document.querySelector<
+    HTMLElement & { places?: google.maps.places.Place[] }
+>('gmp-advanced-place-search')!;
+const placeSearchQuery = document.querySelector<
+    HTMLElement & {
+        textQuery?: string;
+        locationBias?: google.maps.LatLng | google.maps.LatLngLiteral;
+    }
+>('gmp-place-text-search-request')!;
+const placeDetails = document.querySelector<HTMLElement>(
+    'gmp-advanced-place-details-compact'
+)!;
+const placeRequest = document.querySelector<
+    HTMLElement & { place?: google.maps.places.Place }
+>('gmp-place-details-place-request')!;
+const queryInput = document.querySelector<HTMLInputElement>('.query-input')!;
+const searchButton = document.querySelector<HTMLElement>('.search-button')!;
+/* [END maps_ui_kit_advanced_place_search_text_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
+let infoWindow: google.maps.InfoWindow;
+
+// The init function is called when the page loads.
+async function init(): Promise<void> {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_text_event] */
+    // Add event listeners to the query input and place search elements.
+    searchButton.addEventListener('click', () => {
+        searchPlaces();
+    });
+    queryInput.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            searchPlaces();
+        }
+    });
+
+    placeSearch.addEventListener('gmp-select', (event: Event) => {
+        const place = (event as Event & { place?: google.maps.places.Place })
+            .place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_text_event] */
+/* [START maps_ui_kit_advanced_place_search_text_function] */
+// The searchPlaces function is called when the user changes the query input or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (queryInput.value) {
+        const center = map.center;
+        if (center) {
+            placeSearchQuery.locationBias = center;
+        }
+        // The textQuery property is required for the search element to load.
+        // Any other configured properties will be ignored if textQuery is not set.
+        placeSearchQuery.textQuery = queryInput.value;
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_text_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) {
+            continue;
+        }
+
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_text] */
diff --git a/dist/samples/ui-kit-advanced-place-search-text/app/package.json b/dist/samples/ui-kit-advanced-place-search-text/app/package.json
new file mode 100644
index 000000000..7ee778f2f
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@js-api-samples/ui-kit-advanced-place-search-text",
+  "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-search-text/app/style.css b/dist/samples/ui-kit-advanced-place-search-text/app/style.css
new file mode 100644
index 000000000..d68006f19
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/style.css
@@ -0,0 +1,73 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_text] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
+
+.query-input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.search-button {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    background-color: #1a73e8;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.search-button:hover,
+.search-button:focus-visible {
+    background-color: #1765cc;
+}
+
+/* [END maps_ui_kit_place_search_text] */
diff --git a/dist/samples/ui-kit-advanced-place-search-text/app/tsconfig.json b/dist/samples/ui-kit-advanced-place-search-text/app/tsconfig.json
new file mode 100644
index 000000000..976bcc6ef
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/app/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["./*.ts"]
+}
diff --git a/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-BTqMLNSS.css b/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-BTqMLNSS.css
new file mode 100644
index 000000000..9aaeed585
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-BTqMLNSS.css
@@ -0,0 +1 @@
+html,body{height:100%;margin:0}body{flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}.container{width:100%;height:100vh;display:flex}gmp-map{flex-grow:1}.ui-panel{width:400px;margin-top:10px;margin-left:20px;margin-right:20px;font-family:Arial,Helvetica,sans-serif;overflow-y:auto}.list-container{flex-direction:column;display:flex}gmp-place-search{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;border:none;width:100%;margin:0}.query-input{box-sizing:border-box;width:100%;margin-bottom:10px;padding:8px}.search-button{box-sizing:border-box;color:#fff;cursor:pointer;background-color:#1a73e8;border:none;width:100%;margin-bottom:10px;padding:8px}.search-button:hover,.search-button:focus-visible{background-color:#1765cc}
diff --git a/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-DM1-FnzU.js b/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-DM1-FnzU.js
new file mode 100644
index 000000000..f8927a1fe
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/dist/assets/index-DM1-FnzU.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-search`),n=document.querySelector(`gmp-place-text-search-request`),r=document.querySelector(`gmp-advanced-place-details-compact`),i=document.querySelector(`gmp-place-details-place-request`),a=document.querySelector(`.query-input`),o=document.querySelector(`.search-button`),s=new Map,c;async function l(){let[{InfoWindow:n}]=await Promise.all([google.maps.importLibrary(`maps`),google.maps.importLibrary(`places`)]);r.remove(),c=new n({content:r,ariaLabel:`Place Details`}),e.innerMap.setOptions({clickableIcons:!1,mapTypeControl:!1,streetViewControl:!1}),o.addEventListener(`click`,()=>{u()}),a.addEventListener(`keydown`,e=>{e.key===`Enter`&&u()}),t.addEventListener(`gmp-select`,e=>{let t=e.place;t?.id&&s.get(t.id)?.click()}),t.addEventListener(`gmp-load`,()=>{d()}),u()}function u(){c.close();for(let e of s.values())e.remove();if(s.clear(),a.value){let t=e.center;t&&(n.locationBias=t),n.textQuery=a.value}}async function d(){let[{AdvancedMarkerElement:n},{LatLngBounds:r}]=await Promise.all([google.maps.importLibrary(`marker`),google.maps.importLibrary(`core`)]),a=new r;if(!(!t.places||t.places.length===0)){for(let r of t.places){if(!r.location)continue;let t=new n({map:e.innerMap,position:r.location,collisionBehavior:`REQUIRED_AND_HIDES_OPTIONAL`});s.set(r.id,t),a.extend(r.location),t.addListener(`click`,()=>{i.place=r,c.open(e.innerMap,t)})}e.innerMap.fitBounds(a)}}l();
\ No newline at end of file
diff --git a/dist/samples/ui-kit-advanced-place-search-text/dist/index.html b/dist/samples/ui-kit-advanced-place-search-text/dist/index.html
new file mode 100644
index 000000000..a1e3a7631
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/dist/index.html
@@ -0,0 +1,81 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_text] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Text Search with Google Maps</title>
+        <meta charset="utf-8" />
+        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                v: "beta"
+            });
+        </script>
+      <script type="module" crossorigin src="./assets/index-DM1-FnzU.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-BTqMLNSS.css">
+    </head>
+    <body>
+        <!--[START maps_ui_kit_advanced_place_search_text_map] -->
+
+        <div class="container">
+            <div class="ui-panel">
+                <div class="controls">
+                    <input
+                        type="text"
+                        id="query-input"
+                        class="query-input"
+                        placeholder="Search for a place"
+                        value="cafe" />
+                    <button class="search-button">Search</button>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-text-search-request
+                            max-result-count="5"></gmp-place-text-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
+            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </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></gmp-place-details-place-request>
+
+            <gmp-place-name></gmp-place-name>
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_text_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_text] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-text/docs/index.html b/dist/samples/ui-kit-advanced-place-search-text/docs/index.html
new file mode 100644
index 000000000..65e731c1d
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/docs/index.html
@@ -0,0 +1,81 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!--[START maps_ui_kit_advanced_place_search_text] -->
+<!doctype html>
+<html>
+    <head>
+        <title>Place Text Search 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>
+        <!--[START maps_ui_kit_advanced_place_search_text_map] -->
+
+        <div class="container">
+            <div class="ui-panel">
+                <div class="controls">
+                    <input
+                        type="text"
+                        id="query-input"
+                        class="query-input"
+                        placeholder="Search for a place"
+                        value="cafe" />
+                    <button class="search-button">Search</button>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-text-search-request
+                            max-result-count="5"></gmp-place-text-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
+            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </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></gmp-place-details-place-request>
+
+            <gmp-place-name></gmp-place-name>
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
+
+        <!--[END maps_ui_kit_advanced_place_search_text_map] -->
+    </body>
+</html>
+<!--[END maps_ui_kit_advanced_place_search_text] -->
diff --git a/dist/samples/ui-kit-advanced-place-search-text/docs/index.js b/dist/samples/ui-kit-advanced-place-search-text/docs/index.js
new file mode 100644
index 000000000..3e3d25a79
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/docs/index.js
@@ -0,0 +1,134 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_text] */
+
+/* [START maps_ui_kit_advanced_place_search_text_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector('gmp-map');
+const placeSearch = document.querySelector('gmp-advanced-place-search');
+const placeSearchQuery = document.querySelector(
+    'gmp-place-text-search-request'
+);
+const placeDetails = document.querySelector(
+    'gmp-advanced-place-details-compact'
+);
+const placeRequest = document.querySelector('gmp-place-details-place-request');
+const queryInput = document.querySelector('.query-input');
+const searchButton = document.querySelector('.search-button');
+/* [END maps_ui_kit_advanced_place_search_text_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map();
+let infoWindow;
+
+// The init function is called when the page loads.
+async function init() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_text_event] */
+    // Add event listeners to the query input and place search elements.
+    searchButton.addEventListener('click', () => {
+        searchPlaces();
+    });
+    queryInput.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            searchPlaces();
+        }
+    });
+
+    placeSearch.addEventListener('gmp-select', (event) => {
+        const place = event.place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_text_event] */
+/* [START maps_ui_kit_advanced_place_search_text_function] */
+// The searchPlaces function is called when the user changes the query input or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (queryInput.value) {
+        const center = map.center;
+        if (center) {
+            placeSearchQuery.locationBias = center;
+        }
+        // The textQuery property is required for the search element to load.
+        // Any other configured properties will be ignored if textQuery is not set.
+        placeSearchQuery.textQuery = queryInput.value;
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_text_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) {
+            continue;
+        }
+
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_text] */
diff --git a/dist/samples/ui-kit-advanced-place-search-text/docs/index.ts b/dist/samples/ui-kit-advanced-place-search-text/docs/index.ts
new file mode 100644
index 000000000..1d16690fc
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/docs/index.ts
@@ -0,0 +1,141 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_advanced_place_search_text] */
+
+/* [START maps_ui_kit_advanced_place_search_text_query_selectors] */
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
+const placeSearch = document.querySelector<
+    HTMLElement & { places?: google.maps.places.Place[] }
+>('gmp-advanced-place-search')!;
+const placeSearchQuery = document.querySelector<
+    HTMLElement & {
+        textQuery?: string;
+        locationBias?: google.maps.LatLng | google.maps.LatLngLiteral;
+    }
+>('gmp-place-text-search-request')!;
+const placeDetails = document.querySelector<HTMLElement>(
+    'gmp-advanced-place-details-compact'
+)!;
+const placeRequest = document.querySelector<
+    HTMLElement & { place?: google.maps.places.Place }
+>('gmp-place-details-place-request')!;
+const queryInput = document.querySelector<HTMLInputElement>('.query-input')!;
+const searchButton = document.querySelector<HTMLElement>('.search-button')!;
+/* [END maps_ui_kit_advanced_place_search_text_query_selectors] */
+
+// Global variables for the map, markers, and info window.
+const markers = new Map<string, google.maps.marker.AdvancedMarkerElement>();
+let infoWindow: google.maps.InfoWindow;
+
+// The init function is called when the page loads.
+async function init(): Promise<void> {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    /* [START maps_ui_kit_advanced_place_search_text_event] */
+    // Add event listeners to the query input and place search elements.
+    searchButton.addEventListener('click', () => {
+        searchPlaces();
+    });
+    queryInput.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            searchPlaces();
+        }
+    });
+
+    placeSearch.addEventListener('gmp-select', (event: Event) => {
+        const place = (event as Event & { place?: google.maps.places.Place })
+            .place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+/* [END maps_ui_kit_advanced_place_search_text_event] */
+/* [START maps_ui_kit_advanced_place_search_text_function] */
+// The searchPlaces function is called when the user changes the query input or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (queryInput.value) {
+        const center = map.center;
+        if (center) {
+            placeSearchQuery.locationBias = center;
+        }
+        // The textQuery property is required for the search element to load.
+        // Any other configured properties will be ignored if textQuery is not set.
+        placeSearchQuery.textQuery = queryInput.value;
+    }
+}
+/* [END maps_ui_kit_advanced_place_search_text_function] */
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) {
+            continue;
+        }
+
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
+/* [END maps_ui_kit_advanced_place_search_text] */
diff --git a/dist/samples/ui-kit-advanced-place-search-text/docs/style.css b/dist/samples/ui-kit-advanced-place-search-text/docs/style.css
new file mode 100644
index 000000000..d68006f19
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/docs/style.css
@@ -0,0 +1,73 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_ui_kit_place_search_text] */
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
+
+.query-input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.search-button {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    background-color: #1a73e8;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.search-button:hover,
+.search-button:focus-visible {
+    background-color: #1765cc;
+}
+
+/* [END maps_ui_kit_place_search_text] */
diff --git a/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.css b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.css
new file mode 100644
index 000000000..6838e3928
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.css
@@ -0,0 +1,71 @@
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+    display: flex;
+    height: 100vh;
+    width: 100%;
+}
+
+gmp-map {
+    flex-grow: 1;
+}
+
+.ui-panel {
+    width: 400px;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    overflow-y: auto;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.list-container {
+    display: flex;
+    flex-direction: column;
+}
+
+gmp-place-search {
+    width: 100%;
+    margin: 0;
+    border: none;
+    color-scheme: light;
+}
+
+.query-input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.search-button {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    background-color: #1a73e8;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.search-button:hover,
+.search-button:focus-visible {
+    background-color: #1765cc;
+}
diff --git a/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.details b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.details
new file mode 100644
index 000000000..c3718d0a3
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: ui-kit-advanced-place-search-text
+authors:
+  - Geo Developer IX Documentation Team
+tags:
+  - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.html b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.html
new file mode 100644
index 000000000..be3d7db47
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.html
@@ -0,0 +1,76 @@
+<!--
+ @license
+ Copyright 2026 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html>
+    <head>
+        <title>Place Text Search 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">
+            <div class="ui-panel">
+                <div class="controls">
+                    <input
+                        type="text"
+                        id="query-input"
+                        class="query-input"
+                        placeholder="Search for a place"
+                        value="cafe" />
+                    <button class="search-button">Search</button>
+                </div>
+                <div class="list-container">
+                    <gmp-advanced-place-search selectable>
+                        <gmp-place-all-content></gmp-place-all-content>
+                        <gmp-place-text-search-request
+                            max-result-count="5"></gmp-place-text-search-request>
+                    </gmp-advanced-place-search>
+                </div>
+            </div>
+            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
+            <gmp-map center="-37.813,144.963" zoom="16" map-id="DEMO_MAP_ID">
+            </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></gmp-place-details-place-request>
+
+            <gmp-place-name></gmp-place-name>
+            <gmp-place-media></gmp-place-media>
+            <gmp-place-rating></gmp-place-rating>
+            <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>
diff --git a/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.js b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.js
new file mode 100644
index 000000000..75408ddeb
--- /dev/null
+++ b/dist/samples/ui-kit-advanced-place-search-text/jsfiddle/demo.js
@@ -0,0 +1,127 @@
+'use strict';
+/*
+ * @license
+ * Copyright 2026 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Query selectors for various elements in the HTML file.
+const map = document.querySelector('gmp-map');
+const placeSearch = document.querySelector('gmp-advanced-place-search');
+const placeSearchQuery = document.querySelector(
+    'gmp-place-text-search-request'
+);
+const placeDetails = document.querySelector(
+    'gmp-advanced-place-details-compact'
+);
+const placeRequest = document.querySelector('gmp-place-details-place-request');
+const queryInput = document.querySelector('.query-input');
+const searchButton = document.querySelector('.search-button');
+
+// Global variables for the map, markers, and info window.
+const markers = new Map();
+let infoWindow;
+
+// The init function is called when the page loads.
+async function init() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ InfoWindow }] = await Promise.all([
+        google.maps.importLibrary('maps'),
+        google.maps.importLibrary('places'),
+    ]);
+
+    // Create a new info window and set its content to the place details element.
+    placeDetails.remove(); // Hide the place details element because it is not needed until the info window opens
+    infoWindow = new InfoWindow({
+        content: placeDetails,
+        ariaLabel: 'Place Details',
+    });
+
+    // Set the map options.
+    map.innerMap.setOptions({
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+
+    // Add event listeners to the query input and place search elements.
+    searchButton.addEventListener('click', () => {
+        searchPlaces();
+    });
+    queryInput.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            searchPlaces();
+        }
+    });
+
+    placeSearch.addEventListener('gmp-select', (event) => {
+        const place = event.place;
+        if (place?.id) {
+            markers.get(place.id)?.click();
+        }
+    });
+    placeSearch.addEventListener('gmp-load', () => {
+        void addMarkers();
+    });
+
+    searchPlaces();
+}
+
+// The searchPlaces function is called when the user changes the query input or when the page loads.
+function searchPlaces() {
+    // Close the info window and clear the markers.
+    infoWindow.close();
+    for (const marker of markers.values()) {
+        marker.remove();
+    }
+    markers.clear();
+
+    // Set the place search query and add an event listener to the place search element.
+    if (queryInput.value) {
+        const center = map.center;
+        if (center) {
+            placeSearchQuery.locationBias = center;
+        }
+        // The textQuery property is required for the search element to load.
+        // Any other configured properties will be ignored if textQuery is not set.
+        placeSearchQuery.textQuery = queryInput.value;
+    }
+}
+
+// The addMarkers function is called when the place search element loads.
+async function addMarkers() {
+    // Import the necessary libraries from the Google Maps API.
+    const [{ AdvancedMarkerElement }, { LatLngBounds }] = await Promise.all([
+        google.maps.importLibrary('marker'),
+        google.maps.importLibrary('core'),
+    ]);
+    const bounds = new LatLngBounds();
+
+    if (!placeSearch.places || placeSearch.places.length === 0) {
+        return;
+    }
+
+    for (const place of placeSearch.places) {
+        if (!place.location) {
+            continue;
+        }
+
+        const marker = new AdvancedMarkerElement({
+            map: map.innerMap,
+            position: place.location,
+            collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
+        });
+
+        markers.set(place.id, marker);
+        bounds.extend(place.location);
+
+        marker.addListener('click', () => {
+            placeRequest.place = place;
+            infoWindow.open(map.innerMap, marker);
+        });
+    }
+
+    map.innerMap.fitBounds(bounds);
+}
+
+void init();
diff --git a/index.html b/index.html
index 60d9dd653..e351a5435 100644
--- a/index.html
+++ b/index.html
@@ -149,6 +149,11 @@ <h1>Maps JSAPI Samples</h1>
   <li><a href='/samples/routes-route-matrix/dist'>routes-route-matrix</a></li>
   <li><a href='/samples/streetview-overlays/dist'>streetview-overlays</a></li>
   <li><a href='/samples/test-example/dist'>test-example</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-details/dist'>ui-kit-advanced-place-details</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-details-compact/dist'>ui-kit-advanced-place-details-compact</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-list/dist'>ui-kit-advanced-place-list</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-search-nearby/dist'>ui-kit-advanced-place-search-nearby</a></li>
+  <li><a href='/samples/ui-kit-advanced-place-search-text/dist'>ui-kit-advanced-place-search-text</a></li>
   <li><a href='/samples/ui-kit-place-details/dist'>ui-kit-place-details</a></li>
   <li><a href='/samples/ui-kit-place-details-compact/dist'>ui-kit-place-details-compact</a></li>
   <li><a href='/samples/ui-kit-place-search-nearby/dist'>ui-kit-place-search-nearby</a></li>
diff --git a/package-lock.json b/package-lock.json
index f9e9fdf46..748549fc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6360,16 +6360,6 @@
       "name": "@js-api-samples/ui-kit-place-details-compact",
       "version": "1.0.0"
     },
-    "samples/ui-kit-place-details-demo": {
-      "name": "@js-api-samples/ui-kit-place-details-demo",
-      "version": "1.0.0",
-      "extraneous": true,
-      "devDependencies": {
-        "@types/google.maps": "^3.58.1",
-        "typescript": "^5.4.5",
-        "vite": "^5.2.11"
-      }
-    },
     "samples/ui-kit-place-search-nearby": {
       "name": "@js-api-samples/ui-kit-place-search-nearby-nearby",
       "version": "1.0.0"