From 1bdc2ddaa07752a6693f970b2ddd2152985a3698 Mon Sep 17 00:00:00 2001 From: anglarett Date: Thu, 21 May 2026 10:40:54 +0200 Subject: [PATCH 1/3] feat: add map-3d-route example with 3D Map and custom route element --- .gitignore | 1 + examples/map-3d-route/README.md | 38 +++++++++++ examples/map-3d-route/index.html | 32 +++++++++ examples/map-3d-route/package.json | 18 +++++ examples/map-3d-route/src/app.css | 10 +++ examples/map-3d-route/src/app.tsx | 74 +++++++++++++++++++++ examples/map-3d-route/src/control-panel.css | 42 ++++++++++++ examples/map-3d-route/src/control-panel.tsx | 41 ++++++++++++ examples/map-3d-route/tsconfig.json | 9 +++ examples/map-3d-route/vite.config.js | 30 +++++++++ website/src/examples-sidebar.js | 1 + website/src/examples/map-3d-route.mdx | 5 ++ 12 files changed, 301 insertions(+) create mode 100644 examples/map-3d-route/README.md create mode 100644 examples/map-3d-route/index.html create mode 100644 examples/map-3d-route/package.json create mode 100644 examples/map-3d-route/src/app.css create mode 100644 examples/map-3d-route/src/app.tsx create mode 100644 examples/map-3d-route/src/control-panel.css create mode 100644 examples/map-3d-route/src/control-panel.tsx create mode 100644 examples/map-3d-route/tsconfig.json create mode 100644 examples/map-3d-route/vite.config.js create mode 100644 website/src/examples/map-3d-route.mdx diff --git a/.gitignore b/.gitignore index 9bc3d3d6..6463aab5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /node_modules /dist +/.env* /examples/**/package-lock.json /examples/**/node_modules /examples/**/dist diff --git a/examples/map-3d-route/README.md b/examples/map-3d-route/README.md new file mode 100644 index 00000000..94ad068a --- /dev/null +++ b/examples/map-3d-route/README.md @@ -0,0 +1,38 @@ +# 3D Map Route Example + +This is a standalone example demonstrating how to render a client-side 3D route using the modern `` custom element inside a client-side 3D Map (``). + +It showcases the seamless integration of the Maps JS API routes and maps3d libraries in React. + +## Google Maps Platform API Key & Requirements + +To run this example locally, you must satisfy the following platform requirements: + +1. **Billing Enabled:** The Routes API and 3D Maps are premium Google Maps features and require a Google Cloud project with an **active billing account** linked to it. +2. **Enabled APIs & Alpha Channel:** Ensure that both the **Routes API** and the **Maps JavaScript API** are explicitly enabled in your Google Cloud Console. **Note:** The `` custom element is currently only available in the **Alpha channel** (e.g., by setting `version="alpha"` on your ``). +3. **API Key Environment Variable:** The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +## WebGL2 Browser Compatibility + +Photorealistic 3D Maps require WebGL2 support and hardware graphics acceleration. Please refer to the official **[Google Maps 3D Maps Browser Support Guide](https://developers.google.com/maps/documentation/javascript/3d-maps-support)** for detailed browser requirements and system compatibility guidelines. + +_(Note: Virtual machine or remote desktop environments like Cloudtop do not support direct WebGL2 hardware rendering overlays by default. Please run the example locally on your physical host machine)._ + +## Development & How to Run + +Go into the example directory: + +```shell +cd examples/map-3d-route +``` + +Install dependencies and start the development server: + +```shell +npm install +npm run start-local +``` diff --git a/examples/map-3d-route/index.html b/examples/map-3d-route/index.html new file mode 100644 index 00000000..d868ce78 --- /dev/null +++ b/examples/map-3d-route/index.html @@ -0,0 +1,32 @@ + + + + + + Example: 3D Map Route + + + + +
+ + + diff --git a/examples/map-3d-route/package.json b/examples/map-3d-route/package.json new file mode 100644 index 00000000..574fd9e8 --- /dev/null +++ b/examples/map-3d-route/package.json @@ -0,0 +1,18 @@ +{ + "type": "module", + "dependencies": { + "@googlemaps/js-api-loader": "^2.0.2", + "@vis.gl/react-google-maps": "latest", + "fast-deep-equal": "^3.1.3", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "typescript": "^6.0.3", + "vite": "^5.4.11" + }, + "scripts": { + "start": "vite", + "start-local": "vite --config ../vite.config.local.js", + "build-local": "vite build --config ../vite.config.local.js", + "build": "vite build" + } +} diff --git a/examples/map-3d-route/src/app.css b/examples/map-3d-route/src/app.css new file mode 100644 index 00000000..b435bbfe --- /dev/null +++ b/examples/map-3d-route/src/app.css @@ -0,0 +1,10 @@ +/* Styles for 3D Map Route Example */ +html, +body, +#app { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; +} diff --git a/examples/map-3d-route/src/app.tsx b/examples/map-3d-route/src/app.tsx new file mode 100644 index 00000000..8e64a36f --- /dev/null +++ b/examples/map-3d-route/src/app.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import {createRoot} from 'react-dom/client'; + +import {APIProvider, Map3D, useMapsLibrary} from '@vis.gl/react-google-maps'; +import ControlPanel from './control-panel'; + +import './app.css'; + +const API_KEY = + globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string); + +// Tell TypeScript to allow the custom element +declare global { + namespace JSX { + interface IntrinsicElements { + 'gmp-route-3d': React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + > & { + 'autofits-camera'?: boolean; + 'departure-time'?: string; + destination?: any; + origin?: any; + 'routing-preference'?: string; + 'travel-mode'?: string; + }; + } + } +} + +const Map3DRouteExample = () => { + // Make sure routes and maps3d libraries are loaded to register the custom elements + useMapsLibrary('routes'); + useMapsLibrary('maps3d'); + + return ( + <> + + + + + ); +}; + +const App = () => { + return ( + + + + + ); +}; +export default App; + +export function renderToDom(container: HTMLElement) { + const root = createRoot(container); + + root.render( + + + + ); +} diff --git a/examples/map-3d-route/src/control-panel.css b/examples/map-3d-route/src/control-panel.css new file mode 100644 index 00000000..c668bff7 --- /dev/null +++ b/examples/map-3d-route/src/control-panel.css @@ -0,0 +1,42 @@ +.control-panel { + position: absolute; + top: 20px; + right: 20px; + background: rgba(255, 255, 255, 0.95); + padding: 15px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 300px; + z-index: 10; + font-family: sans-serif; +} + +.control-panel h3 { + margin-top: 0; + margin-bottom: 8px; + font-size: 16px; +} + +.control-panel p { + font-size: 12px; + margin: 0 0 10px 0; + color: #4a5568; +} + +.control-panel p.note { + font-size: 11px; + background: #edf2f7; + padding: 6px; + border-radius: 4px; +} + +.control-panel .links a { + font-size: 12px; + color: #3182ce; + text-decoration: none; +} + +.control-panel p.note a { + color: #3182ce; + text-decoration: underline; +} diff --git a/examples/map-3d-route/src/control-panel.tsx b/examples/map-3d-route/src/control-panel.tsx new file mode 100644 index 00000000..4f9023cd --- /dev/null +++ b/examples/map-3d-route/src/control-panel.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import './control-panel.css'; + +function ControlPanel() { + return ( +
+

3D Map Routes

+

+ This example demonstrates how to render a client-side 3D route using the + modern <gmp-route-3d> custom element inside a 3D Map. +

+ +

+ Note: This utilizes custom 3D elements from the Maps JS + API{' '} + + routes + {' '} + and{' '} + + maps3d + {' '} + libraries. +

+ + +
+ ); +} + +export default React.memo(ControlPanel); diff --git a/examples/map-3d-route/tsconfig.json b/examples/map-3d-route/tsconfig.json new file mode 100644 index 00000000..e7170a03 --- /dev/null +++ b/examples/map-3d-route/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "website-examples/*": ["../*"] + } + } +} diff --git a/examples/map-3d-route/vite.config.js b/examples/map-3d-route/vite.config.js new file mode 100644 index 00000000..8de2a313 --- /dev/null +++ b/examples/map-3d-route/vite.config.js @@ -0,0 +1,30 @@ +import {defineConfig, loadEnv} from 'vite'; +import {resolve} from 'node:path'; + +export default defineConfig(({mode}) => { + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, resolve('../../'), ''); + + return { + envDir: '../../', + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) + }, + resolve: { + alias: { + '@vis.gl/react-google-maps/examples.js': resolve( + '../../website/static/scripts/examples.js' + ), + '@vis.gl/react-google-maps/examples.css': resolve( + '../../examples/examples.css' + ), + '@vis.gl/react-google-maps': resolve('../../src/index.ts'), + '@googlemaps/js-api-loader': resolve( + './node_modules/@googlemaps/js-api-loader' + ), + 'fast-deep-equal': resolve('./node_modules/fast-deep-equal'), + react: resolve('./node_modules/react'), + 'react-dom': resolve('./node_modules/react-dom') + } + } + }; +}); diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js index 7e6473bc..d39c92a1 100644 --- a/website/src/examples-sidebar.js +++ b/website/src/examples-sidebar.js @@ -29,6 +29,7 @@ const sidebars = { 'deckgl-overlay', 'map-3d', 'map-3d-markers', + 'map-3d-route', 'extended-component-library', 'static-map', 'places-ui-kit' diff --git a/website/src/examples/map-3d-route.mdx b/website/src/examples/map-3d-route.mdx new file mode 100644 index 00000000..889e7f0f --- /dev/null +++ b/website/src/examples/map-3d-route.mdx @@ -0,0 +1,5 @@ +# 3D Map Route + +import App from 'website-examples/map-3d-route/src/app'; + + From e83894623d8df1a223fb28185cad683bc1dc0eb3 Mon Sep 17 00:00:00 2001 From: anglarett Date: Thu, 21 May 2026 12:41:10 +0200 Subject: [PATCH 2/3] feat: rename examples and re-implement map-3d-routes using client-side Routes SDK --- .../README.md | 0 .../index.html | 0 .../package.json | 0 .../src/app.css | 0 .../src/app.tsx | 0 .../src/control-panel.css | 0 .../src/control-panel.tsx | 0 .../tsconfig.json | 0 .../vite.config.js | 0 examples/map-3d-routes/README.md | 37 +++++++ examples/map-3d-routes/index.html | 31 ++++++ examples/map-3d-routes/package.json | 19 ++++ examples/map-3d-routes/src/app.css | 8 ++ examples/map-3d-routes/src/app.tsx | 104 ++++++++++++++++++ examples/map-3d-routes/src/control-panel.css | 50 +++++++++ examples/map-3d-routes/src/control-panel.tsx | 47 ++++++++ examples/map-3d-routes/tsconfig.json | 5 + examples/map-3d-routes/vite.config.js | 28 +++++ website/src/examples-sidebar.js | 5 +- website/src/examples/map-3d-route.mdx | 5 - website/src/examples/map-3d-routes-widget.mdx | 5 + website/src/examples/map-3d-routes.mdx | 5 + 22 files changed, 342 insertions(+), 7 deletions(-) rename examples/{map-3d-route => map-3d-routes-widget}/README.md (100%) rename examples/{map-3d-route => map-3d-routes-widget}/index.html (100%) rename examples/{map-3d-route => map-3d-routes-widget}/package.json (100%) rename examples/{map-3d-route => map-3d-routes-widget}/src/app.css (100%) rename examples/{map-3d-route => map-3d-routes-widget}/src/app.tsx (100%) rename examples/{map-3d-route => map-3d-routes-widget}/src/control-panel.css (100%) rename examples/{map-3d-route => map-3d-routes-widget}/src/control-panel.tsx (100%) rename examples/{map-3d-route => map-3d-routes-widget}/tsconfig.json (100%) rename examples/{map-3d-route => map-3d-routes-widget}/vite.config.js (100%) create mode 100644 examples/map-3d-routes/README.md create mode 100644 examples/map-3d-routes/index.html create mode 100644 examples/map-3d-routes/package.json create mode 100644 examples/map-3d-routes/src/app.css create mode 100644 examples/map-3d-routes/src/app.tsx create mode 100644 examples/map-3d-routes/src/control-panel.css create mode 100644 examples/map-3d-routes/src/control-panel.tsx create mode 100644 examples/map-3d-routes/tsconfig.json create mode 100644 examples/map-3d-routes/vite.config.js delete mode 100644 website/src/examples/map-3d-route.mdx create mode 100644 website/src/examples/map-3d-routes-widget.mdx create mode 100644 website/src/examples/map-3d-routes.mdx diff --git a/examples/map-3d-route/README.md b/examples/map-3d-routes-widget/README.md similarity index 100% rename from examples/map-3d-route/README.md rename to examples/map-3d-routes-widget/README.md diff --git a/examples/map-3d-route/index.html b/examples/map-3d-routes-widget/index.html similarity index 100% rename from examples/map-3d-route/index.html rename to examples/map-3d-routes-widget/index.html diff --git a/examples/map-3d-route/package.json b/examples/map-3d-routes-widget/package.json similarity index 100% rename from examples/map-3d-route/package.json rename to examples/map-3d-routes-widget/package.json diff --git a/examples/map-3d-route/src/app.css b/examples/map-3d-routes-widget/src/app.css similarity index 100% rename from examples/map-3d-route/src/app.css rename to examples/map-3d-routes-widget/src/app.css diff --git a/examples/map-3d-route/src/app.tsx b/examples/map-3d-routes-widget/src/app.tsx similarity index 100% rename from examples/map-3d-route/src/app.tsx rename to examples/map-3d-routes-widget/src/app.tsx diff --git a/examples/map-3d-route/src/control-panel.css b/examples/map-3d-routes-widget/src/control-panel.css similarity index 100% rename from examples/map-3d-route/src/control-panel.css rename to examples/map-3d-routes-widget/src/control-panel.css diff --git a/examples/map-3d-route/src/control-panel.tsx b/examples/map-3d-routes-widget/src/control-panel.tsx similarity index 100% rename from examples/map-3d-route/src/control-panel.tsx rename to examples/map-3d-routes-widget/src/control-panel.tsx diff --git a/examples/map-3d-route/tsconfig.json b/examples/map-3d-routes-widget/tsconfig.json similarity index 100% rename from examples/map-3d-route/tsconfig.json rename to examples/map-3d-routes-widget/tsconfig.json diff --git a/examples/map-3d-route/vite.config.js b/examples/map-3d-routes-widget/vite.config.js similarity index 100% rename from examples/map-3d-route/vite.config.js rename to examples/map-3d-routes-widget/vite.config.js diff --git a/examples/map-3d-routes/README.md b/examples/map-3d-routes/README.md new file mode 100644 index 00000000..e899749a --- /dev/null +++ b/examples/map-3d-routes/README.md @@ -0,0 +1,37 @@ +# 3D Map Routes Example (JS API Programmatic) + +This example shows how to programmatically retrieve route details using the modern `google.maps.routes.Route.computeRoutes(...)` method and render a thinned 3D polyline overlay dynamically on a photorealistic 3D Map (``). + +It showcases full visual control and thinned styling of polylines using the client-side Javascript SDK. + +## Google Maps Platform API Key & Requirements + +To run this example locally, you must satisfy the following platform requirements: + +1. **Billing Enabled:** The Routes API and 3D Maps are premium Google Maps features and require a Google Cloud project with an **active billing account** linked to it. +2. **Enabled APIs & Alpha Channel:** Ensure that both the **Routes API** and the **Maps JavaScript API** are explicitly enabled in your Google Cloud Console. **Note:** 3D Maps and elements are currently only available in the **Alpha channel** (e.g., by setting `version="alpha"` on your ``). +3. **API Key Environment Variable:** The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +## Browser Compatibility + +Photorealistic 3D Maps require WebGL2 support and hardware graphics acceleration. Please refer to the official **[Google Maps 3D Maps Browser Support Guide](https://developers.google.com/maps/documentation/javascript/3d-maps-support)** for detailed browser requirements and system compatibility guidelines. + +*(Note: Virtual machine or remote desktop environments like Cloudtop do not support direct WebGL2 hardware rendering overlays by default. Please run the example locally on your physical host machine).* + +## Development & How to Run + +Go into the example directory: +```shell +cd examples/map-3d-routes +``` + +Install dependencies and start the development server: + +```shell +npm install +npm run start-local +``` diff --git a/examples/map-3d-routes/index.html b/examples/map-3d-routes/index.html new file mode 100644 index 00000000..993a7c13 --- /dev/null +++ b/examples/map-3d-routes/index.html @@ -0,0 +1,31 @@ + + + + + + Example: Routes API Rendering + + + + +
+ + + diff --git a/examples/map-3d-routes/package.json b/examples/map-3d-routes/package.json new file mode 100644 index 00000000..4dec837c --- /dev/null +++ b/examples/map-3d-routes/package.json @@ -0,0 +1,19 @@ +{ + "name": "map-3d-routes", + "type": "module", + "dependencies": { + "@googlemaps/js-api-loader": "^2.0.2", + "@vis.gl/react-google-maps": "latest", + "fast-deep-equal": "^3.1.3", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "typescript": "^6.0.3", + "vite": "^5.4.11" + }, + "scripts": { + "start": "vite", + "start-local": "vite --config ../vite.config.local.js", + "build-local": "vite build --config ../vite.config.local.js", + "build": "vite build" + } +} diff --git a/examples/map-3d-routes/src/app.css b/examples/map-3d-routes/src/app.css new file mode 100644 index 00000000..e0c07b46 --- /dev/null +++ b/examples/map-3d-routes/src/app.css @@ -0,0 +1,8 @@ +/* Styles for 3D Map Routes Programmatic Example */ +html, body, #app { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; +} diff --git a/examples/map-3d-routes/src/app.tsx b/examples/map-3d-routes/src/app.tsx new file mode 100644 index 00000000..4a8d0ac4 --- /dev/null +++ b/examples/map-3d-routes/src/app.tsx @@ -0,0 +1,104 @@ +import React, { useEffect, useState } from 'react'; +import {createRoot} from 'react-dom/client'; + +import { + APIProvider, + Map3D, + useMapsLibrary, + useMap3D +} from '@vis.gl/react-google-maps'; +import ControlPanel from './control-panel'; + +import './app.css'; + +const API_KEY = + globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string); + +const Programmatic3DRoute = () => { + const map = useMap3D(); + const routesLibrary = useMapsLibrary('routes') as any; + const maps3dLibrary = useMapsLibrary('maps3d') as any; + + useEffect(() => { + console.log("=== 3D Routes Diagnostics ==="); + console.log("Map3D instance resolved:", map); + console.log("routesLibrary state:", routesLibrary); + console.log("maps3dLibrary state:", maps3dLibrary); + if (window.google && window.google.maps) { + console.log("Global window.google.maps keys:", Object.keys(window.google.maps)); + } + }, [map, routesLibrary, maps3dLibrary]); + + useEffect(() => { + if (!map || !routesLibrary || !maps3dLibrary) return; + + let polyline: any = null; + + // Fetch the route programmatically using SDK computeRoutes + routesLibrary.Route.computeRoutes({ + origin: { lat: 43.65, lng: -79.38 }, + destination: { lat: 43.69, lng: -79.42 }, + travelMode: 'DRIVING', + fields: ['*'] + }).then((response: any) => { + const route = response.routes?.[0]; + if (!route) return; + + // Instantiate gmp-polyline-3d using the browser's custom element registry + polyline = document.createElement('gmp-polyline-3d') as any; + polyline.path = route.path; + polyline.strokeColor = '#b903adff'; + polyline.strokeWidth = 5; // 5 meters wide (thinned, real-world width!) + polyline.altitudeMode = 'RELATIVE_TO_GROUND'; + + map.appendChild(polyline); + }); + + // Clean up polyline from the 3D Map on unmount + return () => { + if (polyline && polyline.parentNode) { + polyline.parentNode.removeChild(polyline); + } + }; + }, [map, routesLibrary, maps3dLibrary]); + + return null; +}; + +const Map3DRoutesExample = () => { + return ( + <> + + + + + ); +}; + +const App = () => { + return ( + + + + + ); +}; +export default App; + +export function renderToDom(container: HTMLElement) { + const root = createRoot(container); + + root.render( + + + + ); +} diff --git a/examples/map-3d-routes/src/control-panel.css b/examples/map-3d-routes/src/control-panel.css new file mode 100644 index 00000000..e253f170 --- /dev/null +++ b/examples/map-3d-routes/src/control-panel.css @@ -0,0 +1,50 @@ +.control-panel { + position: absolute; + top: 20px; + right: 20px; + background: rgba(255, 255, 255, 0.95); + padding: 15px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 300px; + z-index: 10; + font-family: sans-serif; +} + +.control-panel h3 { + margin-top: 0; + margin-bottom: 8px; + font-size: 16px; +} + +.control-panel p { + font-size: 12px; + margin: 0 0 10px 0; + color: #4a5568; +} + +.control-panel p.note { + font-size: 11px; + background: #edf2f7; + padding: 6px; + border-radius: 4px; +} + +.control-panel .links a { + font-size: 12px; + color: #3182ce; + text-decoration: none; +} + +.control-panel p.note a { + color: #3182ce; + text-decoration: underline; +} + +.control-panel code { + word-break: break-word; + overflow-wrap: anywhere; + background: #edf2f7; + padding: 2px 4px; + border-radius: 4px; +} diff --git a/examples/map-3d-routes/src/control-panel.tsx b/examples/map-3d-routes/src/control-panel.tsx new file mode 100644 index 00000000..399f52bd --- /dev/null +++ b/examples/map-3d-routes/src/control-panel.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import './control-panel.css'; + +function ControlPanel() { + return ( +
+

3D Map Routes (JS API)

+

+ This example demonstrates how to retrieve a route programmatically using the + modern google.maps.routes.Route.computeRoutes(...) SDK method + and visualize it cleanly using a custom-styled 3D polyline. +

+ +

+ Note: This utilizes custom 3D elements and routing from the Maps JS API{' '} + + Route + {' '} + and{' '} + + 3D Map + {' '} + libraries. +

+ + +
+ ); +} + +export default React.memo(ControlPanel); diff --git a/examples/map-3d-routes/tsconfig.json b/examples/map-3d-routes/tsconfig.json new file mode 100644 index 00000000..5eea691a --- /dev/null +++ b/examples/map-3d-routes/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../tsconfig.base.json", + "include": ["src/**/*", "types/**/*"], + "exclude": ["dist", "node_modules"] +} diff --git a/examples/map-3d-routes/vite.config.js b/examples/map-3d-routes/vite.config.js new file mode 100644 index 00000000..7891a9d7 --- /dev/null +++ b/examples/map-3d-routes/vite.config.js @@ -0,0 +1,28 @@ +import {defineConfig, loadEnv} from 'vite'; +import {resolve} from 'node:path'; + +export default defineConfig(({mode}) => { + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, resolve('../../'), ''); + + return { + envDir: '../../', + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) + }, + resolve: { + alias: { + '@vis.gl/react-google-maps/examples.js': resolve( + '../../website/static/scripts/examples.js' + ), + '@vis.gl/react-google-maps/examples.css': resolve( + '../../examples/examples.css' + ), + '@vis.gl/react-google-maps': resolve('../../src/index.ts'), + '@googlemaps/js-api-loader': resolve('./node_modules/@googlemaps/js-api-loader'), + 'fast-deep-equal': resolve('./node_modules/fast-deep-equal'), + 'react': resolve('./node_modules/react'), + 'react-dom': resolve('./node_modules/react-dom') + } + } + }; +}); diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js index d39c92a1..1415e622 100644 --- a/website/src/examples-sidebar.js +++ b/website/src/examples-sidebar.js @@ -26,10 +26,11 @@ const sidebars = { 'autocomplete', 'directions', 'routes-api', - 'deckgl-overlay', 'map-3d', 'map-3d-markers', - 'map-3d-route', + 'map-3d-routes', + 'map-3d-routes-widget', + 'deckgl-overlay', 'extended-component-library', 'static-map', 'places-ui-kit' diff --git a/website/src/examples/map-3d-route.mdx b/website/src/examples/map-3d-route.mdx deleted file mode 100644 index 889e7f0f..00000000 --- a/website/src/examples/map-3d-route.mdx +++ /dev/null @@ -1,5 +0,0 @@ -# 3D Map Route - -import App from 'website-examples/map-3d-route/src/app'; - - diff --git a/website/src/examples/map-3d-routes-widget.mdx b/website/src/examples/map-3d-routes-widget.mdx new file mode 100644 index 00000000..10a1d6e3 --- /dev/null +++ b/website/src/examples/map-3d-routes-widget.mdx @@ -0,0 +1,5 @@ +# 3D Map Routes (Widget) + +import App from 'website-examples/map-3d-routes-widget/src/app'; + + diff --git a/website/src/examples/map-3d-routes.mdx b/website/src/examples/map-3d-routes.mdx new file mode 100644 index 00000000..7d59664f --- /dev/null +++ b/website/src/examples/map-3d-routes.mdx @@ -0,0 +1,5 @@ +# 3D Map Routes (JS API) + +import App from 'website-examples/map-3d-routes/src/app'; + + From 708c018ff04c8060a1c4a9fb7e452e8fa02e7cff Mon Sep 17 00:00:00 2001 From: anglarett Date: Thu, 21 May 2026 14:03:15 +0200 Subject: [PATCH 3/3] docs: add ROADMAP mode to 3D routes example and document alpha status --- examples/map-3d-routes/README.md | 3 ++- examples/map-3d-routes/src/app.css | 4 +++- examples/map-3d-routes/src/app.tsx | 24 ++++++++++++-------- examples/map-3d-routes/src/control-panel.tsx | 12 ++++++---- examples/map-3d-routes/vite.config.js | 6 +++-- 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/examples/map-3d-routes/README.md b/examples/map-3d-routes/README.md index e899749a..656b8628 100644 --- a/examples/map-3d-routes/README.md +++ b/examples/map-3d-routes/README.md @@ -20,11 +20,12 @@ GOOGLE_MAPS_API_KEY="" Photorealistic 3D Maps require WebGL2 support and hardware graphics acceleration. Please refer to the official **[Google Maps 3D Maps Browser Support Guide](https://developers.google.com/maps/documentation/javascript/3d-maps-support)** for detailed browser requirements and system compatibility guidelines. -*(Note: Virtual machine or remote desktop environments like Cloudtop do not support direct WebGL2 hardware rendering overlays by default. Please run the example locally on your physical host machine).* +_(Note: Virtual machine or remote desktop environments like Cloudtop do not support direct WebGL2 hardware rendering overlays by default. Please run the example locally on your physical host machine)._ ## Development & How to Run Go into the example directory: + ```shell cd examples/map-3d-routes ``` diff --git a/examples/map-3d-routes/src/app.css b/examples/map-3d-routes/src/app.css index e0c07b46..a1318085 100644 --- a/examples/map-3d-routes/src/app.css +++ b/examples/map-3d-routes/src/app.css @@ -1,5 +1,7 @@ /* Styles for 3D Map Routes Programmatic Example */ -html, body, #app { +html, +body, +#app { width: 100%; height: 100%; margin: 0; diff --git a/examples/map-3d-routes/src/app.tsx b/examples/map-3d-routes/src/app.tsx index 4a8d0ac4..31c7c168 100644 --- a/examples/map-3d-routes/src/app.tsx +++ b/examples/map-3d-routes/src/app.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import {createRoot} from 'react-dom/client'; import { @@ -20,12 +20,15 @@ const Programmatic3DRoute = () => { const maps3dLibrary = useMapsLibrary('maps3d') as any; useEffect(() => { - console.log("=== 3D Routes Diagnostics ==="); - console.log("Map3D instance resolved:", map); - console.log("routesLibrary state:", routesLibrary); - console.log("maps3dLibrary state:", maps3dLibrary); + console.log('=== 3D Routes Diagnostics ==='); + console.log('Map3D instance resolved:', map); + console.log('routesLibrary state:', routesLibrary); + console.log('maps3dLibrary state:', maps3dLibrary); if (window.google && window.google.maps) { - console.log("Global window.google.maps keys:", Object.keys(window.google.maps)); + console.log( + 'Global window.google.maps keys:', + Object.keys(window.google.maps) + ); } }, [map, routesLibrary, maps3dLibrary]); @@ -36,8 +39,8 @@ const Programmatic3DRoute = () => { // Fetch the route programmatically using SDK computeRoutes routesLibrary.Route.computeRoutes({ - origin: { lat: 43.65, lng: -79.38 }, - destination: { lat: 43.69, lng: -79.42 }, + origin: {lat: 43.65, lng: -79.38}, + destination: {lat: 43.69, lng: -79.42}, travelMode: 'DRIVING', fields: ['*'] }).then((response: any) => { @@ -69,14 +72,15 @@ const Map3DRoutesExample = () => { return ( <> + style={{width: '100%', height: '100%'}}> diff --git a/examples/map-3d-routes/src/control-panel.tsx b/examples/map-3d-routes/src/control-panel.tsx index 399f52bd..ee948c05 100644 --- a/examples/map-3d-routes/src/control-panel.tsx +++ b/examples/map-3d-routes/src/control-panel.tsx @@ -6,13 +6,14 @@ function ControlPanel() {

3D Map Routes (JS API)

- This example demonstrates how to retrieve a route programmatically using the - modern google.maps.routes.Route.computeRoutes(...) SDK method - and visualize it cleanly using a custom-styled 3D polyline. + This example demonstrates how to retrieve a route programmatically using + the modern google.maps.routes.Route.computeRoutes(...) SDK + method and visualize it cleanly using a custom-styled 3D polyline.

- Note: This utilizes custom 3D elements and routing from the Maps JS API{' '} + Note: This utilizes custom 3D elements and routing from + the Maps JS API{' '} @@ -24,7 +25,8 @@ function ControlPanel() { target="_new"> 3D Map {' '} - libraries. + libraries.{' '} + Note that ROADMAP mode is currently in Alpha.

diff --git a/examples/map-3d-routes/vite.config.js b/examples/map-3d-routes/vite.config.js index 7891a9d7..8de2a313 100644 --- a/examples/map-3d-routes/vite.config.js +++ b/examples/map-3d-routes/vite.config.js @@ -18,9 +18,11 @@ export default defineConfig(({mode}) => { '../../examples/examples.css' ), '@vis.gl/react-google-maps': resolve('../../src/index.ts'), - '@googlemaps/js-api-loader': resolve('./node_modules/@googlemaps/js-api-loader'), + '@googlemaps/js-api-loader': resolve( + './node_modules/@googlemaps/js-api-loader' + ), 'fast-deep-equal': resolve('./node_modules/fast-deep-equal'), - 'react': resolve('./node_modules/react'), + react: resolve('./node_modules/react'), 'react-dom': resolve('./node_modules/react-dom') } }