|
1 | 1 | /* |
2 | | -* @license |
3 | | -* Copyright 2025 Google LLC. All Rights Reserved. |
4 | | -* SPDX-License-Identifier: Apache-2.0 |
5 | | -*/ |
| 2 | + * @license |
| 3 | + * Copyright 2025 Google LLC. All Rights Reserved. |
| 4 | + * SPDX-License-Identifier: Apache-2.0 |
| 5 | + */ |
6 | 6 |
|
7 | 7 | // @ts-nocheck |
8 | 8 | // [START maps_3d_accessibility_features] |
9 | 9 | async function initMap() { |
10 | | - const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d"); |
11 | | - const { PinElement } = await google.maps.importLibrary("marker"); |
| 10 | + const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = |
| 11 | + await google.maps.importLibrary('maps3d'); |
| 12 | + const { PinElement } = await google.maps.importLibrary('marker'); |
12 | 13 |
|
13 | | - const map = new Map3DElement({ |
14 | | - center: { lat: 34.8405, lng : -111.7909, altitude: 1322.70 }, range: 13279.50, tilt: 67.44 ,heading: 0.01, |
15 | | - mode: 'SATELLITE', |
16 | | - gestureHandling: "COOPERATIVE" |
17 | | - }); |
| 14 | + const map = new Map3DElement({ |
| 15 | + center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 }, |
| 16 | + range: 13279.5, |
| 17 | + tilt: 67.44, |
| 18 | + heading: 0.01, |
| 19 | + mode: 'SATELLITE', |
| 20 | + gestureHandling: 'COOPERATIVE', |
| 21 | + }); |
18 | 22 |
|
19 | | - // Set LatLng and title text for the markers. The first marker (Boynton Pass) |
20 | | - // receives the initial focus when tab is pressed. Use arrow keys to move |
21 | | - // between markers; press tab again to cycle through the map controls. |
22 | | - const tourStops = [ |
23 | | - { |
24 | | - position: { lat: 34.8791806, lng: -111.8265049 }, |
25 | | - title: "Boynton Pass", |
26 | | - }, |
27 | | - { |
28 | | - position: { lat: 34.8559195, lng: -111.7988186 }, |
29 | | - title: "Airport Mesa", |
30 | | - }, |
31 | | - { |
32 | | - position: { lat: 34.832149, lng: -111.7695277 }, |
33 | | - title: "Chapel of the Holy Cross", |
34 | | - }, |
35 | | - { |
36 | | - position: { lat: 34.823736, lng: -111.8001857 }, |
37 | | - title: "Red Rock Crossing", |
38 | | - }, |
39 | | - { |
40 | | - position: { lat: 34.800326, lng: -111.7665047 }, |
41 | | - title: "Bell Rock", |
42 | | - }, |
43 | | - ]; |
| 23 | + // Set LatLng and title text for the markers. The first marker (Boynton Pass) |
| 24 | + // receives the initial focus when tab is pressed. Use arrow keys to move |
| 25 | + // between markers; press tab again to cycle through the map controls. |
| 26 | + const tourStops = [ |
| 27 | + { |
| 28 | + position: { lat: 34.8791806, lng: -111.8265049 }, |
| 29 | + title: 'Boynton Pass', |
| 30 | + }, |
| 31 | + { |
| 32 | + position: { lat: 34.8559195, lng: -111.7988186 }, |
| 33 | + title: 'Airport Mesa', |
| 34 | + }, |
| 35 | + { |
| 36 | + position: { lat: 34.832149, lng: -111.7695277 }, |
| 37 | + title: 'Chapel of the Holy Cross', |
| 38 | + }, |
| 39 | + { |
| 40 | + position: { lat: 34.823736, lng: -111.8001857 }, |
| 41 | + title: 'Red Rock Crossing', |
| 42 | + }, |
| 43 | + { |
| 44 | + position: { lat: 34.800326, lng: -111.7665047 }, |
| 45 | + title: 'Bell Rock', |
| 46 | + }, |
| 47 | + ]; |
44 | 48 |
|
45 | | - tourStops.forEach(({ position, title }, i) => { |
46 | | - const pin = new PinElement({ |
47 | | - glyphText: `${i + 1}`, |
48 | | - scale: 1.5, |
49 | | - glyphColor: "#FFFFFF" |
50 | | - }); |
51 | | - const popover = new PopoverElement(); |
| 49 | + tourStops.forEach(({ position, title }, i) => { |
| 50 | + const pin = new PinElement({ |
| 51 | + glyphText: `${i + 1}`, |
| 52 | + scale: 1.5, |
| 53 | + glyphColor: '#FFFFFF', |
| 54 | + }); |
| 55 | + const popover = new PopoverElement(); |
52 | 56 |
|
53 | | - const content = `${i + 1}. ${title}`; |
54 | | - const header = document.createElement('span'); |
55 | | - // Include the label for screen readers. |
56 | | - header.ariaLabel = `This is marker ${i + 1}. ${title}`; |
57 | | - header.slot = 'header'; |
| 57 | + const content = `${i + 1}. ${title}`; |
| 58 | + const header = document.createElement('span'); |
| 59 | + // Include the label for screen readers. |
| 60 | + header.ariaLabel = `This is marker ${i + 1}. ${title}`; |
| 61 | + header.slot = 'header'; |
58 | 62 |
|
59 | | - popover.append(header); |
60 | | - popover.append(content); |
| 63 | + popover.append(header); |
| 64 | + popover.append(content); |
61 | 65 |
|
62 | | - const interactiveMarker = new Marker3DInteractiveElement({ |
63 | | - // Include a title, used for accessibility text for use by screen readers. |
64 | | - title, |
65 | | - position, |
66 | | - gmpPopoverTargetElement: popover |
67 | | - }); |
| 66 | + const interactiveMarker = new Marker3DInteractiveElement({ |
| 67 | + // Include a title, used for accessibility text for use by screen readers. |
| 68 | + title, |
| 69 | + position, |
| 70 | + gmpPopoverTargetElement: popover, |
| 71 | + }); |
68 | 72 |
|
69 | | - interactiveMarker.append(pin); |
| 73 | + interactiveMarker.append(pin); |
70 | 74 |
|
71 | | - map.append(interactiveMarker); |
72 | | - map.append(popover); |
73 | | - }); |
| 75 | + map.append(interactiveMarker); |
| 76 | + map.append(popover); |
| 77 | + }); |
74 | 78 |
|
75 | | - document.body.append(map); |
| 79 | + document.body.append(map); |
76 | 80 | } |
77 | 81 |
|
78 | 82 | initMap(); |
|
0 commit comments