googlemaps-samples · willum070 · Apr 22, 2025 · Apr 22, 2025
diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/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_accessibility_features] -->
+<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_accessibility_features] -->
diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts
@@ -0,0 +1,78 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+// @ts-nocheck
+// [START maps_3d_accessibility_features]
+async function initMap() {
+  const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d");
+  const { PinElement } = await google.maps.importLibrary("marker");
+
+  const map = new Map3DElement({
+    center: { lat: 34.8405, lng : -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44 ,heading: 0.01,
+    mode: 'SATELLITE'
+  });
+
+  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
+  // receives the initial focus when tab is pressed. Use arrow keys to move
+  // between markers; press tab again to cycle through the map controls.
+  const tourStops = [
+    {
+      position: { lat: 34.8791806, lng: -111.8265049 },
+      title: "Boynton Pass",
+    },
+    {
+      position: { lat: 34.8559195, lng: -111.7988186 },
+      title: "Airport Mesa",
+    },
+    {
+      position: { lat: 34.832149, lng: -111.7695277 },
+      title: "Chapel of the Holy Cross",
+    },
+    {
+      position: { lat: 34.823736, lng: -111.8001857 },
+      title: "Red Rock Crossing",
+    },
+    {
+      position: { lat: 34.800326, lng: -111.7665047 },
+      title: "Bell Rock",
+    },
+  ];
+
+  tourStops.forEach(({ position, title }, i) => {
+    const pin = new PinElement({
+      glyph: `${i + 1}`,
+      scale: 1.5,
+      glyphColor: "#FFFFFF"
+    });
+    const popover = new PopoverElement({
+      open: true,
+    });
+
+    const content = `${i + 1}. ${title}`;
+    const header = document.createElement('span');
+    // Include the label for screen readers.
+    header.ariaLabel = `This is marker ${i + 1}. ${title}`;
+    header.slot = 'header';
+
+        popover.append(header);
+    popover.append(content);
+
+    const interactiveMarker = new Marker3DInteractiveElement({
+      position,
+      gmpPopoverTargetElement: popover
+    });
+
+    interactiveMarker.append(pin);
+
+    map.append(interactiveMarker);
+    map.append(popover);
+  });
+
+  document.body.append(map);
+}
+
+initMap();
+// [END maps_3d_accessibility_features]
diff --git a/samples/3d-accessibility-features/package.json b/samples/3d-accessibility-features/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-accessibility-features",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-accessibility-features && bash ../app.sh 3d-accessibility-features && bash ../docs.sh 3d-accessibility-features &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-accessibility-features",
+    "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-accessibility-features/style.css b/samples/3d-accessibility-features/style.css
@@ -0,0 +1,19 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+/* [START maps_3d_accessibility_features] */
+/* * 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_accessibility_features] */
diff --git a/samples/3d-accessibility-features/tsconfig.json b/samples/3d-accessibility-features/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-collision-behavior/index.html b/samples/3d-marker-collision-behavior/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2025 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_3d_marker_collision_behavior] -->
+<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>
+
+    <div class="detailsContainer">
+      <label for="collisionSelect">Marker Collision behavior.</label>
+      <select id="collisionSelect" >
+          <option value="REQUIRED">REQUIRED</option>
+          <option value="REQUIRED_AND_HIDES_OPTIONAL">REQUIRED_AND_HIDES_OPTIONAL</option>
+          <option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">OPTIONAL_AND_HIDES_LOWER_PRIORITY</option>
+      </select>
+      <div style="font-size: 0.7em; width:500px;">
+          <b>REQUIRED:</b> (default) Always display the marker regardless of collision.<br>
+          <b>OPTIONAL_AND_HIDES_LOWER_PRIORITY:</b> Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown.<br>
+          <b>REQUIRED_AND_HIDES_OPTIONAL:</b> Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker.<br>
+      </div>
+    </div>    
+
+    <div class="textContainer">
+      <div class="text">Select the marker collision method.</div>
+    </div>
+  </body>
+</html>
+<!-- [END maps_3d_marker_collision_behavior] -->
diff --git a/samples/3d-marker-collision-behavior/index.ts b/samples/3d-marker-collision-behavior/index.ts
@@ -0,0 +1,64 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+// @ts-nocheck
+// [START maps_3d_marker_collision_behavior]
+let map;
+	async function init() {
+	    // Request needed libraries.
+	    const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
+
+	    map = new Map3DElement({
+	        center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
+	        range: 1000,
+	        mode: 'HYBRID'
+	    });
+
+	    map.mode = "SATELLITE";
+	    let zindex = 0;
+	    for (const [lng, lat] of positions) {
+	        const marker = new Marker3DElement({
+	            position: { lat, lng },
+	            // Try setting a different collision behavior here.
+	            collisionBehavior: google.maps.CollisionBehavior.REQUIRED,
+	            drawsWhenOccluded : true,
+	            zIndex : zindex++,
+	            label: zindex.toString(),
+	        });
+	        map.append(marker);
+	    }
+
+	    const collisionSelect = document.getElementById('collisionSelect');
+	    collisionSelect.addEventListener('change', handleCollisionSelection);
+	    document.body.append(map);
+	}
+
+	function handleCollisionSelection() {
+	    const selectedIndex = collisionSelect.selectedIndex;
+	    for (const marker of map.getElementsByTagName("gmp-marker-3d")) {
+	        marker.collisionBehavior = collisionSelect.value;
+	    }
+	}
+
+	const positions = [
+	    [-122.3402, 47.6093],
+	    [-122.3402, 47.6094],
+	    [-122.3403, 47.6094],
+	    [-122.3384, 47.6098],
+	    [-122.3389, 47.6095],
+	    [-122.3396, 47.6095],
+	    [-122.3379, 47.6097],
+	    [-122.3378, 47.6097],
+	    [-122.3396, 47.6091],
+	    [-122.3383, 47.6089],
+	    [-122.3379, 47.6093],
+	    [-122.3381, 47.6095],
+	    [-122.3378, 47.6095],
+	];
+
+	init();
+
+// [END maps_3d_marker_collision_behavior]
diff --git a/samples/3d-marker-collision-behavior/package.json b/samples/3d-marker-collision-behavior/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@js-api-samples/3d-marker-collision-behavior",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "tsc && bash ../jsfiddle.sh 3d-marker-collision-behavior && bash ../app.sh 3d-marker-collision-behavior && bash ../docs.sh 3d-marker-collision-behavior &&  npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-collision-behavior",
+    "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-collision-behavior/style.css b/samples/3d-marker-collision-behavior/style.css
@@ -0,0 +1,55 @@
+/*
+* @license
+* Copyright 2025 Google LLC. All Rights Reserved.
+* SPDX-License-Identifier: Apache-2.0
+*/
+/* [START maps_3d_marker_collision_behavior] */
+/* * 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;
+}
+.textContainer {
+    background-color: #4d90fe;
+    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    margin: 10px;
+    overflow: hidden;
+    position: absolute;
+    left: 50%;
+    bottom: 5px;
+    transform: translateX(-50%);
+    border: 1px solid white;
+    border-radius: 2px;
+    padding: 5px;
+    z-index: 1000;
+}
+
+.detailsContainer {
+    background-color: #fff;
+    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    margin: 10px;
+    font: 400 18px Roboto, Arial, sans-serif;
+    overflow: hidden;
+    position: absolute;
+    left: 50%;
+    bottom: 50px;
+    transform: translateX(-50%);
+    border: 2px solid  #4d90fe;
+    border-radius: 2px;
+    padding: 5px;
+    z-index: 1000;
+}
+
+.text {
+    color: white;
+    font-size: 1em;
+    text-align: center;
+}  
+/* [END maps_3d_marker_collision_behavior] */
diff --git a/samples/3d-marker-collision-behavior/tsconfig.json b/samples/3d-marker-collision-behavior/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-graphics/index.html b/samples/3d-marker-graphics/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_graphics] -->
+<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_graphics] -->