Skip to content

Commit f697b2a

Browse files
willum070willum070
committed
Applies prettier formatting.
1 parent 0431041 commit f697b2a

4 files changed

Lines changed: 134 additions & 58 deletions

File tree

‎samples/3d-camera-position/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
An interactive playground designed to help developers understand and experiment with camera positioning in Google Maps 3D.
66

77
## Features
8+
89
- **Live Camera Controls**: Real-time sliders for adjusting `heading`, `tilt`, `range`, and `fov` properties.
910
- **Coordinate Mapping**: Direct controls to set the camera's focal point via `Latitude`, `Longitude`, and `Altitude`.
1011
- **Code Generator**: Dynamically generates the resulting `<gmp-map-3d>` HTML tag with mapped properties for easy copying and pasting.

‎samples/3d-camera-position/index.html‎

Lines changed: 124 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,70 +6,142 @@
66
-->
77
<!-- [START maps_3d_camera_position] -->
88
<html>
9-
10-
<head>`
11-
<title>Google Maps 3D - Camera Position Controller</title>
12-
<link rel="stylesheet" type="text/css" href="./style.css" />
13-
<script type="module" src="./index.js"></script>
14-
<!-- prettier-ignore -->
15-
<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)) })
9+
<head>
10+
`
11+
<title>Google Maps 3D - Camera Position Controller</title>
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
<!-- prettier-ignore -->
15+
<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)) })
1616
({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
17-
</head>
18-
19-
<body>
20-
<gmp-map-3d center="40.7811,-73.9599,0" mode="HYBRID" tilt="76" range="3270" heading="-154"></gmp-map-3d>
21-
<div id="ui-container">
22-
<div class="panel">
23-
<div class="control-group">
24-
<label for="heading">Heading: <span id="heading-val">0</span>&deg;</label>
25-
<input type="range" id="heading" name="heading" min="-180" max="180" value="0" step="1" />
26-
</div>
17+
</head>
2718

28-
<div class="control-group">
29-
<label for="tilt">Tilt: <span id="tilt-val">45</span>&deg;</label>
30-
<input type="range" id="tilt" name="tilt" min="0" max="90" value="45" step="1" />
31-
</div>
19+
<body>
20+
<gmp-map-3d
21+
center="40.7811,-73.9599,0"
22+
mode="HYBRID"
23+
tilt="76"
24+
range="3270"
25+
heading="-154"></gmp-map-3d>
26+
<div id="ui-container">
27+
<div class="panel">
28+
<div class="control-group">
29+
<label for="heading"
30+
>Heading: <span id="heading-val">0</span>&deg;</label
31+
>
32+
<input
33+
type="range"
34+
id="heading"
35+
name="heading"
36+
min="-180"
37+
max="180"
38+
value="0"
39+
step="1" />
40+
</div>
3241

33-
<div class="control-group">
34-
<label for="range">Range: <span id="range-val">1000</span>m</label>
35-
<input type="range" id="range" name="range" min="100" max="10000" value="1000" step="100" />
36-
</div>
42+
<div class="control-group">
43+
<label for="tilt"
44+
>Tilt: <span id="tilt-val">45</span>&deg;</label
45+
>
46+
<input
47+
type="range"
48+
id="tilt"
49+
name="tilt"
50+
min="0"
51+
max="90"
52+
value="45"
53+
step="1" />
54+
</div>
3755

38-
<div class="control-group row">
39-
<div class="col">
40-
<label for="lat">Latitude</label>
41-
<input type="number" id="lat" name="lat" min="-90" max="90" value="40.7040" step="0.0001" />
56+
<div class="control-group">
57+
<label for="range"
58+
>Range: <span id="range-val">1000</span>m</label
59+
>
60+
<input
61+
type="range"
62+
id="range"
63+
name="range"
64+
min="100"
65+
max="10000"
66+
value="1000"
67+
step="100" />
4268
</div>
43-
<div class="col">
44-
<label for="lng">Longitude</label>
45-
<input type="number" id="lng" name="lng" min="-180" max="180" value="-74.0180" step="0.0001" />
69+
70+
<div class="control-group row">
71+
<div class="col">
72+
<label for="lat">Latitude</label>
73+
<input
74+
type="number"
75+
id="lat"
76+
name="lat"
77+
min="-90"
78+
max="90"
79+
value="40.7040"
80+
step="0.0001" />
81+
</div>
82+
<div class="col">
83+
<label for="lng">Longitude</label>
84+
<input
85+
type="number"
86+
id="lng"
87+
name="lng"
88+
min="-180"
89+
max="180"
90+
value="-74.0180"
91+
step="0.0001" />
92+
</div>
4693
</div>
47-
</div>
4894

49-
<div class="control-group">
50-
<label for="altitude">Altitude: <span id="altitude-val">30</span>m</label>
51-
<input type="range" id="altitude" name="altitude" min="0" max="5000" value="30" step="10" />
52-
</div>
95+
<div class="control-group">
96+
<label for="altitude"
97+
>Altitude: <span id="altitude-val">30</span>m</label
98+
>
99+
<input
100+
type="range"
101+
id="altitude"
102+
name="altitude"
103+
min="0"
104+
max="5000"
105+
value="30"
106+
step="10" />
107+
</div>
53108

54-
<div class="control-group">
55-
<label for="fov">FOV: <span id="fov-val">35</span>&deg;</label>
56-
<input type="range" id="fov" name="fov" min="5" max="80" value="35" step="1" />
57-
</div>
109+
<div class="control-group">
110+
<label for="fov"
111+
>FOV: <span id="fov-val">35</span>&deg;</label
112+
>
113+
<input
114+
type="range"
115+
id="fov"
116+
name="fov"
117+
min="5"
118+
max="80"
119+
value="35"
120+
step="1" />
121+
</div>
58122

59-
<div class="control-group">
60-
<label for="roll">Roll: <span id="roll-val">0</span>&deg;</label>
61-
<input type="range" id="roll" name="roll" min="-180" max="180" value="0" step="1" />
62-
</div>
123+
<div class="control-group">
124+
<label for="roll"
125+
>Roll: <span id="roll-val">0</span>&deg;</label
126+
>
127+
<input
128+
type="range"
129+
id="roll"
130+
name="roll"
131+
min="-180"
132+
max="180"
133+
value="0"
134+
step="1" />
135+
</div>
63136

64-
<div class="status-group">
65-
<div class="code-box">
66-
<pre><code id="generated-code"></code></pre>
137+
<div class="status-group">
138+
<div class="code-box">
139+
<pre><code id="generated-code"></code></pre>
140+
</div>
141+
<button id="copy-btn">Copy HTML</button>
67142
</div>
68-
<button id="copy-btn">Copy HTML</button>
69143
</div>
70144
</div>
71-
</div>
72-
</body>
73-
145+
</body>
74146
</html>
75147
<!-- [END maps_3d_camera_position] -->

‎samples/3d-camera-position/index.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,16 @@ async function initMap(): Promise<void> {
4242
const updateUI = () => {
4343
const heading = map3DElement.heading?.toFixed(0) ?? '0';
4444
const tilt = map3DElement.tilt?.toFixed(0) ?? '0';
45-
const range = map3DElement.range != null ? map3DElement.range.toFixed(0) : '0';
46-
const rawFov = map3DElement.fov != null ? parseFloat(map3DElement.fov.toFixed(0)) : 45;
45+
const range =
46+
map3DElement.range != null ? map3DElement.range.toFixed(0) : '0';
47+
const rawFov =
48+
map3DElement.fov != null
49+
? parseFloat(map3DElement.fov.toFixed(0))
50+
: 45;
4751
const fovClamped = Math.min(80, Math.max(5, rawFov));
4852
const fov = fovClamped.toString();
49-
const roll = map3DElement.roll != null ? map3DElement.roll.toFixed(0) : '0';
53+
const roll =
54+
map3DElement.roll != null ? map3DElement.roll.toFixed(0) : '0';
5055
const center = map3DElement.center;
5156
const mode = map3DElement.mode;
5257

‎samples/3d-camera-position/tsconfig.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,5 @@
33
"compilerOptions": {
44
"rootDir": "."
55
},
6-
"include": [
7-
"./*.ts",
8-
]
6+
"include": ["./*.ts"]
97
}

0 commit comments

Comments
 (0)