diff --git a/dist/index.html b/dist/index.html index 7cc8660694..408de0e74e 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5821,6 +5821,35 @@

vector-detector

+
+

web-components-accessibility

+
+ + + + Code +
+
+

web-components-events

diff --git a/dist/samples/web-components-accessibility/app/.env b/dist/samples/web-components-accessibility/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/web-components-accessibility/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/app/.eslintrc.json b/dist/samples/web-components-accessibility/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/web-components-accessibility/app/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/app/.gitignore b/dist/samples/web-components-accessibility/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/web-components-accessibility/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/web-components-accessibility/app/README.md b/dist/samples/web-components-accessibility/app/README.md new file mode 100644 index 0000000000..012fc1859f --- /dev/null +++ b/dist/samples/web-components-accessibility/app/README.md @@ -0,0 +1,17 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps/js-samples. + +## Setup + +```sh +npm i +npm start # development +npm run build # production +``` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps/js-samples/issues). diff --git a/dist/samples/web-components-accessibility/app/env.d.ts b/dist/samples/web-components-accessibility/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/web-components-accessibility/app/env.d.ts @@ -0,0 +1,12 @@ +/// + +/** + * @external https://vitejs.dev/guide/env-and-mode.html + */ +interface ImportMetaEnv { + readonly VITE_GOOGLE_MAPS_API_KEY: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/dist/samples/web-components-accessibility/app/index.html b/dist/samples/web-components-accessibility/app/index.html new file mode 100644 index 0000000000..11858e7387 --- /dev/null +++ b/dist/samples/web-components-accessibility/app/index.html @@ -0,0 +1,49 @@ + + + + + Advanced Marker Accessibility with web components + + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-accessibility/app/index.ts b/dist/samples/web-components-accessibility/app/index.ts new file mode 100644 index 0000000000..7fc40f03bd --- /dev/null +++ b/dist/samples/web-components-accessibility/app/index.ts @@ -0,0 +1,35 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +async function initMap(): Promise { + const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + console.log('Maps JavaScript API loaded.'); + + // Return an array of markers. + const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')]; + + // Create a shared info window. + let infoWindow = new InfoWindow(); + + for (let i = 0; i < advancedMarkers.length; i++) { + const marker = advancedMarkers[i] as google.maps.marker.AdvancedMarkerElement; + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + + marker.appendChild(pin.element); + marker.addEventListener('gmp-click', () => { + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + } +} + +initMap(); +export { }; \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/app/package.json b/dist/samples/web-components-accessibility/app/package.json new file mode 100644 index 0000000000..8603a79f51 --- /dev/null +++ b/dist/samples/web-components-accessibility/app/package.json @@ -0,0 +1,35 @@ +{ + "name": "web-components-accessibility", + "description": "Samples for Google Maps JavaScript", + "version": "2.1.4", + "keywords": [ + "google", + "javascript", + "maps", + "samples" + ], + "homepage": "https://github.com/googlemaps/js-samples#readme", + "bugs": { + "url": "https://github.com/googlemaps/js-samples/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/googlemaps/js-samples.git" + }, + "files": [], + "license": "Apache-2.0", + "scripts": { + "dev": "vite", + "start": "vite", + "build": "vite build --outDir dist --base './'", + "test": "tsc --no-emit", + "preview": "vite preview" + }, + "devDependencies": { + "@types/google.maps": "^3.53.5", + "typescript": "^5.5.3", + "vite": "^5.2.13" + }, + "private": true, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/app/style.css b/dist/samples/web-components-accessibility/app/style.css new file mode 100644 index 0000000000..582e19d3dd --- /dev/null +++ b/dist/samples/web-components-accessibility/app/style.css @@ -0,0 +1,27 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +gmp-map { + height: 400px; +} + diff --git a/dist/samples/web-components-accessibility/app/tsconfig.json b/dist/samples/web-components-accessibility/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/web-components-accessibility/app/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/app/vite.config.js b/dist/samples/web-components-accessibility/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/web-components-accessibility/app/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + server: { + hmr: + process.env.CODESANDBOX_SSE || process.env.GITPOD_WORKSPACE_ID + ? 443 + : undefined, + }, +}); diff --git a/dist/samples/web-components-accessibility/docs/index.html b/dist/samples/web-components-accessibility/docs/index.html new file mode 100644 index 0000000000..f6bc759b39 --- /dev/null +++ b/dist/samples/web-components-accessibility/docs/index.html @@ -0,0 +1,51 @@ + + + + + + Advanced Marker Accessibility with web components + + + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-accessibility/docs/index.js b/dist/samples/web-components-accessibility/docs/index.js new file mode 100644 index 0000000000..f91d67061f --- /dev/null +++ b/dist/samples/web-components-accessibility/docs/index.js @@ -0,0 +1,39 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_web_components_accessibility] +async function initMap() { + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { PinElement } = await google.maps.importLibrary("marker"); + + console.log("Maps JavaScript API loaded."); + + // [START maps_web_components_accessibility_query] + // Return an array of markers. + const advancedMarkers = [...document.querySelectorAll("gmp-advanced-marker")]; + // [END maps_web_components_accessibility_query] + // [START maps_web_components_accessibility_iterate] + // Create a shared info window. + let infoWindow = new InfoWindow(); + + for (let i = 0; i < advancedMarkers.length; i++) { + const marker = advancedMarkers[i]; + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + + marker.appendChild(pin.element); + marker.addEventListener("gmp-click", () => { + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + } + // [END maps_web_components_accessibility_iterate] +} + +initMap(); +// [END maps_web_components_accessibility] diff --git a/dist/samples/web-components-accessibility/docs/style.css b/dist/samples/web-components-accessibility/docs/style.css new file mode 100644 index 0000000000..8f435fec69 --- /dev/null +++ b/dist/samples/web-components-accessibility/docs/style.css @@ -0,0 +1,29 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_web_components_accessibility] */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +gmp-map { + height: 400px; +} + +/* [END maps_web_components_accessibility] */ \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/iframe/index.html b/dist/samples/web-components-accessibility/iframe/index.html new file mode 100644 index 0000000000..97561518fa --- /dev/null +++ b/dist/samples/web-components-accessibility/iframe/index.html @@ -0,0 +1,49 @@ + + + + + Advanced Marker Accessibility with web components + + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-accessibility/jsfiddle/demo.css b/dist/samples/web-components-accessibility/jsfiddle/demo.css new file mode 100644 index 0000000000..582e19d3dd --- /dev/null +++ b/dist/samples/web-components-accessibility/jsfiddle/demo.css @@ -0,0 +1,27 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +gmp-map { + height: 400px; +} + diff --git a/dist/samples/web-components-accessibility/jsfiddle/demo.details b/dist/samples/web-components-accessibility/jsfiddle/demo.details new file mode 100644 index 0000000000..99cf731fce --- /dev/null +++ b/dist/samples/web-components-accessibility/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: Advanced Marker Accessibility with web components +authors: + - Justin Poehnelt +tags: + - google maps +load_type: h +description: Sample code for Google Maps Platform JavaScript API diff --git a/dist/samples/web-components-accessibility/jsfiddle/demo.html b/dist/samples/web-components-accessibility/jsfiddle/demo.html new file mode 100644 index 0000000000..b1ccefa8a8 --- /dev/null +++ b/dist/samples/web-components-accessibility/jsfiddle/demo.html @@ -0,0 +1,48 @@ + + + + + Advanced Marker Accessibility with web components + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-accessibility/jsfiddle/demo.js b/dist/samples/web-components-accessibility/jsfiddle/demo.js new file mode 100644 index 0000000000..ca0c20f410 --- /dev/null +++ b/dist/samples/web-components-accessibility/jsfiddle/demo.js @@ -0,0 +1,33 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +async function initMap() { + const { InfoWindow } = await google.maps.importLibrary("maps"); + const { PinElement } = await google.maps.importLibrary("marker"); + + console.log("Maps JavaScript API loaded."); + + // Return an array of markers. + const advancedMarkers = [...document.querySelectorAll("gmp-advanced-marker")]; + // Create a shared info window. + let infoWindow = new InfoWindow(); + + for (let i = 0; i < advancedMarkers.length; i++) { + const marker = advancedMarkers[i]; + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + + marker.appendChild(pin.element); + marker.addEventListener("gmp-click", () => { + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + } +} + +initMap(); diff --git a/dist/samples/web-components-accessibility/playground/index.html b/dist/samples/web-components-accessibility/playground/index.html new file mode 100644 index 0000000000..c060e3ffde --- /dev/null +++ b/dist/samples/web-components-accessibility/playground/index.html @@ -0,0 +1,51 @@ + + + Advanced Marker Accessibility with web components + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-accessibility/playground/index.ts b/dist/samples/web-components-accessibility/playground/index.ts new file mode 100644 index 0000000000..924437a552 --- /dev/null +++ b/dist/samples/web-components-accessibility/playground/index.ts @@ -0,0 +1,35 @@ +async function initMap(): Promise { + const { InfoWindow } = (await google.maps.importLibrary( + "maps", + )) as google.maps.MapsLibrary; + const { PinElement } = (await google.maps.importLibrary( + "marker", + )) as google.maps.MarkerLibrary; + console.log("Maps JavaScript API loaded."); + + // Return an array of markers. + const advancedMarkers = [...document.querySelectorAll("gmp-advanced-marker")]; + + // Create a shared info window. + let infoWindow = new InfoWindow(); + + for (let i = 0; i < advancedMarkers.length; i++) { + const marker = advancedMarkers[ + i + ] as google.maps.marker.AdvancedMarkerElement; + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + + marker.appendChild(pin.element); + marker.addEventListener("gmp-click", () => { + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + } +} + +initMap(); +export {}; diff --git a/dist/samples/web-components-accessibility/playground/package.json b/dist/samples/web-components-accessibility/playground/package.json new file mode 100644 index 0000000000..33703d5822 --- /dev/null +++ b/dist/samples/web-components-accessibility/playground/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/playground/playground.ts.json b/dist/samples/web-components-accessibility/playground/playground.ts.json new file mode 100644 index 0000000000..dfc32121fc --- /dev/null +++ b/dist/samples/web-components-accessibility/playground/playground.ts.json @@ -0,0 +1,17 @@ +{ + "files": { + "index.ts": { + "label": "TypeScript" + }, + "style.css": { + "label": "CSS" + }, + "index.html": { + "label": "HTML" + }, + "../../../types/google-maps/index.d.ts": { + "label": "@types/google.maps", + "hidden": true + } + } +} \ No newline at end of file diff --git a/dist/samples/web-components-accessibility/playground/style.css b/dist/samples/web-components-accessibility/playground/style.css new file mode 100644 index 0000000000..5f1dfff74c --- /dev/null +++ b/dist/samples/web-components-accessibility/playground/style.css @@ -0,0 +1,22 @@ +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +gmp-map { + height: 400px; +} +