feat: Refactors the 3d-camera-boundary sample to latest standards.

willum070 · willum070 · commit ba28f4638391 · 2026-05-07T10:23:39.000-07:00
diff --git a/samples/3d-camera-boundary/index.html b/samples/3d-camera-boundary/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
  @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] -->
@@ -19,7 +19,13 @@
         </script>
     </head>
     <body>
-        <div id="map"></div>
+        <gmp-map-3d
+            id="gmp-map-3d"
+            center="-47.1375,169.5235,150000"
+            tilt="67.5"
+            mode="hybrid"
+            gesture-handling="cooperative">
+        </gmp-map-3d>
     </body>
 </html>
 <!-- [END maps_3d_camera_boundary] -->
diff --git a/samples/3d-camera-boundary/index.ts b/samples/3d-camera-boundary/index.ts
@@ -1,22 +1,22 @@
 /*
  * @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 init() {
-    const { Map3DElement } = await google.maps.importLibrary('maps3d');
+async function init(): 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,
+    };
 }
 
 void init();
diff --git 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
@@ -1,17 +1,10 @@
 /*
 * @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;

Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,5 @@`
`7`	`7`	`"start": "tsc && vite build --base './' && vite",`
`8`	`8`	`"build:vite": "vite build --base './'",`
`9`	`9`	`"preview": "vite preview"`
`10`		`- },`
`11`		`- "dependencies": {`
`12`		`-`
`13`	`10`	`}`
`14`	`11`	`}`