From fc5514ad9cdc56e37f6b476b668f1984ddb0c84f Mon Sep 17 00:00:00 2001 From: William French Date: Tue, 5 May 2026 12:39:35 -0700 Subject: [PATCH 1/9] 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/9] 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/9] 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/9] 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/9] 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/9] 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 @@ From 7f529bb1533702c5b4a38af04cbaff54367d5a5f Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 18 Jun 2026 07:27:11 -0700 Subject: [PATCH 7/9] Add altitude to 3D map center coordinates --- 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 c8eea2af4..4fbb6270b 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -20,7 +20,7 @@ Date: Tue, 5 May 2026 12:39:35 -0700 Subject: [PATCH 8/9] feat: Refactors the 3d-accessibility-features sample to latest standards. --- .../3d-accessibility-features/app/index.html | 18 ++++++---- .../3d-accessibility-features/app/index.ts | 36 +++++++++---------- .../app/package.json | 4 +-- .../3d-accessibility-features/app/style.css | 2 +- .../dist/assets/index-CMdKRSir.js | 1 + .../3d-accessibility-features/dist/index.html | 20 ++++++----- .../3d-accessibility-features/docs/index.html | 18 ++++++---- .../3d-accessibility-features/docs/index.js | 34 ++++++++---------- .../3d-accessibility-features/docs/index.ts | 36 +++++++++---------- .../3d-accessibility-features/docs/style.css | 2 +- .../jsfiddle/demo.css | 2 +- .../jsfiddle/demo.html | 18 ++++++---- .../jsfiddle/demo.js | 34 ++++++++---------- samples/3d-accessibility-features/index.html | 21 +++++++---- samples/3d-accessibility-features/index.ts | 36 +++++++++---------- .../3d-accessibility-features/package.json | 4 +-- samples/3d-accessibility-features/style.css | 2 +- 17 files changed, 144 insertions(+), 144 deletions(-) create mode 100644 dist/samples/3d-accessibility-features/dist/assets/index-CMdKRSir.js diff --git a/dist/samples/3d-accessibility-features/app/index.html b/dist/samples/3d-accessibility-features/app/index.html index ad6682157..f466514e0 100644 --- a/dist/samples/3d-accessibility-features/app/index.html +++ b/dist/samples/3d-accessibility-features/app/index.html @@ -1,7 +1,7 @@ @@ -11,14 +11,18 @@ - - -
- + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"}); + + + diff --git a/dist/samples/3d-accessibility-features/app/index.ts b/dist/samples/3d-accessibility-features/app/index.ts index 457b84c44..8b2a1c126 100644 --- a/dist/samples/3d-accessibility-features/app/index.ts +++ b/dist/samples/3d-accessibility-features/app/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'); +async function initMap(): Promise { + // 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 @@ -47,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); @@ -71,12 +67,12 @@ 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(); +void initMap(); // [END maps_3d_accessibility_features] diff --git a/dist/samples/3d-accessibility-features/app/package.json b/dist/samples/3d-accessibility-features/app/package.json index 90a15c29c..182d0c8c7 100644 --- a/dist/samples/3d-accessibility-features/app/package.json +++ b/dist/samples/3d-accessibility-features/app/package.json @@ -8,7 +8,5 @@ "build:vite": "vite build --base './'", "preview": "vite preview" }, - "dependencies": { - - } + "dependencies": {} } diff --git a/dist/samples/3d-accessibility-features/app/style.css b/dist/samples/3d-accessibility-features/app/style.css index 4f66c243e..f298e1298 100644 --- a/dist/samples/3d-accessibility-features/app/style.css +++ b/dist/samples/3d-accessibility-features/app/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] */ diff --git a/dist/samples/3d-accessibility-features/dist/assets/index-CMdKRSir.js b/dist/samples/3d-accessibility-features/dist/assets/index-CMdKRSir.js new file mode 100644 index 000000000..af6f03b57 --- /dev/null +++ b/dist/samples/3d-accessibility-features/dist/assets/index-CMdKRSir.js @@ -0,0 +1 @@ +(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();async function e(){let[{Marker3DInteractiveElement:e,PopoverElement:t},{PinElement:n}]=await Promise.all([google.maps.importLibrary(`maps3d`),google.maps.importLibrary(`marker`)]),r=document.querySelector(`gmp-map-3d`);[{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`}].forEach(({position:i,title:a},o)=>{let s=new n({glyphText:String(o+1),scale:1.5,glyphColor:`#FFFFFF`}),c=new t,l=`${String(o+1)}. ${a}`,u=document.createElement(`span`);u.ariaLabel=`This is marker ${String(o+1)}. ${a}`,u.slot=`header`,c.append(u),c.append(l);let d=new e({title:a,position:i,gmpPopoverTargetElement:c});d.append(s),r.append(d),r.append(c)}),document.body.append(r)}e(); \ No newline at end of file diff --git a/dist/samples/3d-accessibility-features/dist/index.html b/dist/samples/3d-accessibility-features/dist/index.html index b48a7d158..3d05b345e 100644 --- a/dist/samples/3d-accessibility-features/dist/index.html +++ b/dist/samples/3d-accessibility-features/dist/index.html @@ -1,7 +1,7 @@ @@ -9,16 +9,20 @@ Map - + + + -
- - - + diff --git a/dist/samples/3d-accessibility-features/docs/index.html b/dist/samples/3d-accessibility-features/docs/index.html index ad6682157..f466514e0 100644 --- a/dist/samples/3d-accessibility-features/docs/index.html +++ b/dist/samples/3d-accessibility-features/docs/index.html @@ -1,7 +1,7 @@ @@ -11,14 +11,18 @@ - - -
- + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"}); + + + diff --git a/dist/samples/3d-accessibility-features/docs/index.js b/dist/samples/3d-accessibility-features/docs/index.js index 37e1d2f1c..94ef2e70a 100644 --- a/dist/samples/3d-accessibility-features/docs/index.js +++ b/dist/samples/3d-accessibility-features/docs/index.js @@ -1,24 +1,20 @@ 'use strict'; /* * @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 @@ -48,16 +44,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); @@ -72,12 +68,12 @@ 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(); +void initMap(); // [END maps_3d_accessibility_features] diff --git a/dist/samples/3d-accessibility-features/docs/index.ts b/dist/samples/3d-accessibility-features/docs/index.ts index 457b84c44..8b2a1c126 100644 --- a/dist/samples/3d-accessibility-features/docs/index.ts +++ b/dist/samples/3d-accessibility-features/docs/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'); +async function initMap(): Promise { + // 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 @@ -47,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); @@ -71,12 +67,12 @@ 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(); +void initMap(); // [END maps_3d_accessibility_features] diff --git a/dist/samples/3d-accessibility-features/docs/style.css b/dist/samples/3d-accessibility-features/docs/style.css index 4f66c243e..f298e1298 100644 --- a/dist/samples/3d-accessibility-features/docs/style.css +++ b/dist/samples/3d-accessibility-features/docs/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] */ diff --git a/dist/samples/3d-accessibility-features/jsfiddle/demo.css b/dist/samples/3d-accessibility-features/jsfiddle/demo.css index 4eea2e372..7850ec840 100644 --- a/dist/samples/3d-accessibility-features/jsfiddle/demo.css +++ b/dist/samples/3d-accessibility-features/jsfiddle/demo.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 */ diff --git a/dist/samples/3d-accessibility-features/jsfiddle/demo.html b/dist/samples/3d-accessibility-features/jsfiddle/demo.html index c3e478a20..435815c44 100644 --- a/dist/samples/3d-accessibility-features/jsfiddle/demo.html +++ b/dist/samples/3d-accessibility-features/jsfiddle/demo.html @@ -1,7 +1,7 @@ @@ -11,13 +11,17 @@ - - -
- + ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"}); + + + diff --git a/dist/samples/3d-accessibility-features/jsfiddle/demo.js b/dist/samples/3d-accessibility-features/jsfiddle/demo.js index cbdefe3ce..578443636 100644 --- a/dist/samples/3d-accessibility-features/jsfiddle/demo.js +++ b/dist/samples/3d-accessibility-features/jsfiddle/demo.js @@ -1,23 +1,19 @@ 'use strict'; /* * @license - * Copyright 2025 Google LLC. All Rights Reserved. + * Copyright 2026 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ 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 @@ -47,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); @@ -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(); +void initMap(); diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index ad6682157..4fbb6270b 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -1,7 +1,7 @@ @@ -11,14 +11,21 @@ + -
- - - + diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index 457b84c44..85a24f09f 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'); +async function init(): Promise { + // 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 @@ -47,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); @@ -71,12 +67,12 @@ 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(); +void init(); // [END maps_3d_accessibility_features] 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 885194aaf0c811e8685fdc951ac4e6216e970c8f Mon Sep 17 00:00:00 2001 From: William French Date: Thu, 23 Jul 2026 10:03:21 -0700 Subject: [PATCH 9/9] chore: update lockfile Change-Id: Ie776bd207ad94a3d3cc4ba6875635f7df6c10b26 --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 98cf812bc..d440a729d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6757,11 +6757,11 @@ "name": "@js-api-samples/map-drawing-terradraw", "version": "1.0.0", "dependencies": { - "terra-draw": "*", - "terra-draw-google-maps-adapter": "*" + "terra-draw": "latest", + "terra-draw-google-maps-adapter": "latest" }, "devDependencies": { - "@types/google.maps": "*", + "@types/google.maps": "latest", "typescript": "^5.9.3", "vite": "^8.1.4" }