diff --git a/dist/samples/ui-kit-place-details-compact/app/index.html b/dist/samples/ui-kit-place-details-compact/app/index.html
index d07f2c26..02f2f3e6 100644
--- a/dist/samples/ui-kit-place-details-compact/app/index.html
+++ b/dist/samples/ui-kit-place-details-compact/app/index.html
@@ -14,17 +14,16 @@
   </head>
   <body>
   <!--[START maps_ui_kit_place_details_compact_container]-->
-    <div id = "map-container">
-        <gmp-place-details-compact orientation="horizontal">
-            <!--[START maps_ui_kit_place_details_compact_request]-->
-            <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
-            <!--[END maps_ui_kit_place_details_compact_request]-->
-            <!--[START maps_ui_kit_place_details_compact_config]-->  
-            <gmp-place-all-content></gmp-place-all-content>
-            <!--[END maps_ui_kit_place_details_compact_config]-->  
-        </gmp-place-details-compact>
-    </div>
-<!--[END maps_ui_kit_place_details_compact_container]-->
+    <div id = "map-container"></div>
+    <gmp-place-details-compact orientation="horizontal">
+    <!--[START maps_ui_kit_place_details_compact_request]-->
+        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
+        <!--[END maps_ui_kit_place_details_compact_request]-->
+        <!--[START maps_ui_kit_place_details_compact_config]-->
+        <gmp-place-all-content></gmp-place-all-content>
+        <!--[END maps_ui_kit_place_details_compact_config]-->
+    </gmp-place-details-compact>
+    <!--[END maps_ui_kit_place_details_compact_container]-->
     <script>
         (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",
diff --git a/dist/samples/ui-kit-place-details-compact/app/index.ts b/dist/samples/ui-kit-place-details-compact/app/index.ts
index 7376818b..b6cf78af 100644
--- a/dist/samples/ui-kit-place-details-compact/app/index.ts
+++ b/dist/samples/ui-kit-place-details-compact/app/index.ts
@@ -6,21 +6,18 @@
 /* [START maps_ui_kit_place_details_compact] */
 // Use querySelector to select elements for interaction.
 const mapContainer = document.getElementById("map-container") as any;
-const detailsContainer = document.getElementById("details-container") as any;
 const placeDetails = document.querySelector("gmp-place-details-compact") as any;
 const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any;
 let gMap;
-let infowindow;
 let marker;
 
 async function initMap(): Promise<void> {
     const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any;
-    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
 
-    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")  as google.maps.MarkerLibrary;
+    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
     gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
     marker = new AdvancedMarkerElement({ map: gMap });
-    infowindow = new InfoWindow({});
 
     // Hide the map type control.
     gMap.setOptions({mapTypeControl: false});
@@ -33,7 +30,6 @@ async function initMap(): Promise<void> {
     });
     // Add an event listener to handle clicks.
     gMap.addListener("click", async (event) => {
-        marker.position = null;
         event.stop();
         // Fire when the user clicks on a POI.
         if (event.placeId) {
@@ -51,22 +47,24 @@ async function initMap(): Promise<void> {
     const updateMapAndMarker = () => {
         console.log("function called");
         if (placeDetails.place && placeDetails.place.location) {
-            gMap.panTo(placeDetails.place.location);
+            marker.gMap = null;
+            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
+            gMap.panTo(adjustedCenter);
             gMap.setZoom(16); // Set zoom after panning if needed
-            marker.position = placeDetails.place.location;
-            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
-            marker.style.display = 'block';
-            //@ts-ignore
-            infowindow.setOptions({
-                content: placeDetails
-            });
-            //@ts-ignore
-            infowindow.open({
-                anchor: marker,
-                map: gMap,
-            });
+            marker.content = placeDetails;
+            marker.position = placeDetails.place.location
+        }
+        else {
+            console.log("else");
         }
     };
 }
+// Helper function to offset marker placement for better visual appearance.
+function offsetLatLngRight(latLng, latitudeOffset) {
+    const newLat = latLng.lat() + latitudeOffset;
+    return new google.maps.LatLng(newLat, latLng.lng());
+}
+
 initMap();
+
 /* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-place-details-compact/app/style.css b/dist/samples/ui-kit-place-details-compact/app/style.css
index 9f0a93cd..306f3b62 100644
--- a/dist/samples/ui-kit-place-details-compact/app/style.css
+++ b/dist/samples/ui-kit-place-details-compact/app/style.css
@@ -8,7 +8,7 @@ html,
 body {
   display: flex;
   width: 100%;
-  height: 100%;
+  height: 400px;
   margin: 0;
 }
 
@@ -33,46 +33,28 @@ gmp-place-details-compact {
   --gmp-mat-font-family: Google Sans Text, sans-serif;
   /* Defines the style for medium body text (e.g., address, descriptions) */
   --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
-  
+
   width: 360px;
   border: none;
-  overflow-y: hidden;
-}
-
-.gm-style-iw button {
-    display: none !important;
-}
-
-.gm-style-iw-c {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.gm-style-iw-d {
-    padding: 0 !important;
-    margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
-    overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
+  padding: 0;
+  margin: 0;
+  position: relative;
+  transform: translate(0, calc(-20px));
 }
 
-.gm-style-iw-c * { /* Target all elements inside the infowindow content container */
-    padding: 0 !important;
-    margin: 0 !important;
+/* This creates the pointer attached to the bottom of the element. */
+gmp-place-details-compact::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
 }
 
-@media (prefers-color-scheme: dark) {
-
-    .gm-style-iw.gm-style-iw-c,
-    .gm-style .gm-style-iw-d,
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
-    .gm-style .gm-style-iw-c,
-    .gm-style .gm-style-iw-t::after,
-    .gm-style .gm-style-iw-tc::after { 
-        background-color: #000 !important;
-    }
-    .gm-ui-hover-effect>span {
-        background-color: #fff !important;
-    }
-}
 /* [END maps_ui_kit_place_details_compact_style] */
 /* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css b/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css
deleted file mode 100644
index 1790adf7..00000000
--- a/dist/samples/ui-kit-place-details-compact/dist/assets/index--nVeueu1.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */html,body{display:flex;width:100%;height:100%;margin:0}h1{font-size:16px;text-align:center}#map-container{box-sizing:border-box;width:100%}gmp-place-details-compact{--gmp-mat-color-on-surface: light-dark(black, white);--gmp-mat-color-surface: light-dark(white, black);--gmp-mat-font-family: Google Sans Text, sans-serif;--gmp-mat-font-body-medium: normal 400 .875em/1.25em var(--gmp-mat-font-family, "Google Sans Text");width:360px;border:none;overflow-y:hidden}.gm-style-iw button{display:none!important}.gm-style-iw-c{padding:0!important;margin:0!important}.gm-style-iw-d{padding:0!important;margin:0!important;overflow:visible!important}.gm-style-iw-c *{padding:0!important;margin:0!important}@media (prefers-color-scheme: dark){.gm-style-iw.gm-style-iw-c,.gm-style .gm-style-iw-d,.gm-style .gm-style-iw-d::-webkit-scrollbar-track,.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,.gm-style .gm-style-iw-c,.gm-style .gm-style-iw-t:after,.gm-style .gm-style-iw-tc:after{background-color:#000!important}.gm-ui-hover-effect>span{background-color:#fff!important}}
diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-7U6Bjnjc.css b/dist/samples/ui-kit-place-details-compact/dist/assets/index-7U6Bjnjc.css
new file mode 100644
index 00000000..c185dbfb
--- /dev/null
+++ b/dist/samples/ui-kit-place-details-compact/dist/assets/index-7U6Bjnjc.css
@@ -0,0 +1,5 @@
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */html,body{display:flex;width:100%;height:400px;margin:0}h1{font-size:16px;text-align:center}#map-container{box-sizing:border-box;width:100%}gmp-place-details-compact{--gmp-mat-color-on-surface: light-dark(black, white);--gmp-mat-color-surface: light-dark(white, black);--gmp-mat-font-family: Google Sans Text, sans-serif;--gmp-mat-font-body-medium: normal 400 .875em/1.25em var(--gmp-mat-font-family, "Google Sans Text");width:360px;border:none;padding:0;margin:0;position:relative;transform:translateY(-20px)}gmp-place-details-compact:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:20px solid var(--gmp-mat-color-surface, light-dark(white, black))}
diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-BVUG69Zj.js b/dist/samples/ui-kit-place-details-compact/dist/assets/index-BVUG69Zj.js
new file mode 100644
index 00000000..fa59381d
--- /dev/null
+++ b/dist/samples/ui-kit-place-details-compact/dist/assets/index-BVUG69Zj.js
@@ -0,0 +1,5 @@
+(function(){const l=document.createElement("link").relList;if(l&&l.supports&&l.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))r(t);new MutationObserver(t=>{for(const e of t)if(e.type==="childList")for(const i of e.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function c(t){const e={};return t.integrity&&(e.integrity=t.integrity),t.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?e.credentials="include":t.crossOrigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function r(t){if(t.ep)return;t.ep=!0;const e=c(t);fetch(t.href,e)}})();/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */const p=document.getElementById("map-container"),o=document.querySelector("gmp-place-details-compact"),d=document.querySelector("gmp-place-details-place-request");let a,s;async function u(){const{PlaceDetailsCompactElement:n,PlaceDetailsPlaceRequestElement:l}=await google.maps.importLibrary("places"),{Map:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker");a=new c(p,{mapId:"DEMO_MAP_ID"}),s=new r({map:a}),a.setOptions({mapTypeControl:!1}),o.style.visibility="visible",o.addEventListener("gmp-load",e=>{console.log("placeDetails initialized!"),t()}),a.addListener("click",async e=>{e.stop(),e.placeId?(console.log("clicked on POI"),console.log(e.placeId),d.place=e.placeId,t()):console.log("No place was selected.")});const t=()=>{if(console.log("function called"),o.place&&o.place.location){s.gMap=null;let e=m(o.place.location,.002);a.panTo(e),a.setZoom(16),s.content=o,s.position=o.place.location}else console.log("else")}}function m(n,l){const c=n.lat()+l;return new google.maps.LatLng(c,n.lng())}u();
diff --git a/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js b/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js
deleted file mode 100644
index 15002754..00000000
--- a/dist/samples/ui-kit-place-details-compact/dist/assets/index-PpKQ7CME.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))c(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const t of o.addedNodes)t.tagName==="LINK"&&t.rel==="modulepreload"&&c(t)}).observe(document,{childList:!0,subtree:!0});function s(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerPolicy&&(o.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?o.credentials="include":e.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function c(e){if(e.ep)return;e.ep=!0;const o=s(e);fetch(e.href,o)}})();/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */const d=document.getElementById("map-container");document.getElementById("details-container");const l=document.querySelector("gmp-place-details-compact"),m=document.querySelector("gmp-place-details-place-request");let i,r,a;async function u(){const{PlaceDetailsCompactElement:p,PlaceDetailsPlaceRequestElement:n}=await google.maps.importLibrary("places"),{Map:s,InfoWindow:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:e}=await google.maps.importLibrary("marker");i=new s(d,{mapId:"DEMO_MAP_ID"}),a=new e({map:i}),r=new c({}),i.setOptions({mapTypeControl:!1}),l.style.visibility="visible",l.addEventListener("gmp-load",t=>{console.log("placeDetails initialized!"),o()}),i.addListener("click",async t=>{a.position=null,t.stop(),t.placeId?(console.log("clicked on POI"),console.log(t.placeId),m.place=t.placeId,o()):console.log("No place was selected.")});const o=()=>{console.log("function called"),l.place&&l.place.location&&(i.panTo(l.place.location),i.setZoom(16),a.position=l.place.location,a.collisionBehavior=google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,a.style.display="block",r.setOptions({content:l}),r.open({anchor:a,map:i}))}}u();
diff --git a/dist/samples/ui-kit-place-details-compact/dist/index.html b/dist/samples/ui-kit-place-details-compact/dist/index.html
index 727f866c..85f26241 100644
--- a/dist/samples/ui-kit-place-details-compact/dist/index.html
+++ b/dist/samples/ui-kit-place-details-compact/dist/index.html
@@ -9,22 +9,21 @@
   <head>
     <title>Click on the map to view place details</title>
     <meta charset="utf-8">
-    <script type="module" crossorigin src="./assets/index-PpKQ7CME.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index--nVeueu1.css">
+    <script type="module" crossorigin src="./assets/index-BVUG69Zj.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-7U6Bjnjc.css">
   </head>
   <body>
   <!--[START maps_ui_kit_place_details_compact_container]-->
-    <div id = "map-container">
-        <gmp-place-details-compact orientation="horizontal">
-            <!--[START maps_ui_kit_place_details_compact_request]-->
-            <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
-            <!--[END maps_ui_kit_place_details_compact_request]-->
-            <!--[START maps_ui_kit_place_details_compact_config]-->  
-            <gmp-place-all-content></gmp-place-all-content>
-            <!--[END maps_ui_kit_place_details_compact_config]-->  
-        </gmp-place-details-compact>
-    </div>
-<!--[END maps_ui_kit_place_details_compact_container]-->
+    <div id = "map-container"></div>
+    <gmp-place-details-compact orientation="horizontal">
+    <!--[START maps_ui_kit_place_details_compact_request]-->
+        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
+        <!--[END maps_ui_kit_place_details_compact_request]-->
+        <!--[START maps_ui_kit_place_details_compact_config]-->
+        <gmp-place-all-content></gmp-place-all-content>
+        <!--[END maps_ui_kit_place_details_compact_config]-->
+    </gmp-place-details-compact>
+    <!--[END maps_ui_kit_place_details_compact_container]-->
     <script>
         (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",
diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.html b/dist/samples/ui-kit-place-details-compact/docs/index.html
index d07f2c26..02f2f3e6 100644
--- a/dist/samples/ui-kit-place-details-compact/docs/index.html
+++ b/dist/samples/ui-kit-place-details-compact/docs/index.html
@@ -14,17 +14,16 @@
   </head>
   <body>
   <!--[START maps_ui_kit_place_details_compact_container]-->
-    <div id = "map-container">
-        <gmp-place-details-compact orientation="horizontal">
-            <!--[START maps_ui_kit_place_details_compact_request]-->
-            <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
-            <!--[END maps_ui_kit_place_details_compact_request]-->
-            <!--[START maps_ui_kit_place_details_compact_config]-->  
-            <gmp-place-all-content></gmp-place-all-content>
-            <!--[END maps_ui_kit_place_details_compact_config]-->  
-        </gmp-place-details-compact>
-    </div>
-<!--[END maps_ui_kit_place_details_compact_container]-->
+    <div id = "map-container"></div>
+    <gmp-place-details-compact orientation="horizontal">
+    <!--[START maps_ui_kit_place_details_compact_request]-->
+        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
+        <!--[END maps_ui_kit_place_details_compact_request]-->
+        <!--[START maps_ui_kit_place_details_compact_config]-->
+        <gmp-place-all-content></gmp-place-all-content>
+        <!--[END maps_ui_kit_place_details_compact_config]-->
+    </gmp-place-details-compact>
+    <!--[END maps_ui_kit_place_details_compact_container]-->
     <script>
         (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",
diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.js b/dist/samples/ui-kit-place-details-compact/docs/index.js
index 3ea2d5e6..a2ee89b0 100644
--- a/dist/samples/ui-kit-place-details-compact/docs/index.js
+++ b/dist/samples/ui-kit-place-details-compact/docs/index.js
@@ -7,19 +7,16 @@
 /* [START maps_ui_kit_place_details_compact] */
 // Use querySelector to select elements for interaction.
 const mapContainer = document.getElementById("map-container");
-const detailsContainer = document.getElementById("details-container");
 const placeDetails = document.querySelector("gmp-place-details-compact");
 const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
 let gMap;
-let infowindow;
 let marker;
 async function initMap() {
     const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
-    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+    const { Map } = await google.maps.importLibrary("maps");
     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
     gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
     marker = new AdvancedMarkerElement({ map: gMap });
-    infowindow = new InfoWindow({});
     // Hide the map type control.
     gMap.setOptions({ mapTypeControl: false });
     // Set up map, marker, and infowindow once widget is loaded.
@@ -30,7 +27,6 @@ async function initMap() {
     });
     // Add an event listener to handle clicks.
     gMap.addListener("click", async (event) => {
-        marker.position = null;
         event.stop();
         // Fire when the user clicks on a POI.
         if (event.placeId) {
@@ -49,22 +45,22 @@ async function initMap() {
     const updateMapAndMarker = () => {
         console.log("function called");
         if (placeDetails.place && placeDetails.place.location) {
-            gMap.panTo(placeDetails.place.location);
+            marker.gMap = null;
+            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
+            gMap.panTo(adjustedCenter);
             gMap.setZoom(16); // Set zoom after panning if needed
+            marker.content = placeDetails;
             marker.position = placeDetails.place.location;
-            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
-            marker.style.display = 'block';
-            //@ts-ignore
-            infowindow.setOptions({
-                content: placeDetails
-            });
-            //@ts-ignore
-            infowindow.open({
-                anchor: marker,
-                map: gMap,
-            });
+        }
+        else {
+            console.log("else");
         }
     };
 }
+// Helper function to offset marker placement for better visual appearance.
+function offsetLatLngRight(latLng, latitudeOffset) {
+    const newLat = latLng.lat() + latitudeOffset;
+    return new google.maps.LatLng(newLat, latLng.lng());
+}
 initMap();
 /* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-place-details-compact/docs/index.ts b/dist/samples/ui-kit-place-details-compact/docs/index.ts
index 7376818b..b6cf78af 100644
--- a/dist/samples/ui-kit-place-details-compact/docs/index.ts
+++ b/dist/samples/ui-kit-place-details-compact/docs/index.ts
@@ -6,21 +6,18 @@
 /* [START maps_ui_kit_place_details_compact] */
 // Use querySelector to select elements for interaction.
 const mapContainer = document.getElementById("map-container") as any;
-const detailsContainer = document.getElementById("details-container") as any;
 const placeDetails = document.querySelector("gmp-place-details-compact") as any;
 const placeDetailsRequest = document.querySelector("gmp-place-details-place-request") as any;
 let gMap;
-let infowindow;
 let marker;
 
 async function initMap(): Promise<void> {
     const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places") as any;
-    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
 
-    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")  as google.maps.MarkerLibrary;
+    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
     gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
     marker = new AdvancedMarkerElement({ map: gMap });
-    infowindow = new InfoWindow({});
 
     // Hide the map type control.
     gMap.setOptions({mapTypeControl: false});
@@ -33,7 +30,6 @@ async function initMap(): Promise<void> {
     });
     // Add an event listener to handle clicks.
     gMap.addListener("click", async (event) => {
-        marker.position = null;
         event.stop();
         // Fire when the user clicks on a POI.
         if (event.placeId) {
@@ -51,22 +47,24 @@ async function initMap(): Promise<void> {
     const updateMapAndMarker = () => {
         console.log("function called");
         if (placeDetails.place && placeDetails.place.location) {
-            gMap.panTo(placeDetails.place.location);
+            marker.gMap = null;
+            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
+            gMap.panTo(adjustedCenter);
             gMap.setZoom(16); // Set zoom after panning if needed
-            marker.position = placeDetails.place.location;
-            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
-            marker.style.display = 'block';
-            //@ts-ignore
-            infowindow.setOptions({
-                content: placeDetails
-            });
-            //@ts-ignore
-            infowindow.open({
-                anchor: marker,
-                map: gMap,
-            });
+            marker.content = placeDetails;
+            marker.position = placeDetails.place.location
+        }
+        else {
+            console.log("else");
         }
     };
 }
+// Helper function to offset marker placement for better visual appearance.
+function offsetLatLngRight(latLng, latitudeOffset) {
+    const newLat = latLng.lat() + latitudeOffset;
+    return new google.maps.LatLng(newLat, latLng.lng());
+}
+
 initMap();
+
 /* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-place-details-compact/docs/style.css b/dist/samples/ui-kit-place-details-compact/docs/style.css
index 9f0a93cd..306f3b62 100644
--- a/dist/samples/ui-kit-place-details-compact/docs/style.css
+++ b/dist/samples/ui-kit-place-details-compact/docs/style.css
@@ -8,7 +8,7 @@ html,
 body {
   display: flex;
   width: 100%;
-  height: 100%;
+  height: 400px;
   margin: 0;
 }
 
@@ -33,46 +33,28 @@ gmp-place-details-compact {
   --gmp-mat-font-family: Google Sans Text, sans-serif;
   /* Defines the style for medium body text (e.g., address, descriptions) */
   --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
-  
+
   width: 360px;
   border: none;
-  overflow-y: hidden;
-}
-
-.gm-style-iw button {
-    display: none !important;
-}
-
-.gm-style-iw-c {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.gm-style-iw-d {
-    padding: 0 !important;
-    margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
-    overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
+  padding: 0;
+  margin: 0;
+  position: relative;
+  transform: translate(0, calc(-20px));
 }
 
-.gm-style-iw-c * { /* Target all elements inside the infowindow content container */
-    padding: 0 !important;
-    margin: 0 !important;
+/* This creates the pointer attached to the bottom of the element. */
+gmp-place-details-compact::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
 }
 
-@media (prefers-color-scheme: dark) {
-
-    .gm-style-iw.gm-style-iw-c,
-    .gm-style .gm-style-iw-d,
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
-    .gm-style .gm-style-iw-c,
-    .gm-style .gm-style-iw-t::after,
-    .gm-style .gm-style-iw-tc::after { 
-        background-color: #000 !important;
-    }
-    .gm-ui-hover-effect>span {
-        background-color: #fff !important;
-    }
-}
 /* [END maps_ui_kit_place_details_compact_style] */
 /* [END maps_ui_kit_place_details_compact] */
diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css
index 1cf6f20f..e5f8fd0b 100644
--- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css
+++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.css
@@ -8,7 +8,7 @@ html,
 body {
   display: flex;
   width: 100%;
-  height: 100%;
+  height: 400px;
   margin: 0;
 }
 
@@ -33,46 +33,28 @@ gmp-place-details-compact {
   --gmp-mat-font-family: Google Sans Text, sans-serif;
   /* Defines the style for medium body text (e.g., address, descriptions) */
   --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');
-  
+
   width: 360px;
   border: none;
-  overflow-y: hidden;
-}
-
-.gm-style-iw button {
-    display: none !important;
-}
-
-.gm-style-iw-c {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.gm-style-iw-d {
-    padding: 0 !important;
-    margin: 0 !important; /* Sometimes margin can also contribute to unwanted space */
-    overflow: visible !important; /* If you don't want scrollbars, but be careful with content overflow */
+  padding: 0;
+  margin: 0;
+  position: relative;
+  transform: translate(0, calc(-20px));
 }
 
-.gm-style-iw-c * { /* Target all elements inside the infowindow content container */
-    padding: 0 !important;
-    margin: 0 !important;
+/* This creates the pointer attached to the bottom of the element. */
+gmp-place-details-compact::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 16px solid transparent;
+  border-right: 16px solid transparent;
+  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
 }
 
-@media (prefers-color-scheme: dark) {
-
-    .gm-style-iw.gm-style-iw-c,
-    .gm-style .gm-style-iw-d,
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track, 
-    .gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
-    .gm-style .gm-style-iw-c,
-    .gm-style .gm-style-iw-t::after,
-    .gm-style .gm-style-iw-tc::after { 
-        background-color: #000 !important;
-    }
-    .gm-ui-hover-effect>span {
-        background-color: #fff !important;
-    }
-}
 
 
diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html
index 0da5a58d..b0728039 100644
--- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html
+++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.html
@@ -14,17 +14,16 @@
   </head>
   <body>
   
-    <div id = "map-container">
-        <gmp-place-details-compact orientation="horizontal">
-            
-            <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
-            
-              
-            <gmp-place-all-content></gmp-place-all-content>
-              
-        </gmp-place-details-compact>
-    </div>
-
+    <div id = "map-container"></div>
+    <gmp-place-details-compact orientation="horizontal">
+    
+        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
+        
+        
+        <gmp-place-all-content></gmp-place-all-content>
+        
+    </gmp-place-details-compact>
+    
     <script>
         (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",
diff --git a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js
index 3ea2d5e6..a2ee89b0 100644
--- a/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js
+++ b/dist/samples/ui-kit-place-details-compact/jsfiddle/demo.js
@@ -7,19 +7,16 @@
 /* [START maps_ui_kit_place_details_compact] */
 // Use querySelector to select elements for interaction.
 const mapContainer = document.getElementById("map-container");
-const detailsContainer = document.getElementById("details-container");
 const placeDetails = document.querySelector("gmp-place-details-compact");
 const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
 let gMap;
-let infowindow;
 let marker;
 async function initMap() {
     const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
-    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
+    const { Map } = await google.maps.importLibrary("maps");
     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
     gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
     marker = new AdvancedMarkerElement({ map: gMap });
-    infowindow = new InfoWindow({});
     // Hide the map type control.
     gMap.setOptions({ mapTypeControl: false });
     // Set up map, marker, and infowindow once widget is loaded.
@@ -30,7 +27,6 @@ async function initMap() {
     });
     // Add an event listener to handle clicks.
     gMap.addListener("click", async (event) => {
-        marker.position = null;
         event.stop();
         // Fire when the user clicks on a POI.
         if (event.placeId) {
@@ -49,22 +45,22 @@ async function initMap() {
     const updateMapAndMarker = () => {
         console.log("function called");
         if (placeDetails.place && placeDetails.place.location) {
-            gMap.panTo(placeDetails.place.location);
+            marker.gMap = null;
+            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
+            gMap.panTo(adjustedCenter);
             gMap.setZoom(16); // Set zoom after panning if needed
+            marker.content = placeDetails;
             marker.position = placeDetails.place.location;
-            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
-            marker.style.display = 'block';
-            //@ts-ignore
-            infowindow.setOptions({
-                content: placeDetails
-            });
-            //@ts-ignore
-            infowindow.open({
-                anchor: marker,
-                map: gMap,
-            });
+        }
+        else {
+            console.log("else");
         }
     };
 }
+// Helper function to offset marker placement for better visual appearance.
+function offsetLatLngRight(latLng, latitudeOffset) {
+    const newLat = latLng.lat() + latitudeOffset;
+    return new google.maps.LatLng(newLat, latLng.lng());
+}
 initMap();
 /* [END maps_ui_kit_place_details_compact] */
