googlemaps-samples · willum070 · Apr 15, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/samples/.DS_Store b/samples/.DS_Store
diff --git a/samples/.gitignore b/samples/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+**/.DS_Store
diff --git a/samples/3d-camera-to-around/index.html b/samples/3d-camera-to-around/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_3d_camera_to_around] -->
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- prettier-ignore -->
+    <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))})
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
+  </body>
+</html>
+<!-- [END maps_3d_camera_to_around] -->
diff --git a/samples/3d-camera-to-around/index.ts b/samples/3d-camera-to-around/index.ts
@@ -0,0 +1,53 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+// @ts-nocheck
+// [START maps_3d_camera_to_around]
+async function init() {
+    const { Map3DElement } = await google.maps.importLibrary("maps3d");
+
+    const map = new Map3DElement(
+        { center: { lat: 37.79810773998413, lng : -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, }
+    );
+
+    map.mode = "SATELLITE";
+
+    document.body.append(map);
+
+    // Used for both the fly to function and the location to fly around.
+    const flyToCamera = { 
+        center: { lat: 21.263523536467105, lng : -157.80663691939296, altitude: 80.28936069489404 }, 
+        range: 1500.8202963253427, tilt: 76.9173260789542 ,heading: -44.59196007522445,
+    }; 
+
+    // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
+    map.flyCameraTo({
+        // Where we are going to.
+        endCamera: flyToCamera,
+        // How long we want the flight to take.
+        durationMillis: 30000,
+    });
+
+    // When the animation has completed, fly around the location.
+    map.addEventListener('gmp-animationend', () => {
+        map.flyCameraAround({
+            // Location to fly around.
+            camera: flyToCamera,
+            // Length of time to fly to the location.
+            durationMillis: 50000,
+            // Number of rotations to make in the specified time.
+            rounds: 1
+        });
+    }, {once: true}); // Stop animation after flying around.
+
+    // At any time stop the animation.
+    map.addEventListener('gmp-click', (event) => {
+        map.stopCameraAnimation();
+    });
+}
+
+init();
+// [END maps_3d_camera_to_around]
diff --git a/samples/3d-camera-to-around/package.json b/samples/3d-camera-to-around/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-camera-to-around",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-camera-to-around && bash ../app.sh 3d-camera-to-around && bash ../docs.sh 3d-camera-to-around &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-camera-to-around",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/samples/3d-camera-to-around/style.css b/samples/3d-camera-to-around/style.css
@@ -0,0 +1,19 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+/* [START maps_3d_camera_to_around] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+html,
+map {
+  height: 100%;
+}
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_3d_camera_to_around] */
diff --git a/samples/3d-camera-to-around/tsconfig.json b/samples/3d-camera-to-around/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "es2015",
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
diff --git a/samples/3d-label-toggle/index.html b/samples/3d-label-toggle/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_3d_label_toggle] -->
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <button class="toggleButton" id="toggleButton">Labels are off. (SATELLITE)</button>
+
+    <!-- prettier-ignore -->
+    <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))})
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
+  </body>
+</html>
+<!-- [END maps_3d_label_toggle] -->
diff --git a/samples/3d-label-toggle/index.ts b/samples/3d-label-toggle/index.ts
@@ -0,0 +1,43 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+// @ts-nocheck
+// [START maps_3d_label_toggle]
+let map;
+async function init() {
+    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
+
+    map = new Map3DElement(
+        { center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, }
+    );
+
+    map.mode = MapMode.SATELLITE;
+
+    document.body.append(map);
+
+    const locationCamera = {
+        center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404 },
+        range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445,
+    };
+
+    // Get the button element by its ID
+    const toggleButton = document.getElementById('toggleButton');
+    toggleButton.addEventListener('click', function () {
+        // Toggle the labels.
+        if (map.mode == MapMode.SATELLITE) {
+            // Setting the map mode to HYBRID turns the labels on.
+            map.mode = MapMode.HYBRID;
+            document.getElementById('toggleButton').innerText = "Labels are on. (HYBRID)";
+        } else {
+            // Setting the map mode to SATELLITE turns the labels on.
+            map.mode = MapMode.SATELLITE;
+            document.getElementById('toggleButton').innerText = "Labels are off. (SATELLITE)";
+        }
+    });
+}
+
+init();
+// [END maps_3d_label_toggle]
diff --git a/samples/3d-label-toggle/package.json b/samples/3d-label-toggle/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-label-toggle",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-label-toggle && bash ../app.sh 3d-label-toggle && bash ../docs.sh 3d-label-toggle &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-label-toggle",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/samples/3d-label-toggle/style.css b/samples/3d-label-toggle/style.css
@@ -0,0 +1,41 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+/* [START maps_3d_label_toggle] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+html,
+map {
+  height: 100%;
+}
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.toggleButton {
+    background: rgb(235, 235, 235);
+    color: black;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    position: fixed;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+}
+
+.toggleButton:hover {
+    background-color: #007bff;
+    color: white;
+}
+/* [END maps_3d_label_toggle] */
diff --git a/samples/3d-label-toggle/tsconfig.json b/samples/3d-label-toggle/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "es2015",
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
diff --git a/samples/3d-marker-click-event/index.html b/samples/3d-marker-click-event/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_3d_marker_click_event] -->
+<html>
+  <head>
+    <title>Map</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- prettier-ignore -->
+    <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))})
+        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
+  </body>
+</html>
+<!-- [END maps_3d_marker_click_event] -->
diff --git a/samples/3d-marker-click-event/index.ts b/samples/3d-marker-click-event/index.ts
@@ -0,0 +1,46 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+// @ts-nocheck
+// [START maps_3d_marker_click_event]
+async function initMap() {
+    // Include the interactive marker class
+    const { Map3DElement, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
+
+    // We will use this to place the camrea for the intial view but also to fly around the starting point.
+    const originalCamera = {
+        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 }, range: 1500, tilt: 74, heading: 0
+    };
+
+    const map = new Map3DElement({
+        ...originalCamera,
+        mode: "SATELLITE",
+    });
+
+    // Create the interactive marker and set the attributes.
+    const interactiveMarker = new Marker3DInteractiveElement({
+        position: { lat: 39.1178, lng: -106.4452, altitude: 100 },
+        altitudeMode: "RELATIVE_TO_MESH",
+        extruded: true,
+        label: "Mount Elbert"
+    });
+
+    // Specify the action to take on click.
+    interactiveMarker.addEventListener('gmp-click', (event) => {
+        map.flyCameraAround({
+            camera: originalCamera,
+            durationMillis: 50000,
+            rounds: 1
+        });
+    });
+
+    map.append(interactiveMarker);
+
+    document.body.append(map);
+}
+
+initMap();
+// [END maps_3d_marker_click_event]
diff --git a/samples/3d-marker-click-event/package.json b/samples/3d-marker-click-event/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-marker-click-event",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-marker-click-event && bash ../app.sh 3d-marker-click-event && bash ../docs.sh 3d-marker-click-event &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-click-event",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+
+  }
+}
diff --git a/samples/3d-marker-click-event/style.css b/samples/3d-marker-click-event/style.css
@@ -0,0 +1,19 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+/* [START maps_3d_marker_click_event] */
+/* * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+html,
+map {
+  height: 100%;
+}
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* [END maps_3d_marker_click_event] */