diff --git a/dist/index.html b/dist/index.html
index 02b817c0f..dd5dacffd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,6 +10,7 @@ Maps JSAPI Samples
3d-accessibility-features 3d-camera-boundary 3d-camera-center 3d-camera-position 3d-camera-to-around 3d-clamp-mode 3d-coverage-map ` HTML tag with mapped properties for easy copying and pasting.
+- **Continuous Event Syncing**: Listens to map interaction events (like dragging and panning) to keep UI readouts strictly synchronized with live map state.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/3d-camera-position`
+`npm start`
+
+### Build an individual example
+
+`cd samples/3d-camera-position`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=3d-camera-position/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/3d-camera-position`
+`npx eslint index.ts`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/dist/samples/3d-camera-position/app/index.html b/dist/samples/3d-camera-position/app/index.html
new file mode 100644
index 000000000..2d083ed10
--- /dev/null
+++ b/dist/samples/3d-camera-position/app/index.html
@@ -0,0 +1,147 @@
+
+
+
+
+
+ `
+ Google Maps 3D - Camera Position Controller
+ {
+ // Declare the needed libraries.
+ await google.maps.importLibrary('maps3d');
+
+ const map3DElement = document.querySelector('gmp-map-3d')!;
+
+ // Elements from HTML
+ const headingSlider = document.getElementById(
+ 'heading'
+ ) as HTMLInputElement;
+ const tiltSlider = document.getElementById('tilt') as HTMLInputElement;
+ const rangeSlider = document.getElementById('range') as HTMLInputElement;
+ const latSlider = document.getElementById('lat') as HTMLInputElement;
+ const lngSlider = document.getElementById('lng') as HTMLInputElement;
+ const fovSlider = document.getElementById('fov') as HTMLInputElement;
+ const rollSlider = document.getElementById('roll') as HTMLInputElement;
+
+ const headingVal = document.getElementById('heading-val') as HTMLElement;
+ const tiltVal = document.getElementById('tilt-val') as HTMLElement;
+ const rangeVal = document.getElementById('range-val') as HTMLElement;
+ const altitudeVal = document.getElementById('altitude-val') as HTMLElement;
+ const fovVal = document.getElementById('fov-val') as HTMLElement;
+ const rollVal = document.getElementById('roll-val') as HTMLElement;
+ const codeElem = document.getElementById('generated-code') as HTMLElement;
+ const copyBtn = document.getElementById('copy-btn') as HTMLButtonElement;
+
+ let currentAltitude = 30;
+ let isUserInteracting = false;
+
+ // 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 range = map3DElement.range?.toFixed(0) ?? '0';
+ const rawFov = parseFloat(map3DElement.fov?.toFixed(0) ?? '45');
+ const fovClamped = Math.min(80, Math.max(5, rawFov));
+ const fov = fovClamped.toString();
+ const roll = map3DElement.roll?.toFixed(0) ?? '0';
+ const center = map3DElement.center;
+ const mode = map3DElement.mode;
+
+ headingVal.textContent = heading;
+ tiltVal.textContent = tilt;
+ rangeVal.textContent = range;
+ fovVal.textContent = fov;
+ rollVal.textContent = roll;
+
+ if (!isUserInteracting) {
+ fovSlider.value = fov;
+ headingSlider.value = heading;
+ tiltSlider.value = tilt;
+ rangeSlider.value = Math.min(10000, parseFloat(range)).toString();
+ rollSlider.value = roll;
+ }
+
+ if (center) {
+ const lat = center.lat.toFixed(4);
+ const lng = center.lng.toFixed(4);
+ const alt = currentAltitude.toFixed(0);
+
+ latSlider.value = lat;
+ lngSlider.value = lng;
+ altitudeVal.textContent = alt;
+
+ codeElem.textContent = `Google Maps 3D - Camera Position Controller
+
+
+
+ Google Maps 3D - Camera Position Controller
+ {
+ // Declare the needed libraries.
+ await google.maps.importLibrary('maps3d');
+
+ const map3DElement = document.querySelector('gmp-map-3d')!;
+
+ // Elements from HTML
+ const headingSlider = document.getElementById(
+ 'heading'
+ ) as HTMLInputElement;
+ const tiltSlider = document.getElementById('tilt') as HTMLInputElement;
+ const rangeSlider = document.getElementById('range') as HTMLInputElement;
+ const latSlider = document.getElementById('lat') as HTMLInputElement;
+ const lngSlider = document.getElementById('lng') as HTMLInputElement;
+ const fovSlider = document.getElementById('fov') as HTMLInputElement;
+ const rollSlider = document.getElementById('roll') as HTMLInputElement;
+
+ const headingVal = document.getElementById('heading-val') as HTMLElement;
+ const tiltVal = document.getElementById('tilt-val') as HTMLElement;
+ const rangeVal = document.getElementById('range-val') as HTMLElement;
+ const altitudeVal = document.getElementById('altitude-val') as HTMLElement;
+ const fovVal = document.getElementById('fov-val') as HTMLElement;
+ const rollVal = document.getElementById('roll-val') as HTMLElement;
+ const codeElem = document.getElementById('generated-code') as HTMLElement;
+ const copyBtn = document.getElementById('copy-btn') as HTMLButtonElement;
+
+ let currentAltitude = 30;
+ let isUserInteracting = false;
+
+ // 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 range = map3DElement.range?.toFixed(0) ?? '0';
+ const rawFov = parseFloat(map3DElement.fov?.toFixed(0) ?? '45');
+ const fovClamped = Math.min(80, Math.max(5, rawFov));
+ const fov = fovClamped.toString();
+ const roll = map3DElement.roll?.toFixed(0) ?? '0';
+ const center = map3DElement.center;
+ const mode = map3DElement.mode;
+
+ headingVal.textContent = heading;
+ tiltVal.textContent = tilt;
+ rangeVal.textContent = range;
+ fovVal.textContent = fov;
+ rollVal.textContent = roll;
+
+ if (!isUserInteracting) {
+ fovSlider.value = fov;
+ headingSlider.value = heading;
+ tiltSlider.value = tilt;
+ rangeSlider.value = Math.min(10000, parseFloat(range)).toString();
+ rollSlider.value = roll;
+ }
+
+ if (center) {
+ const lat = center.lat.toFixed(4);
+ const lng = center.lng.toFixed(4);
+ const alt = currentAltitude.toFixed(0);
+
+ latSlider.value = lat;
+ lngSlider.value = lng;
+ altitudeVal.textContent = alt;
+
+ codeElem.textContent = `Google Maps 3D - Camera Position Controller
+ Maps JSAPI Samples
3d-accessibility-features 3d-camera-boundary 3d-camera-center 3d-camera-position 3d-camera-to-around 3d-clamp-mode 3d-coverage-map