diff --git a/dist/samples/3d-accessibility-features/app/index.html b/dist/samples/3d-accessibility-features/app/index.html index 4a357d88e..52c3464ae 100644 --- a/dist/samples/3d-accessibility-features/app/index.html +++ b/dist/samples/3d-accessibility-features/app/index.html @@ -1,7 +1,7 @@ @@ -19,7 +19,13 @@ -
+ diff --git a/dist/samples/3d-accessibility-features/app/index.ts b/dist/samples/3d-accessibility-features/app/index.ts index 56311d1af..85a24f09f 100644 --- a/dist/samples/3d-accessibility-features/app/index.ts +++ b/dist/samples/3d-accessibility-features/app/index.ts @@ -1,26 +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 init() { - const [ - { Map3DElement, Marker3DInteractiveElement, PopoverElement }, - { PinElement }, - ] = await Promise.all([ - google.maps.importLibrary('maps3d'), - 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', - }); + 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 @@ -50,16 +43,16 @@ async function init() { 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,11 +67,11 @@ async function init() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } void init(); 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/assets/index-Db1RMFBd.js b/dist/samples/3d-accessibility-features/dist/assets/index-Db1RMFBd.js new file mode 100644 index 000000000..af6f03b57 --- /dev/null +++ b/dist/samples/3d-accessibility-features/dist/assets/index-Db1RMFBd.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 ed4a76d24..b83983001 100644 --- a/dist/samples/3d-accessibility-features/dist/index.html +++ b/dist/samples/3d-accessibility-features/dist/index.html @@ -1,7 +1,7 @@ @@ -12,14 +12,20 @@ - + -
+ diff --git a/dist/samples/3d-accessibility-features/docs/index.html b/dist/samples/3d-accessibility-features/docs/index.html index 4a357d88e..52c3464ae 100644 --- a/dist/samples/3d-accessibility-features/docs/index.html +++ b/dist/samples/3d-accessibility-features/docs/index.html @@ -1,7 +1,7 @@ @@ -19,7 +19,13 @@ -
+ diff --git a/dist/samples/3d-accessibility-features/docs/index.js b/dist/samples/3d-accessibility-features/docs/index.js index d71649dfb..6d59ed900 100644 --- a/dist/samples/3d-accessibility-features/docs/index.js +++ b/dist/samples/3d-accessibility-features/docs/index.js @@ -1,27 +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 init() { - const [ - { Map3DElement, Marker3DInteractiveElement, PopoverElement }, - { PinElement }, - ] = await Promise.all([ - google.maps.importLibrary('maps3d'), - 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', - }); + 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 @@ -51,16 +44,16 @@ async function init() { 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); @@ -75,11 +68,11 @@ async function init() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } void init(); diff --git a/dist/samples/3d-accessibility-features/docs/index.ts b/dist/samples/3d-accessibility-features/docs/index.ts index 56311d1af..85a24f09f 100644 --- a/dist/samples/3d-accessibility-features/docs/index.ts +++ b/dist/samples/3d-accessibility-features/docs/index.ts @@ -1,26 +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 init() { - const [ - { Map3DElement, Marker3DInteractiveElement, PopoverElement }, - { PinElement }, - ] = await Promise.all([ - google.maps.importLibrary('maps3d'), - 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', - }); + 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 @@ -50,16 +43,16 @@ async function init() { 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,11 +67,11 @@ async function init() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } void init(); 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 9d0425112..f0a7ce478 100644 --- a/dist/samples/3d-accessibility-features/jsfiddle/demo.html +++ b/dist/samples/3d-accessibility-features/jsfiddle/demo.html @@ -1,7 +1,7 @@ @@ -19,6 +19,12 @@ -
+ diff --git a/dist/samples/3d-accessibility-features/jsfiddle/demo.js b/dist/samples/3d-accessibility-features/jsfiddle/demo.js index fe0343155..1a5e784b9 100644 --- a/dist/samples/3d-accessibility-features/jsfiddle/demo.js +++ b/dist/samples/3d-accessibility-features/jsfiddle/demo.js @@ -1,26 +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 init() { - const [ - { Map3DElement, Marker3DInteractiveElement, PopoverElement }, - { PinElement }, - ] = await Promise.all([ - google.maps.importLibrary('maps3d'), - 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', - }); + 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 @@ -50,16 +43,16 @@ async function init() { 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,11 +67,11 @@ async function init() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } void init(); 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" } diff --git a/samples/3d-accessibility-features/index.html b/samples/3d-accessibility-features/index.html index 4a357d88e..52c3464ae 100644 --- a/samples/3d-accessibility-features/index.html +++ b/samples/3d-accessibility-features/index.html @@ -1,7 +1,7 @@ @@ -19,7 +19,13 @@ -
+ diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index 56311d1af..85a24f09f 100644 --- a/samples/3d-accessibility-features/index.ts +++ b/samples/3d-accessibility-features/index.ts @@ -1,26 +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 init() { - const [ - { Map3DElement, Marker3DInteractiveElement, PopoverElement }, - { PinElement }, - ] = await Promise.all([ - google.maps.importLibrary('maps3d'), - 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', - }); + 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 @@ -50,16 +43,16 @@ async function init() { 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,11 +67,11 @@ async function init() { interactiveMarker.append(pin); - map.append(interactiveMarker); - map.append(popover); + map3DElement.append(interactiveMarker); + map3DElement.append(popover); }); - document.body.append(map); + document.body.append(map3DElement); } void init(); 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] */