diff --git a/dist/samples/place-autocomplete-basic-map/app/index.html b/dist/samples/place-autocomplete-basic-map/app/index.html
index a4a034f4..2344573a 100644
--- a/dist/samples/place-autocomplete-basic-map/app/index.html
+++ b/dist/samples/place-autocomplete-basic-map/app/index.html
@@ -7,22 +7,20 @@
 <!-- [START maps_place_autocomplete_basic_map] -->
 <html>
   <head>
-    <title>Place Autocomplete map</title>
+    <title>Basic Place Autocomplete map</title>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-   <div id="map-container">
-      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
-      <gmp-place-details-compact orientation="horizontal">
-        <gmp-place-details-place-request></gmp-place-details-place-request>
-        <gmp-place-all-content></gmp-place-all-content>
-      </gmp-place-details-compact>
-      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
-         <gmp-advanced-marker></gmp-advanced-marker> 
-      </gmp-map>
-    </div>
+    <div id="map-container"></div>
+    <gmp-basic-place-autocomplete
+      slot="control-inline-start-block-start"
+    ></gmp-basic-place-autocomplete>
+    <gmp-place-details-compact orientation="horizontal">
+      <gmp-place-details-place-request></gmp-place-details-place-request>
+      <gmp-place-standard-content></gmp-place-standard-content>
+    </gmp-place-details-compact>
 
     <!-- prettier-ignore -->
     <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))})
diff --git a/dist/samples/place-autocomplete-basic-map/app/index.ts b/dist/samples/place-autocomplete-basic-map/app/index.ts
index e7f3e2a6..35568701 100644
--- a/dist/samples/place-autocomplete-basic-map/app/index.ts
+++ b/dist/samples/place-autocomplete-basic-map/app/index.ts
@@ -1,64 +1,107 @@
-/*
+ /*
  * @license
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+// [START maps_place_autocomplete_basic_map]
 
+const placeAutocompleteElement = document.querySelector(
+  'gmp-basic-place-autocomplete',
+) as any;
+const placeDetailsElement = document.querySelector(
+  'gmp-place-details-compact',
+) as any;
+const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement;
+const mapDiv = document.getElementById('map-container') as HTMLElement;
+const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City
 
-// [START maps_place_autocomplete_basic_map]
-const mapContainer = document.getElementById("map-container") as any;
-const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete') as any;
-const detailsElement = document.querySelector('gmp-place-details-compact') as any;
-const mapElement = document.querySelector('gmp-map') as any;
-const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as any;
 
-let center = { lat: 40.749933, lng: -73.98633 }; // New York City
+async function initMap(): Promise<void> {
+  // Asynchronously load required libraries from the Google Maps JS API.
+  await google.maps.importLibrary('places');
+  const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker;
+  const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any;
+
+  // Set the initial location bias for the autocomplete element.
+  placeAutocompleteElement.locationBias = center;
 
-async function initMap(): Promise<void>{
-  //@ts-ignore
-  const {BasicPlaceAutocompleteElement, PlaceDetailsElement} = await google.maps.importLibrary('places');
-    //@ts-ignore
-  const {AdvancedMarkerElement} = await google.maps.importLibrary('marker');
-    //@ts-ignore
-  const {LatLngBounds} = await google.maps.importLibrary('core');
-      
-  // Set the initial map location and autocomplete location bias
-  mapElement.center = center
-  autocompleteElement.locationBias = center;
+  // Create the map object with specified options.
+  const map: google.maps.Map = new Map(mapDiv, {
+    zoom: 12,
+    center: center,
+    mapId: 'DEMO_MAP_ID',
+    clickableIcons: false,
+    mapTypeControl: false,
+    streetViewControl: false,
+  });
 
-  // Get the underlying google.maps.Map object to add listeners
-  const map = mapElement.innerMap;
+  // Create an advanced marker to show the location of a selected place.
+  const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({
+    map: map,
+  });
 
-  // Add the listener tochange locationBias to locationRestriction when the map moves
-  map.addListener('bounds_changed', () => {
-    autocompleteElement.locationBias = null;
-    autocompleteElement.locationRestriction = map.getBounds();
-    console.log("bias changed to restriction")
+  // Create an InfoWindow to hold the place details component.
+  const infoWindow: google.maps.InfoWindow = new InfoWindow({
+    minWidth: 360,
+    disableAutoPan: true,
+    closeButton: false,
+    headerDisabled: true,
+    pixelOffset: new google.maps.Size(0, -10),
   });
 
+
   // [START maps_place_autocomplete_basic_map_listener]
-  // Add the listener to update the Place Request element when the user selects a prediction
-  autocompleteElement.addEventListener('gmp-select', async (event) => {
-    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
+  // Event listener for when a place is selected from the autocomplete list.
+  placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
+    
+    // Reset marker and InfoWindow, and prepare the details element.
+    placeDetailsParent.appendChild(placeDetailsElement);
+    advancedMarkerElement.position = null;
+    infoWindow.close();
+
+    // Request details for the selected place.
+    const placeDetailsRequest = placeDetailsElement.querySelector(
+      'gmp-place-details-place-request',
+    ) as any;
     placeDetailsRequest.place = event.place.id;
   });
   // [END maps_place_autocomplete_basic_map_listener]
 
-  // Add the listener to update the marker when the Details element loads
-  detailsElement.addEventListener('gmp-load', async () => {
-    const location = detailsElement.place.location;
-    detailsElement.style.display = "block"
+  // Event listener for when the place details have finished loading.
+  placeDetailsElement.addEventListener('gmp-load', () => {
+    const location = placeDetailsElement.place.location as google.maps.LatLng;
+    
+    // Position the marker and open the InfoWindow at the place's location.
     advancedMarkerElement.position = location;
-    advancedMarkerElement.content = detailsElement;
-    if (detailsElement.place.viewport) {
-        map.fitBounds(detailsElement.place.viewport);
-    } else {
-        map.setCenter(location);
-        map.setZoom(17);
-    }
+    infoWindow.setContent(placeDetailsElement);
+    infoWindow.open({
+      map,
+      anchor: advancedMarkerElement,
+    });
+    map.setCenter(location);
+    placeDetailsElement.focus();
+  });
+
+  // Event listener to close the InfoWindow when the map is clicked.
+  map.addListener('click', (): void => {
+    infoWindow.close();
+    advancedMarkerElement.position = null;
+  });
+
+  // Event listener for when the map finishes moving (panning or zooming).
+  map.addListener('idle', (): void => {
+    const newCenter = map.getCenter() as google.maps.LatLng;
+    
+    // Update the autocomplete's location bias to a 10km radius around the new map center.
+    placeAutocompleteElement.locationBias = new google.maps.Circle({
+      center: {
+        lat: newCenter.lat(),
+        lng: newCenter.lng(),
+      },
+      radius: 10000, // 10km in meters
+    });
   });
 }
 
 initMap();
 // [END maps_place_autocomplete_basic_map]
-
diff --git a/dist/samples/place-autocomplete-basic-map/app/style.css b/dist/samples/place-autocomplete-basic-map/app/style.css
index 4dde28ec..7c9c7db9 100644
--- a/dist/samples/place-autocomplete-basic-map/app/style.css
+++ b/dist/samples/place-autocomplete-basic-map/app/style.css
@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-/* [START maps_place_autocomplete_basic_map] */
+ /* [START maps_place_autocomplete_basic_map] */
 html,
 body {
   height: 100%;
@@ -12,49 +12,29 @@ body {
 }
 
 #map-container {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-}
-
-#gmp-map {
   height: 100%;
 }
 
 gmp-basic-place-autocomplete {
   position: absolute;
   height: 50px;
+  width: 500px;
   top: 10px;
   left: 10px;
   z-index: 1;
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
   color-scheme: light;
   border-radius: 10px;
 }
 
 gmp-place-details-compact {
   width: 360px;
+  min-width: 300px;
   max-height: 300px;
   border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  transform: translate(calc(-180px), calc(-215px)); 
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  background-color: #ffffff;
   color-scheme: light;
 }
 
-/* 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));
-}
+
 /* [END maps_place_autocomplete_basic_map] */
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-BmNok-li.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-BmNok-li.css
deleted file mode 100644
index 6ce88263..00000000
--- a/dist/samples/place-autocomplete-basic-map/dist/assets/index-BmNok-li.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */html,body{height:100%;margin:0;padding:0}#map-container{display:flex;flex-direction:row;height:100%}#gmp-map{height:100%}gmp-basic-place-autocomplete{position:absolute;height:50px;top:10px;left:10px;z-index:1;box-shadow:2px 2px 5px #0003;color-scheme:light;border-radius:10px}gmp-place-details-compact{width:360px;max-height:300px;border:none;padding:0;margin:0;position:absolute;transform:translate(-180px,-215px);box-shadow:2px 2px 5px #0003;color-scheme:light}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/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css
new file mode 100644
index 00000000..2f851235
--- /dev/null
+++ b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */html,body{height:100%;margin:0;padding:0}#map-container{height:100%}gmp-basic-place-autocomplete{position:absolute;height:50px;width:500px;top:10px;left:10px;z-index:1;box-shadow:2px 2px 5px rgba(0,0,0,0 2);color-scheme:light;border-radius:10px}gmp-place-details-compact{width:360px;min-width:300px;max-height:300px;border:none;background-color:#fff;color-scheme:light}
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js
new file mode 100644
index 00000000..5b448d41
--- /dev/null
+++ b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js
@@ -0,0 +1,5 @@
+(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function c(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=c(e);fetch(e.href,t)}})();/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/const l=document.querySelector("gmp-basic-place-autocomplete"),r=document.querySelector("gmp-place-details-compact"),d=r.parentElement,m=document.getElementById("map-container"),i={lat:40.749933,lng:-73.98633};async function u(){await google.maps.importLibrary("places");const{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),{Map:a,InfoWindow:c}=await google.maps.importLibrary("maps");l.locationBias=i;const n=new a(m,{zoom:12,center:i,mapId:"DEMO_MAP_ID",clickableIcons:!1,mapTypeControl:!1,streetViewControl:!1}),e=new s({map:n}),t=new c({minWidth:360,disableAutoPan:!0,closeButton:!1,headerDisabled:!0,pixelOffset:new google.maps.Size(0,-10)});l.addEventListener("gmp-select",o=>{d.appendChild(r),e.position=null,t.close();const p=r.querySelector("gmp-place-details-place-request");p.place=o.place.id}),r.addEventListener("gmp-load",()=>{const o=r.place.location;e.position=o,t.setContent(r),t.open({map:n,anchor:e}),n.setCenter(o),r.focus()}),n.addListener("click",()=>{t.close(),e.position=null}),n.addListener("idle",()=>{const o=n.getCenter();l.locationBias=new google.maps.Circle({center:{lat:o.lat(),lng:o.lng()},radius:1e4})})}u();
diff --git a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D9sGUCsY.js b/dist/samples/place-autocomplete-basic-map/dist/assets/index-D9sGUCsY.js
deleted file mode 100644
index 9364ad11..00000000
--- a/dist/samples/place-autocomplete-basic-map/dist/assets/index-D9sGUCsY.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function a(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */document.getElementById("map-container");const c=document.querySelector("gmp-basic-place-autocomplete"),o=document.querySelector("gmp-place-details-compact"),i=document.querySelector("gmp-map"),l=document.querySelector("gmp-advanced-marker");let d={lat:40.749933,lng:-73.98633};async function m(){const{BasicPlaceAutocompleteElement:p,PlaceDetailsElement:r}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),{LatLngBounds:a}=await google.maps.importLibrary("core");i.center=d,c.locationBias=d;const e=i.innerMap;e.addListener("bounds_changed",()=>{c.locationBias=null,c.locationRestriction=e.getBounds(),console.log("bias changed to restriction")}),c.addEventListener("gmp-select",async t=>{const n=document.querySelector("gmp-place-details-place-request");n.place=t.place.id}),o.addEventListener("gmp-load",async()=>{const t=o.place.location;o.style.display="block",l.position=t,l.content=o,o.place.viewport?e.fitBounds(o.place.viewport):(e.setCenter(t),e.setZoom(17))})}m();
diff --git a/dist/samples/place-autocomplete-basic-map/dist/index.html b/dist/samples/place-autocomplete-basic-map/dist/index.html
index 774d3d4a..1625be84 100644
--- a/dist/samples/place-autocomplete-basic-map/dist/index.html
+++ b/dist/samples/place-autocomplete-basic-map/dist/index.html
@@ -7,22 +7,20 @@
 <!-- [START maps_place_autocomplete_basic_map] -->
 <html>
   <head>
-    <title>Place Autocomplete map</title>
+    <title>Basic Place Autocomplete map</title>
 
-    <script type="module" crossorigin src="./assets/index-D9sGUCsY.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BmNok-li.css">
+    <script type="module" crossorigin src="./assets/index-D16h0RvV.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-D-6Qtdh_.css">
   </head>
   <body>
-   <div id="map-container">
-      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
-      <gmp-place-details-compact orientation="horizontal">
-        <gmp-place-details-place-request></gmp-place-details-place-request>
-        <gmp-place-all-content></gmp-place-all-content>
-      </gmp-place-details-compact>
-      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
-         <gmp-advanced-marker></gmp-advanced-marker> 
-      </gmp-map>
-    </div>
+    <div id="map-container"></div>
+    <gmp-basic-place-autocomplete
+      slot="control-inline-start-block-start"
+    ></gmp-basic-place-autocomplete>
+    <gmp-place-details-compact orientation="horizontal">
+      <gmp-place-details-place-request></gmp-place-details-place-request>
+      <gmp-place-standard-content></gmp-place-standard-content>
+    </gmp-place-details-compact>
 
     <!-- prettier-ignore -->
     <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))})
diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.html b/dist/samples/place-autocomplete-basic-map/docs/index.html
index a4a034f4..2344573a 100644
--- a/dist/samples/place-autocomplete-basic-map/docs/index.html
+++ b/dist/samples/place-autocomplete-basic-map/docs/index.html
@@ -7,22 +7,20 @@
 <!-- [START maps_place_autocomplete_basic_map] -->
 <html>
   <head>
-    <title>Place Autocomplete map</title>
+    <title>Basic Place Autocomplete map</title>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-   <div id="map-container">
-      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
-      <gmp-place-details-compact orientation="horizontal">
-        <gmp-place-details-place-request></gmp-place-details-place-request>
-        <gmp-place-all-content></gmp-place-all-content>
-      </gmp-place-details-compact>
-      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
-         <gmp-advanced-marker></gmp-advanced-marker> 
-      </gmp-map>
-    </div>
+    <div id="map-container"></div>
+    <gmp-basic-place-autocomplete
+      slot="control-inline-start-block-start"
+    ></gmp-basic-place-autocomplete>
+    <gmp-place-details-compact orientation="horizontal">
+      <gmp-place-details-place-request></gmp-place-details-place-request>
+      <gmp-place-standard-content></gmp-place-standard-content>
+    </gmp-place-details-compact>
 
     <!-- prettier-ignore -->
     <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))})
diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.js b/dist/samples/place-autocomplete-basic-map/docs/index.js
index 90545af3..19eeaab4 100644
--- a/dist/samples/place-autocomplete-basic-map/docs/index.js
+++ b/dist/samples/place-autocomplete-basic-map/docs/index.js
@@ -1,54 +1,84 @@
 "use strict";
 /*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
 // [START maps_place_autocomplete_basic_map]
-const mapContainer = document.getElementById("map-container");
-const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
-const detailsElement = document.querySelector('gmp-place-details-compact');
-const mapElement = document.querySelector('gmp-map');
-const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
-let center = { lat: 40.749933, lng: -73.98633 }; // New York City
+const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
+const placeDetailsElement = document.querySelector('gmp-place-details-compact');
+const placeDetailsParent = placeDetailsElement.parentElement;
+const mapDiv = document.getElementById('map-container');
+const center = { lat: 40.749933, lng: -73.98633 }; // New York City
 async function initMap() {
-    //@ts-ignore
-    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
-    //@ts-ignore
+    // Asynchronously load required libraries from the Google Maps JS API.
+    await google.maps.importLibrary('places');
     const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
-    //@ts-ignore
-    const { LatLngBounds } = await google.maps.importLibrary('core');
-    // Set the initial map location and autocomplete location bias
-    mapElement.center = center;
-    autocompleteElement.locationBias = center;
-    // Get the underlying google.maps.Map object to add listeners
-    const map = mapElement.innerMap;
-    // Add the listener tochange locationBias to locationRestriction when the map moves
-    map.addListener('bounds_changed', () => {
-        autocompleteElement.locationBias = null;
-        autocompleteElement.locationRestriction = map.getBounds();
-        console.log("bias changed to restriction");
+    const { Map, InfoWindow } = await google.maps.importLibrary('maps');
+    // Set the initial location bias for the autocomplete element.
+    placeAutocompleteElement.locationBias = center;
+    // Create the map object with specified options.
+    const map = new Map(mapDiv, {
+        zoom: 12,
+        center: center,
+        mapId: 'DEMO_MAP_ID',
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+    // Create an advanced marker to show the location of a selected place.
+    const advancedMarkerElement = new AdvancedMarkerElement({
+        map: map,
+    });
+    // Create an InfoWindow to hold the place details component.
+    const infoWindow = new InfoWindow({
+        minWidth: 360,
+        disableAutoPan: true,
+        closeButton: false,
+        headerDisabled: true,
+        pixelOffset: new google.maps.Size(0, -10),
     });
     // [START maps_place_autocomplete_basic_map_listener]
-    // Add the listener to update the Place Request element when the user selects a prediction
-    autocompleteElement.addEventListener('gmp-select', async (event) => {
-        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
+    // Event listener for when a place is selected from the autocomplete list.
+    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
+        // Reset marker and InfoWindow, and prepare the details element.
+        placeDetailsParent.appendChild(placeDetailsElement);
+        advancedMarkerElement.position = null;
+        infoWindow.close();
+        // Request details for the selected place.
+        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
         placeDetailsRequest.place = event.place.id;
     });
     // [END maps_place_autocomplete_basic_map_listener]
-    // Add the listener to update the marker when the Details element loads
-    detailsElement.addEventListener('gmp-load', async () => {
-        const location = detailsElement.place.location;
-        detailsElement.style.display = "block";
+    // Event listener for when the place details have finished loading.
+    placeDetailsElement.addEventListener('gmp-load', () => {
+        const location = placeDetailsElement.place.location;
+        // Position the marker and open the InfoWindow at the place's location.
         advancedMarkerElement.position = location;
-        advancedMarkerElement.content = detailsElement;
-        if (detailsElement.place.viewport) {
-            map.fitBounds(detailsElement.place.viewport);
-        }
-        else {
-            map.setCenter(location);
-            map.setZoom(17);
-        }
+        infoWindow.setContent(placeDetailsElement);
+        infoWindow.open({
+            map,
+            anchor: advancedMarkerElement,
+        });
+        map.setCenter(location);
+        placeDetailsElement.focus();
+    });
+    // Event listener to close the InfoWindow when the map is clicked.
+    map.addListener('click', () => {
+        infoWindow.close();
+        advancedMarkerElement.position = null;
+    });
+    // Event listener for when the map finishes moving (panning or zooming).
+    map.addListener('idle', () => {
+        const newCenter = map.getCenter();
+        // Update the autocomplete's location bias to a 10km radius around the new map center.
+        placeAutocompleteElement.locationBias = new google.maps.Circle({
+            center: {
+                lat: newCenter.lat(),
+                lng: newCenter.lng(),
+            },
+            radius: 10000, // 10km in meters
+        });
     });
 }
 initMap();
diff --git a/dist/samples/place-autocomplete-basic-map/docs/index.ts b/dist/samples/place-autocomplete-basic-map/docs/index.ts
index e7f3e2a6..35568701 100644
--- a/dist/samples/place-autocomplete-basic-map/docs/index.ts
+++ b/dist/samples/place-autocomplete-basic-map/docs/index.ts
@@ -1,64 +1,107 @@
-/*
+ /*
  * @license
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
+// [START maps_place_autocomplete_basic_map]
 
+const placeAutocompleteElement = document.querySelector(
+  'gmp-basic-place-autocomplete',
+) as any;
+const placeDetailsElement = document.querySelector(
+  'gmp-place-details-compact',
+) as any;
+const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement;
+const mapDiv = document.getElementById('map-container') as HTMLElement;
+const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City
 
-// [START maps_place_autocomplete_basic_map]
-const mapContainer = document.getElementById("map-container") as any;
-const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete') as any;
-const detailsElement = document.querySelector('gmp-place-details-compact') as any;
-const mapElement = document.querySelector('gmp-map') as any;
-const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as any;
 
-let center = { lat: 40.749933, lng: -73.98633 }; // New York City
+async function initMap(): Promise<void> {
+  // Asynchronously load required libraries from the Google Maps JS API.
+  await google.maps.importLibrary('places');
+  const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker;
+  const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any;
+
+  // Set the initial location bias for the autocomplete element.
+  placeAutocompleteElement.locationBias = center;
 
-async function initMap(): Promise<void>{
-  //@ts-ignore
-  const {BasicPlaceAutocompleteElement, PlaceDetailsElement} = await google.maps.importLibrary('places');
-    //@ts-ignore
-  const {AdvancedMarkerElement} = await google.maps.importLibrary('marker');
-    //@ts-ignore
-  const {LatLngBounds} = await google.maps.importLibrary('core');
-      
-  // Set the initial map location and autocomplete location bias
-  mapElement.center = center
-  autocompleteElement.locationBias = center;
+  // Create the map object with specified options.
+  const map: google.maps.Map = new Map(mapDiv, {
+    zoom: 12,
+    center: center,
+    mapId: 'DEMO_MAP_ID',
+    clickableIcons: false,
+    mapTypeControl: false,
+    streetViewControl: false,
+  });
 
-  // Get the underlying google.maps.Map object to add listeners
-  const map = mapElement.innerMap;
+  // Create an advanced marker to show the location of a selected place.
+  const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({
+    map: map,
+  });
 
-  // Add the listener tochange locationBias to locationRestriction when the map moves
-  map.addListener('bounds_changed', () => {
-    autocompleteElement.locationBias = null;
-    autocompleteElement.locationRestriction = map.getBounds();
-    console.log("bias changed to restriction")
+  // Create an InfoWindow to hold the place details component.
+  const infoWindow: google.maps.InfoWindow = new InfoWindow({
+    minWidth: 360,
+    disableAutoPan: true,
+    closeButton: false,
+    headerDisabled: true,
+    pixelOffset: new google.maps.Size(0, -10),
   });
 
+
   // [START maps_place_autocomplete_basic_map_listener]
-  // Add the listener to update the Place Request element when the user selects a prediction
-  autocompleteElement.addEventListener('gmp-select', async (event) => {
-    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
+  // Event listener for when a place is selected from the autocomplete list.
+  placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {
+    
+    // Reset marker and InfoWindow, and prepare the details element.
+    placeDetailsParent.appendChild(placeDetailsElement);
+    advancedMarkerElement.position = null;
+    infoWindow.close();
+
+    // Request details for the selected place.
+    const placeDetailsRequest = placeDetailsElement.querySelector(
+      'gmp-place-details-place-request',
+    ) as any;
     placeDetailsRequest.place = event.place.id;
   });
   // [END maps_place_autocomplete_basic_map_listener]
 
-  // Add the listener to update the marker when the Details element loads
-  detailsElement.addEventListener('gmp-load', async () => {
-    const location = detailsElement.place.location;
-    detailsElement.style.display = "block"
+  // Event listener for when the place details have finished loading.
+  placeDetailsElement.addEventListener('gmp-load', () => {
+    const location = placeDetailsElement.place.location as google.maps.LatLng;
+    
+    // Position the marker and open the InfoWindow at the place's location.
     advancedMarkerElement.position = location;
-    advancedMarkerElement.content = detailsElement;
-    if (detailsElement.place.viewport) {
-        map.fitBounds(detailsElement.place.viewport);
-    } else {
-        map.setCenter(location);
-        map.setZoom(17);
-    }
+    infoWindow.setContent(placeDetailsElement);
+    infoWindow.open({
+      map,
+      anchor: advancedMarkerElement,
+    });
+    map.setCenter(location);
+    placeDetailsElement.focus();
+  });
+
+  // Event listener to close the InfoWindow when the map is clicked.
+  map.addListener('click', (): void => {
+    infoWindow.close();
+    advancedMarkerElement.position = null;
+  });
+
+  // Event listener for when the map finishes moving (panning or zooming).
+  map.addListener('idle', (): void => {
+    const newCenter = map.getCenter() as google.maps.LatLng;
+    
+    // Update the autocomplete's location bias to a 10km radius around the new map center.
+    placeAutocompleteElement.locationBias = new google.maps.Circle({
+      center: {
+        lat: newCenter.lat(),
+        lng: newCenter.lng(),
+      },
+      radius: 10000, // 10km in meters
+    });
   });
 }
 
 initMap();
 // [END maps_place_autocomplete_basic_map]
-
diff --git a/dist/samples/place-autocomplete-basic-map/docs/style.css b/dist/samples/place-autocomplete-basic-map/docs/style.css
index 4dde28ec..7c9c7db9 100644
--- a/dist/samples/place-autocomplete-basic-map/docs/style.css
+++ b/dist/samples/place-autocomplete-basic-map/docs/style.css
@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-/* [START maps_place_autocomplete_basic_map] */
+ /* [START maps_place_autocomplete_basic_map] */
 html,
 body {
   height: 100%;
@@ -12,49 +12,29 @@ body {
 }
 
 #map-container {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-}
-
-#gmp-map {
   height: 100%;
 }
 
 gmp-basic-place-autocomplete {
   position: absolute;
   height: 50px;
+  width: 500px;
   top: 10px;
   left: 10px;
   z-index: 1;
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
   color-scheme: light;
   border-radius: 10px;
 }
 
 gmp-place-details-compact {
   width: 360px;
+  min-width: 300px;
   max-height: 300px;
   border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  transform: translate(calc(-180px), calc(-215px)); 
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  background-color: #ffffff;
   color-scheme: light;
 }
 
-/* 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));
-}
+
 /* [END maps_place_autocomplete_basic_map] */
diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css
index 255e1fd8..4c16caf6 100644
--- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css
+++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.css
@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-
+ 
 html,
 body {
   height: 100%;
@@ -12,49 +12,29 @@ body {
 }
 
 #map-container {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-}
-
-#gmp-map {
   height: 100%;
 }
 
 gmp-basic-place-autocomplete {
   position: absolute;
   height: 50px;
+  width: 500px;
   top: 10px;
   left: 10px;
   z-index: 1;
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
   color-scheme: light;
   border-radius: 10px;
 }
 
 gmp-place-details-compact {
   width: 360px;
+  min-width: 300px;
   max-height: 300px;
   border: none;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  transform: translate(calc(-180px), calc(-215px)); 
-  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
+  background-color: #ffffff;
   color-scheme: light;
 }
 
-/* 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));
-}
+
 
diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html
index d761bcdf..b31c7679 100644
--- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html
+++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.html
@@ -7,22 +7,20 @@
 
 <html>
   <head>
-    <title>Place Autocomplete map</title>
+    <title>Basic Place Autocomplete map</title>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-   <div id="map-container">
-      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
-      <gmp-place-details-compact orientation="horizontal">
-        <gmp-place-details-place-request></gmp-place-details-place-request>
-        <gmp-place-all-content></gmp-place-all-content>
-      </gmp-place-details-compact>
-      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
-         <gmp-advanced-marker></gmp-advanced-marker> 
-      </gmp-map>
-    </div>
+    <div id="map-container"></div>
+    <gmp-basic-place-autocomplete
+      slot="control-inline-start-block-start"
+    ></gmp-basic-place-autocomplete>
+    <gmp-place-details-compact orientation="horizontal">
+      <gmp-place-details-place-request></gmp-place-details-place-request>
+      <gmp-place-standard-content></gmp-place-standard-content>
+    </gmp-place-details-compact>
 
     <!-- prettier-ignore -->
     <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))})
diff --git a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js
index dc88416f..16b5aa11 100644
--- a/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js
+++ b/dist/samples/place-autocomplete-basic-map/jsfiddle/demo.js
@@ -1,54 +1,84 @@
 "use strict";
 /*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
 
-const mapContainer = document.getElementById("map-container");
-const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
-const detailsElement = document.querySelector('gmp-place-details-compact');
-const mapElement = document.querySelector('gmp-map');
-const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
-let center = { lat: 40.749933, lng: -73.98633 }; // New York City
+const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
+const placeDetailsElement = document.querySelector('gmp-place-details-compact');
+const placeDetailsParent = placeDetailsElement.parentElement;
+const mapDiv = document.getElementById('map-container');
+const center = { lat: 40.749933, lng: -73.98633 }; // New York City
 async function initMap() {
-    //@ts-ignore
-    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
-    //@ts-ignore
+    // Asynchronously load required libraries from the Google Maps JS API.
+    await google.maps.importLibrary('places');
     const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
-    //@ts-ignore
-    const { LatLngBounds } = await google.maps.importLibrary('core');
-    // Set the initial map location and autocomplete location bias
-    mapElement.center = center;
-    autocompleteElement.locationBias = center;
-    // Get the underlying google.maps.Map object to add listeners
-    const map = mapElement.innerMap;
-    // Add the listener tochange locationBias to locationRestriction when the map moves
-    map.addListener('bounds_changed', () => {
-        autocompleteElement.locationBias = null;
-        autocompleteElement.locationRestriction = map.getBounds();
-        console.log("bias changed to restriction");
+    const { Map, InfoWindow } = await google.maps.importLibrary('maps');
+    // Set the initial location bias for the autocomplete element.
+    placeAutocompleteElement.locationBias = center;
+    // Create the map object with specified options.
+    const map = new Map(mapDiv, {
+        zoom: 12,
+        center: center,
+        mapId: 'DEMO_MAP_ID',
+        clickableIcons: false,
+        mapTypeControl: false,
+        streetViewControl: false,
+    });
+    // Create an advanced marker to show the location of a selected place.
+    const advancedMarkerElement = new AdvancedMarkerElement({
+        map: map,
+    });
+    // Create an InfoWindow to hold the place details component.
+    const infoWindow = new InfoWindow({
+        minWidth: 360,
+        disableAutoPan: true,
+        closeButton: false,
+        headerDisabled: true,
+        pixelOffset: new google.maps.Size(0, -10),
     });
     
-    // Add the listener to update the Place Request element when the user selects a prediction
-    autocompleteElement.addEventListener('gmp-select', async (event) => {
-        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
+    // Event listener for when a place is selected from the autocomplete list.
+    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
+        // Reset marker and InfoWindow, and prepare the details element.
+        placeDetailsParent.appendChild(placeDetailsElement);
+        advancedMarkerElement.position = null;
+        infoWindow.close();
+        // Request details for the selected place.
+        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
         placeDetailsRequest.place = event.place.id;
     });
     
-    // Add the listener to update the marker when the Details element loads
-    detailsElement.addEventListener('gmp-load', async () => {
-        const location = detailsElement.place.location;
-        detailsElement.style.display = "block";
+    // Event listener for when the place details have finished loading.
+    placeDetailsElement.addEventListener('gmp-load', () => {
+        const location = placeDetailsElement.place.location;
+        // Position the marker and open the InfoWindow at the place's location.
         advancedMarkerElement.position = location;
-        advancedMarkerElement.content = detailsElement;
-        if (detailsElement.place.viewport) {
-            map.fitBounds(detailsElement.place.viewport);
-        }
-        else {
-            map.setCenter(location);
-            map.setZoom(17);
-        }
+        infoWindow.setContent(placeDetailsElement);
+        infoWindow.open({
+            map,
+            anchor: advancedMarkerElement,
+        });
+        map.setCenter(location);
+        placeDetailsElement.focus();
+    });
+    // Event listener to close the InfoWindow when the map is clicked.
+    map.addListener('click', () => {
+        infoWindow.close();
+        advancedMarkerElement.position = null;
+    });
+    // Event listener for when the map finishes moving (panning or zooming).
+    map.addListener('idle', () => {
+        const newCenter = map.getCenter();
+        // Update the autocomplete's location bias to a 10km radius around the new map center.
+        placeAutocompleteElement.locationBias = new google.maps.Circle({
+            center: {
+                lat: newCenter.lat(),
+                lng: newCenter.lng(),
+            },
+            radius: 10000, // 10km in meters
+        });
     });
 }
 initMap();
diff --git a/package-lock.json b/package-lock.json
index 3d2800a1..71e86644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5228,11 +5228,11 @@
       "version": "1.0.0",
       "dependencies": {
         "@googlemaps/js-api-loader": "^1.16.8",
-        "terra-draw": "*",
-        "terra-draw-google-maps-adapter": "*"
+        "terra-draw": "latest",
+        "terra-draw-google-maps-adapter": "latest"
       },
       "devDependencies": {
-        "@types/google.maps": "*",
+        "@types/google.maps": "latest",
         "typescript": "^5.9.2",
         "vite": "^7.0.6"
       }
