Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 0 additions & 1 deletion dist/samples/3d-accessibility-features/app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,3 @@ From `samples/`:

For feedback related to this sample, please open a new issue on
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

20 changes: 10 additions & 10 deletions dist/samples/3d-accessibility-features/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
-->
<!-- [START maps_3d_accessibility_features] -->
<html>
<head>
<title>Map</title>
<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>
<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))})
<!-- 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: "weekly",});</script>
</body>
</body>
</html>
<!-- [END maps_3d_accessibility_features] -->
126 changes: 65 additions & 61 deletions dist/samples/3d-accessibility-features/app/index.ts
Original file line number Diff line number Diff line change
@@ -1,78 +1,82 @@
/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
* @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 { 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',
gestureHandling: "COOPERATIVE"
});
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',
});

// 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",
},
];
// 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({
glyphText: `${i + 1}`,
scale: 1.5,
glyphColor: "#FFFFFF"
});
const popover = new PopoverElement();
tourStops.forEach(({ position, title }, i) => {
const pin = new PinElement({
glyphText: `${i + 1}`,
scale: 1.5,
glyphColor: '#FFFFFF',
});
const popover = new PopoverElement();

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';
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);
popover.append(header);
popover.append(content);

const interactiveMarker = new Marker3DInteractiveElement({
// Include a title, used for accessibility text for use by screen readers.
title,
position,
gmpPopoverTargetElement: popover
});
const interactiveMarker = new Marker3DInteractiveElement({
// Include a title, used for accessibility text for use by screen readers.
title,
position,
gmpPopoverTargetElement: popover,
});

interactiveMarker.append(pin);
interactiveMarker.append(pin);

map.append(interactiveMarker);
map.append(popover);
});
map.append(interactiveMarker);
map.append(popover);
});

document.body.append(map);
document.body.append(map);
}

initMap();
Expand Down
8 changes: 4 additions & 4 deletions dist/samples/3d-accessibility-features/app/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
*/
html,
map {
height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
height: 100%;
margin: 0;
padding: 0;
}
/* [END maps_3d_accessibility_features] */
20 changes: 10 additions & 10 deletions dist/samples/3d-accessibility-features/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
-->
<!-- [START maps_3d_accessibility_features] -->
<html>
<head>
<title>Map</title>
<head>
<title>Map</title>

<script type="module" crossorigin src="./assets/index-C8EVyAYe.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BVXE32j3.css">
</head>
<body>
<div id="map"></div>
<script type="module" crossorigin src="./assets/index-C8EVyAYe.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BVXE32j3.css">
</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))})
<!-- 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: "weekly",});</script>
</body>
</body>
</html>
<!-- [END maps_3d_accessibility_features] -->
20 changes: 10 additions & 10 deletions dist/samples/3d-accessibility-features/docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
-->
<!-- [START maps_3d_accessibility_features] -->
<html>
<head>
<title>Map</title>
<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>
<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))})
<!-- 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: "weekly",});</script>
</body>
</body>
</html>
<!-- [END maps_3d_accessibility_features] -->
33 changes: 18 additions & 15 deletions dist/samples/3d-accessibility-features/docs/index.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,52 @@
"use strict";
/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
* @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 { 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,
center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 },
range: 13279.5,
tilt: 67.44,
heading: 0.01,
mode: 'SATELLITE',
gestureHandling: "COOPERATIVE"
gestureHandling: 'COOPERATIVE',
});
// 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",
title: 'Boynton Pass',
},
{
position: { lat: 34.8559195, lng: -111.7988186 },
title: "Airport Mesa",
title: 'Airport Mesa',
},
{
position: { lat: 34.832149, lng: -111.7695277 },
title: "Chapel of the Holy Cross",
title: 'Chapel of the Holy Cross',
},
{
position: { lat: 34.823736, lng: -111.8001857 },
title: "Red Rock Crossing",
title: 'Red Rock Crossing',
},
{
position: { lat: 34.800326, lng: -111.7665047 },
title: "Bell Rock",
title: 'Bell Rock',
},
];
tourStops.forEach(({ position, title }, i) => {
const pin = new PinElement({
glyphText: `${i + 1}`,
scale: 1.5,
glyphColor: "#FFFFFF"
glyphColor: '#FFFFFF',
});
const popover = new PopoverElement();
const content = `${i + 1}. ${title}`;
Expand All @@ -57,7 +60,7 @@ async function initMap() {
// Include a title, used for accessibility text for use by screen readers.
title,
position,
gmpPopoverTargetElement: popover
gmpPopoverTargetElement: popover,
});
interactiveMarker.append(pin);
map.append(interactiveMarker);
Expand Down
Loading
Loading