From fc5514ad9cdc56e37f6b476b668f1984ddb0c84f Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 5 May 2026 12:39:35 -0700 Subject: [PATCH 1/6] feat: Refactors the 3d-accessibility-features sample to latest standards. --- samples/3d-accessibility-features/index.html | 18 ++++++++----- samples/3d-accessibility-features/index.ts | 26 ++++++++----------- .../3d-accessibility-features/package.json | 4 +-- samples/3d-accessibility-features/style.css | 2 +- 4 files changed, 24 insertions(+), 26 deletions(-) diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index ad6682157..d6dba6f6d 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -1,7 +1,7 @@ @@ -11,14 +11,18 @@ - - -
- + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" }); + + + diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index 457b84c44..2a29103d2 100644 --- a/samples/3d-accessibility-features/index.ts +++ b/samples/3d-accessibility-features/index.ts @@ -1,23 +1,19 @@ /* * @license - * Copyright 2025 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_3d_accessibility_features] async function initMap() { - const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = - await google.maps.importLibrary('maps3d'); - const { PinElement } = await google.maps.importLibrary('marker'); + // Import the needed libraries. + const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] = + await Promise.all([ + google.maps.importLibrary('maps3d'), + google.maps.importLibrary('marker'), + ]); - const map = new Map3DElement({ - center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 }, - range: 13279.5, - tilt: 67.44, - heading: 0.01, - mode: 'SATELLITE', - gestureHandling: 'COOPERATIVE', - }); + const map3DElement = document.querySelector('gmp-map-3d')!; // 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 @@ -71,11 +67,11 @@ async function initMap() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } initMap(); diff --git a/samples/3d-accessibility-features/package.json b/samples/3d-accessibility-features/package.json index 90a15c29c..182d0c8c7 100644 --- a/samples/3d-accessibility-features/package.json +++ b/samples/3d-accessibility-features/package.json @@ -8,7 +8,5 @@ "build:vite": "vite build --base './'", "preview": "vite preview" }, - "dependencies": { - - } + "dependencies": {} } diff --git a/samples/3d-accessibility-features/style.css b/samples/3d-accessibility-features/style.css index 4f66c243e..f298e1298 100644 --- a/samples/3d-accessibility-features/style.css +++ b/samples/3d-accessibility-features/style.css @@ -1,6 +1,6 @@ /* * @license -* Copyright 2025 Google LLC. All Rights Reserved. +* Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_accessibility_features] */ From 97a6e0ff8435f3c64b993a4cdeaca5f30f0907dc Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 12 May 2026 09:14:32 -0700 Subject: [PATCH 2/6] Update initMap function for type safety and accessibility Try to get eslint to be happy again. --- samples/3d-accessibility-features/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index a09164936..8b2a1c126 100644 --- a/samples/3d-accessibility-features/index.ts +++ b/samples/3d-accessibility-features/index.ts @@ -5,7 +5,7 @@ */ // [START maps_3d_accessibility_features] -async function initMap() { +async function initMap(): Promise { // Import the needed libraries. const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] = await Promise.all([ @@ -43,16 +43,16 @@ async function initMap() { tourStops.forEach(({ position, title }, i) => { const pin = new PinElement({ - glyphText: `${i + 1}`, + glyphText: String(i + 1), scale: 1.5, glyphColor: '#FFFFFF', }); const popover = new PopoverElement(); - const content = `${i + 1}. ${title}`; + const content = `${String(i + 1)}. ${title}`; const header = document.createElement('span'); // Include the label for screen readers. - header.ariaLabel = `This is marker ${i + 1}. ${title}`; + header.ariaLabel = `This is marker ${String(i + 1)}. ${title}`; header.slot = 'header'; popover.append(header); @@ -74,5 +74,5 @@ async function initMap() { document.body.append(map3DElement); } -void init(); +void initMap(); // [END maps_3d_accessibility_features] From 41b5178013a016f81ad0e697c07590ae5f83f8fd Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 12 May 2026 09:20:33 -0700 Subject: [PATCH 3/6] Remove version parameter from Google Maps API script --- samples/3d-accessibility-features/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index d6dba6f6d..f466514e0 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -13,7 +13,7 @@ + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"}); Date: Tue, 12 May 2026 09:24:56 -0700 Subject: [PATCH 4/6] Rename initMap function to init The rule is clear but the resulting error messages are inscrutable. --- samples/3d-accessibility-features/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index 8b2a1c126..85a24f09f 100644 --- a/samples/3d-accessibility-features/index.ts +++ b/samples/3d-accessibility-features/index.ts @@ -5,7 +5,7 @@ */ // [START maps_3d_accessibility_features] -async function initMap(): Promise { +async function init(): Promise { // Import the needed libraries. const [{ Marker3DInteractiveElement, PopoverElement }, { PinElement }] = await Promise.all([ @@ -74,5 +74,5 @@ async function initMap(): Promise { document.body.append(map3DElement); } -void initMap(); +void init(); // [END maps_3d_accessibility_features] From 01269c834de3cdc9778492746c1539a48b1b6cb7 Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 12 May 2026 09:31:33 -0700 Subject: [PATCH 5/6] Refactor Google Maps API script for readability --- samples/3d-accessibility-features/index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index f466514e0..43794e475 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -11,9 +11,11 @@ - - + Date: Tue, 12 May 2026 09:38:45 -0700 Subject: [PATCH 6/6] Update Google Maps API script initialization --- samples/3d-accessibility-features/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index 43794e475..c8eea2af4 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -13,8 +13,9 @@