docs: add ROADMAP mode to 3D routes example and document alpha status

Author: anglarett

examples/map-3d-routes/README.md

@@ -20,11 +20,12 @@ GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
 
 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
 ```

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;

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 (
     <>
       <Map3D
-        defaultCenter={{ lat: 43.67, lng: -79.40, altitude: 100 }}
+        defaultCenter={{lat: 43.67, lng: -79.4, altitude: 100}}
         defaultRange={12000}
         defaultHeading={0}
         defaultTilt={60}
         defaultRoll={0}
         defaultLabelsDisabled
+        mode="ROADMAP"
         mapId="49ae42fed52588c3"
-        style={{ width: '100%', height: '100%' }}>
+        style={{width: '100%', height: '100%'}}>
         <Programmatic3DRoute />
       </Map3D>
     </>

examples/map-3d-routes/src/control-panel.tsx

@@ -6,13 +6,14 @@ function ControlPanel() {
     <div className="control-panel">
       <h3>3D Map Routes (JS API)</h3>
       <p>
-        This example demonstrates how to retrieve a route programmatically using the
-        modern <code>google.maps.routes.Route.computeRoutes(...)</code> SDK method
-        and visualize it cleanly using a custom-styled 3D polyline.
+        This example demonstrates how to retrieve a route programmatically using
+        the modern <code>google.maps.routes.Route.computeRoutes(...)</code> SDK
+        method and visualize it cleanly using a custom-styled 3D polyline.
       </p>
 
       <p className={'note'}>
-        <strong>Note:</strong> This utilizes custom 3D elements and routing from the Maps JS API{' '}
+        <strong>Note:</strong> This utilizes custom 3D elements and routing from
+        the Maps JS API{' '}
         <a
           href="https://developers.google.com/maps/documentation/javascript/reference/route"
           target="_new">
@@ -24,7 +25,8 @@ function ControlPanel() {
           target="_new">
           3D Map
         </a>{' '}
-        libraries.
+        libraries.{' '}
+        <strong>Note that ROADMAP mode is currently in Alpha.</strong>
       </p>
 
       <div className="links">

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')
       }
     }