diff --git a/samples/3d-camera-boundary/index.html b/samples/3d-camera-boundary/index.html
index eb98b2af..5cd65281 100644
--- a/samples/3d-camera-boundary/index.html
+++ b/samples/3d-camera-boundary/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <!--
- @license
- Copyright 2025 Google LLC. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
+@license
+Copyright 2026 Google LLC. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0
 -->
 <!-- [START maps_3d_camera_boundary] -->
 <html>
@@ -13,7 +13,7 @@
         <script type="module" src="./index.js"></script>
     </head>
     <body>
-        <div id="map"></div>
+        <gmp-map-3d center="-36.86, 174.76, 10000" mode="HYBRID" tilt="67.5"></gmp-map-3d>
 
         <!-- 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/samples/3d-camera-boundary/index.ts b/samples/3d-camera-boundary/index.ts
index 14a5e52f..3189cc1c 100644
--- a/samples/3d-camera-boundary/index.ts
+++ b/samples/3d-camera-boundary/index.ts
@@ -1,22 +1,18 @@
 /*
  * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
+ * Copyright 2026 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 
 // [START maps_3d_camera_boundary]
-async function initMap() {
-    const { Map3DElement } = await google.maps.importLibrary('maps3d');
+async function initMap(): Promise<void> {
+    await google.maps.importLibrary('maps3d');
 
-    const map = new Map3DElement({
-        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
-        tilt: 67.5,
-        mode: 'HYBRID',
-        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
-        gestureHandling: 'COOPERATIVE',
-    });
+    const map3DElement = document.querySelector('gmp-map-3d')!;
 
-    document.body.append(map);
+    // Restrict the position of the camera to the specified bounds.
+    map3DElement.bounds = { south: -48.3, west: 163.56, north: -32.86, east: -180 };
+    map3DElement.gestureHandling = 'COOPERATIVE';
 }
 
 initMap();
diff --git a/samples/3d-camera-boundary/package.json b/samples/3d-camera-boundary/package.json
index e3443384..cb6f2f72 100644
--- a/samples/3d-camera-boundary/package.json
+++ b/samples/3d-camera-boundary/package.json
@@ -7,8 +7,5 @@
     "start": "tsc && vite build --base './' && vite",
     "build:vite": "vite build --base './'",
     "preview": "vite preview"
-  },
-  "dependencies": {
-    
   }
 }
diff --git a/samples/3d-camera-boundary/style.css b/samples/3d-camera-boundary/style.css
index 68574374..9ccd5f3b 100644
--- a/samples/3d-camera-boundary/style.css
+++ b/samples/3d-camera-boundary/style.css
@@ -1,20 +1,17 @@
 /*
 * @license
-* Copyright 2025 Google LLC. All Rights Reserved.
+* Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
 /* [START maps_3d_camera_boundary] */
-/* 
- * Always set the map height explicitly to define the size of the div element
- * that contains the map. 
- */
 html,
-map {
-    height: 100%;
-}
 body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+gmp-map-3d {
+  height: 100%;
 }
 /* [END maps_3d_camera_boundary] */
