fix: Fixes an edge case and formatting. (#1450)

willum070 · web-flow · commit f86ce65d2068 · 2026-05-13T10:44:53.000-07:00
* fix: Clamps tilt value to prevent error.

* Reformat Google Maps API script loading tag

* Fix label formatting for tilt control

* Simplify tilt change event listener

Removing since it's impossible to get a negative value here.

* Refactor tilt calculation in updateUI function

* Fix label formatting in 3D camera position UI

* Refactor property assignment for map3DElement
diff --git 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>
@@ -25,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"
@@ -39,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"
@@ -53,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"
@@ -92,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"
@@ -106,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"
@@ -120,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"
diff --git a/samples/3d-camera-position/index.ts b/samples/3d-camera-position/index.ts
@@ -120,6 +120,10 @@ 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 {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (map3DElement as any)[prop] = val;
