googlemaps-samples · anglarett · Oct 1, 2025 · Oct 2, 2025 · Oct 2, 2025 · Oct 15, 2025
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,11 @@ samples/.env
 samples/*/dist/
 samples/**/*.js
 
+samples/react-map-3d-custom/dist/
+samples/react-map-3d-custom/node_modules/
+samples/react-map-3d-custom-gpx/dist/
+samples/react-map-3d-custom-gpx/node_modules/
+
 # Ignore playwright outputs
 /test-results/
 /playwright-report/

diff --git a/.parcel-cache/1e5f50c7ff98c40c-BundleGraph b/.parcel-cache/1e5f50c7ff98c40c-BundleGraph
diff --git a/.parcel-cache/3426731880f231f1-RequestGraph b/.parcel-cache/3426731880f231f1-RequestGraph
diff --git a/.parcel-cache/8913604af9c25786-AssetGraph b/.parcel-cache/8913604af9c25786-AssetGraph
diff --git a/.parcel-cache/9d321af8a9fb7fcb-RequestGraph b/.parcel-cache/9d321af8a9fb7fcb-RequestGraph
diff --git a/.parcel-cache/c78270b837a075ef-BundleGraph b/.parcel-cache/c78270b837a075ef-BundleGraph
diff --git a/.parcel-cache/data.mdb b/.parcel-cache/data.mdb
diff --git a/.parcel-cache/dbb0a23b5e513d9b-AssetGraph b/.parcel-cache/dbb0a23b5e513d9b-AssetGraph
diff --git a/.parcel-cache/e404b15060539adc-AssetGraph b/.parcel-cache/e404b15060539adc-AssetGraph
diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb
diff --git a/.parcel-cache/snapshot-3426731880f231f1.txt b/.parcel-cache/snapshot-3426731880f231f1.txt
@@ -0,0 +1,2 @@
+459864643
+1759277143994579000
diff --git a/.parcel-cache/snapshot-9d321af8a9fb7fcb.txt b/.parcel-cache/snapshot-9d321af8a9fb7fcb.txt
@@ -0,0 +1,2 @@
+462702166
+1759340017720060000
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-BgSD6qdp.css b/dist/samples/react-map-3d-custom/dist/assets/index-BgSD6qdp.css
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-BwvnK9WT.js b/dist/samples/react-map-3d-custom/dist/assets/index-BwvnK9WT.js
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-DZzT56LB.js b/dist/samples/react-map-3d-custom/dist/assets/index-DZzT56LB.js
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-Dqf12wk2.js b/dist/samples/react-map-3d-custom/dist/assets/index-Dqf12wk2.js
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-Dycji42R.css b/dist/samples/react-map-3d-custom/dist/assets/index-Dycji42R.css
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-gKqRxauw.js b/dist/samples/react-map-3d-custom/dist/assets/index-gKqRxauw.js
diff --git a/dist/samples/react-map-3d-custom/dist/assets/index-tn0RQdqM.css b/dist/samples/react-map-3d-custom/dist/assets/index-tn0RQdqM.css
diff --git a/dist/samples/react-map-3d-custom/dist/index.html b/dist/samples/react-map-3d-custom/dist/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>Example: Photorealistic 3D Map</title>
+
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <script type="module" crossorigin src="./assets/index-Dqf12wk2.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BgSD6qdp.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/dist/samples/react-map-3d-custom/docs/index.html b/dist/samples/react-map-3d-custom/docs/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>Example: Photorealistic 3D Map</title>
+
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import '@vis.gl/react-google-maps/examples.css';
+      import '@vis.gl/react-google-maps/examples.js';
+      import {renderToDom} from './src/app';
+
+      renderToDom(document.querySelector('#app'));
+    </script>
+  </body>
+</html>
diff --git a/dist/samples/react-map-3d-custom/docs/src/app.js b/dist/samples/react-map-3d-custom/docs/src/app.js
@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { APIProvider } from '@vis.gl/react-google-maps';
+import { Map3D } from './map-3d';
+import './styles.css';
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY;
+const INITIAL_VIEW_PROPS = {
+    center: { lat: 37.69637422900176, lng: -118.5041096347873, altitude: 4020000 },
+    range: 50000,
+    heading: 0,
+    tilt: 25,
+    roll: 0
+};
+const Map3DExample = () => {
+    const [viewProps, setViewProps] = useState(INITIAL_VIEW_PROPS);
+    const handleCameraChange = useCallback((props) => {
+        setViewProps(oldProps => ({ ...oldProps, ...props }));
+    }, []);
+    const handleMapClick = useCallback((ev) => {
+        if (!ev.detail.latLng)
+            return;
+        const { lat, lng } = ev.detail.latLng;
+        setViewProps(p => ({ ...p, center: { lat, lng, altitude: 0 } }));
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Map3D, { ...viewProps, onCameraChange: handleCameraChange, defaultLabelsDisabled: true }) }));
+};
+const App = () => {
+    const nonAlphaVersionLoaded = Boolean(globalThis &&
+        globalThis.google?.maps?.version &&
+        !globalThis.google?.maps?.version.endsWith('-alpha'));
+    if (nonAlphaVersionLoaded) {
+        location.reload();
+        return;
+    }
+    return (_jsx(APIProvider, { apiKey: API_KEY, version: 'nightly', children: _jsx(Map3DExample, {}) }));
+};
+export default App;
+export function renderToDom(container) {
+    const root = createRoot(container);
+    root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
+}
diff --git a/dist/samples/react-map-3d-custom/docs/src/app.tsx b/dist/samples/react-map-3d-custom/docs/src/app.tsx
@@ -0,0 +1,73 @@
+import React, {useCallback, useState} from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {APIProvider, MapMouseEvent} from '@vis.gl/react-google-maps';
+
+import {Map3D, Map3DCameraProps} from './map-3d';
+
+import './styles.css';
+
+const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+
+const INITIAL_VIEW_PROPS = {
+  center: {lat: 37.69637422900176, lng:-118.5041096347873, altitude: 4020000},
+  range: 50000,
+  heading: 0,
+  tilt: 25,
+  roll: 0
+};
+
+const Map3DExample = () => {
+  const [viewProps, setViewProps] = useState(INITIAL_VIEW_PROPS);
+
+  const handleCameraChange = useCallback((props: Map3DCameraProps) => {
+    setViewProps(oldProps => ({...oldProps, ...props}));
+  }, []);
+
+  const handleMapClick = useCallback((ev: MapMouseEvent) => {
+    if (!ev.detail.latLng) return;
+
+    const {lat, lng} = ev.detail.latLng;
+    setViewProps(p => ({...p, center: {lat, lng, altitude: 0}}));
+  }, []);
+
+  return (
+    <>
+      <Map3D
+        {...viewProps}
+        onCameraChange={handleCameraChange}
+        defaultLabelsDisabled
+      />
+    </>
+  );
+};
+
+const App = () => {
+  const nonAlphaVersionLoaded = Boolean(
+    globalThis &&
+      globalThis.google?.maps?.version &&
+      !globalThis.google?.maps?.version.endsWith('-alpha')
+  );
+
+  if (nonAlphaVersionLoaded) {
+    location.reload();
+    return;
+  }
+
+  return (
+    <APIProvider apiKey={API_KEY} version={'nightly'}>
+      <Map3DExample />
+    </APIProvider>
+  );
+};
+export default App;
+
+export function renderToDom(container: HTMLElement) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/dist/samples/react-map-3d-custom/docs/src/styles.css b/dist/samples/react-map-3d-custom/docs/src/styles.css
@@ -0,0 +1 @@
+/* Add custom styles here */