From cf4c1c068003fcb6ef8990f75441bf23bb503989 Mon Sep 17 00:00:00 2001
From: William French <dubnewt@gmail.com>
Date: Tue, 12 May 2026 11:57:31 -0700
Subject: [PATCH 1/7] fix: Clamps tilt value to prevent error.

---
 samples/3d-camera-position/index.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/samples/3d-camera-position/index.ts b/samples/3d-camera-position/index.ts
index e6b7ddfc3..25607b655 100644
--- a/samples/3d-camera-position/index.ts
+++ b/samples/3d-camera-position/index.ts
@@ -36,7 +36,8 @@ async function initMap(): Promise<void> {
     // Update values on UI when the map changes.
     const updateUI = () => {
         const heading = map3DElement.heading?.toFixed(0) ?? '0';
-        const tilt = map3DElement.tilt?.toFixed(0) ?? '0';
+        const rawTilt = map3DElement.tilt ?? 0;
+        const tilt = Math.max(0, rawTilt).toFixed(0);
         const range = map3DElement.range?.toFixed(0) ?? '0';
         const rawFov = parseFloat(map3DElement.fov?.toFixed(0) ?? '45');
         const fovClamped = Math.min(80, Math.max(5, rawFov));
@@ -121,8 +122,9 @@ async function initMap(): Promise<void> {
                 };
             }
         } else {
+            const finalVal = prop === 'tilt' ? Math.max(0, val) : val;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (map3DElement as any)[prop] = val;
+            (map3DElement as any)[prop] = finalVal;
         }
         updateUI();
     });
@@ -136,7 +138,12 @@ async function initMap(): Promise<void> {
 
     // Update UI on camera change events.
     map3DElement.addEventListener('gmp-headingchange', updateUI);
-    map3DElement.addEventListener('gmp-tiltchange', updateUI);
+    map3DElement.addEventListener('gmp-tiltchange', () => {
+        if ((map3DElement.tilt ?? 0) < 0) {
+            map3DElement.tilt = 0;
+        }
+        updateUI();
+    });
     map3DElement.addEventListener('gmp-rangechange', updateUI);
     map3DElement.addEventListener('gmp-fovchange', updateUI);
 

From e5b1214a89cee3f7be1a9f3f5dc3319e128ac229 Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Tue, 12 May 2026 12:11:39 -0700
Subject: [PATCH 2/7] Reformat Google Maps API script loading tag

---
 samples/3d-camera-position/index.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/samples/3d-camera-position/index.html b/samples/3d-camera-position/index.html
index d7c525be1..2cef24d31 100644
--- a/samples/3d-camera-position/index.html
+++ b/samples/3d-camera-position/index.html
@@ -10,9 +10,12 @@
         <title>Google Maps 3D - Camera Position Controller</title>
         <link rel="stylesheet" type="text/css" href="./style.css" />
         <script type="module" src="./index.js"></script>
-        <!-- 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)) })
-            ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"});</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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+            });
+        </script>
     </head>
 
     <body>

From a97926ecd0a6aacd57664f4ae80f20a74f75871f Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Tue, 12 May 2026 12:24:06 -0700
Subject: [PATCH 3/7] Fix label formatting for tilt control

---
 samples/3d-camera-position/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/samples/3d-camera-position/index.html b/samples/3d-camera-position/index.html
index 2cef24d31..8421ce7a2 100644
--- a/samples/3d-camera-position/index.html
+++ b/samples/3d-camera-position/index.html
@@ -42,9 +42,9 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="tilt"
-                        >Tilt: <span id="tilt-val">45</span>&deg;</label
-                    >
+                    <label for="tilt">
+                        Tilt: <span id="tilt-val">45</span>&deg;
+                    </label>
                     <input
                         type="range"
                         id="tilt"

From 0b204e80f343b9b1c09ddd511f812a94f7598492 Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Tue, 12 May 2026 12:31:50 -0700
Subject: [PATCH 4/7] Simplify tilt change event listener

Removing since it's impossible to get a negative value here.
---
 samples/3d-camera-position/index.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/samples/3d-camera-position/index.ts b/samples/3d-camera-position/index.ts
index 25607b655..82ebe1d97 100644
--- a/samples/3d-camera-position/index.ts
+++ b/samples/3d-camera-position/index.ts
@@ -138,12 +138,7 @@ async function initMap(): Promise<void> {
 
     // Update UI on camera change events.
     map3DElement.addEventListener('gmp-headingchange', updateUI);
-    map3DElement.addEventListener('gmp-tiltchange', () => {
-        if ((map3DElement.tilt ?? 0) < 0) {
-            map3DElement.tilt = 0;
-        }
-        updateUI();
-    });
+    map3DElement.addEventListener('gmp-tiltchange', updateUI);
     map3DElement.addEventListener('gmp-rangechange', updateUI);
     map3DElement.addEventListener('gmp-fovchange', updateUI);
 

From c35b90b5261d96fd0b1a6e482f50544e47664b45 Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Tue, 12 May 2026 12:38:52 -0700
Subject: [PATCH 5/7] Refactor tilt calculation in updateUI function

---
 samples/3d-camera-position/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/samples/3d-camera-position/index.ts b/samples/3d-camera-position/index.ts
index 82ebe1d97..1d7adfbe1 100644
--- a/samples/3d-camera-position/index.ts
+++ b/samples/3d-camera-position/index.ts
@@ -36,8 +36,7 @@ async function initMap(): Promise<void> {
     // Update values on UI when the map changes.
     const updateUI = () => {
         const heading = map3DElement.heading?.toFixed(0) ?? '0';
-        const rawTilt = map3DElement.tilt ?? 0;
-        const tilt = Math.max(0, rawTilt).toFixed(0);
+        const tilt = map3DElement.tilt?.toFixed(0) ?? '0';
         const range = map3DElement.range?.toFixed(0) ?? '0';
         const rawFov = parseFloat(map3DElement.fov?.toFixed(0) ?? '45');
         const fovClamped = Math.min(80, Math.max(5, rawFov));

From b2ce2ebb861b3a44b639a60d98cb8f4f1fb116a8 Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Wed, 13 May 2026 07:17:35 -0700
Subject: [PATCH 6/7] Fix label formatting in 3D camera position UI

---
 samples/3d-camera-position/index.html | 30 +++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/samples/3d-camera-position/index.html b/samples/3d-camera-position/index.html
index 8421ce7a2..a88c3fbf6 100644
--- a/samples/3d-camera-position/index.html
+++ b/samples/3d-camera-position/index.html
@@ -28,9 +28,9 @@
         <div id="ui-container">
             <div class="panel">
                 <div class="control-group">
-                    <label for="heading"
-                        >Heading: <span id="heading-val">0</span>&deg;</label
-                    >
+                    <label for="heading">
+                        Heading: <span id="heading-val">0</span>&deg;
+                    </label>
                     <input
                         type="range"
                         id="heading"
@@ -56,9 +56,9 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="range"
-                        >Range: <span id="range-val">1000</span>m</label
-                    >
+                    <label for="range">
+                        Range: <span id="range-val">1000</span>m
+                    </label>
                     <input
                         type="range"
                         id="range"
@@ -95,9 +95,9 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="altitude"
-                        >Altitude: <span id="altitude-val">30</span>m</label
-                    >
+                    <label for="altitude">
+                        Altitude: <span id="altitude-val">30</span>m
+                    </label>
                     <input
                         type="range"
                         id="altitude"
@@ -109,9 +109,9 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="fov"
-                        >FOV: <span id="fov-val">35</span>&deg;</label
-                    >
+                    <label for="fov">
+                        FOV: <span id="fov-val">35</span>&deg;
+                    </label>
                     <input
                         type="range"
                         id="fov"
@@ -123,9 +123,9 @@
                 </div>
 
                 <div class="control-group">
-                    <label for="roll"
-                        >Roll: <span id="roll-val">0</span>&deg;</label
-                    >
+                    <label for="roll">
+                        Roll: <span id="roll-val">0</span>&deg;
+                    </label>
                     <input
                         type="range"
                         id="roll"

From f994ec11a04da2b726345698d44c825069e5555b Mon Sep 17 00:00:00 2001
From: William French <wfrench@google.com>
Date: Wed, 13 May 2026 08:53:14 -0700
Subject: [PATCH 7/7] Refactor property assignment for map3DElement

---
 samples/3d-camera-position/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/samples/3d-camera-position/index.ts b/samples/3d-camera-position/index.ts
index 1d7adfbe1..e58f8330d 100644
--- a/samples/3d-camera-position/index.ts
+++ b/samples/3d-camera-position/index.ts
@@ -120,10 +120,13 @@ async function initMap(): Promise<void> {
                     altitude: val,
                 };
             }
+        } else if (prop === 'tilt') {
+            map3DElement.tilt = Math.max(0, val);
+        } else if (prop === 'fov') {
+            map3DElement.fov = Math.min(80, Math.max(5, val));
         } else {
-            const finalVal = prop === 'tilt' ? Math.max(0, val) : val;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (map3DElement as any)[prop] = finalVal;
+            (map3DElement as any)[prop] = val;
         }
         updateUI();
     });