diff --git a/dist/index.html b/dist/index.html index b4a183fb33..157e89c971 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5647,6 +5647,93 @@

vector-detector

+
+

web-components-events

+
+ + + + Code +
+
+ +
+

web-components-map

+
+ + + + Code +
+
+ +
+

web-components-markers

+
+ + + + Code +
+
+

webgl-deckgl

diff --git a/dist/samples/control-custom-state/iframe/index.html b/dist/samples/control-custom-state/iframe/index.html index 13c4e186ab..086b201ceb 100644 --- a/dist/samples/control-custom-state/iframe/index.html +++ b/dist/samples/control-custom-state/iframe/index.html @@ -9,7 +9,7 @@ Adding State to Controls - + diff --git a/dist/samples/web-components-events/app/.env b/dist/samples/web-components-events/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/web-components-events/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/web-components-events/app/.eslintrc.json b/dist/samples/web-components-events/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/web-components-events/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-events/app/.gitignore b/dist/samples/web-components-events/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/web-components-events/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/web-components-events/app/README.md b/dist/samples/web-components-events/app/README.md new file mode 100644 index 0000000000..012fc1859f --- /dev/null +++ b/dist/samples/web-components-events/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-events/app/env.d.ts b/dist/samples/web-components-events/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/web-components-events/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-events/app/index.html b/dist/samples/web-components-events/app/index.html new file mode 100644 index 0000000000..9725af1f30 --- /dev/null +++ b/dist/samples/web-components-events/app/index.html @@ -0,0 +1,44 @@ + + + + + Add a Map Web Component with Events + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-events/app/index.ts b/dist/samples/web-components-events/app/index.ts new file mode 100644 index 0000000000..9327b96eec --- /dev/null +++ b/dist/samples/web-components-events/app/index.ts @@ -0,0 +1,35 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// This example adds a map using web components. +function initMap(): void { + console.log('Maps JavaScript API loaded.'); + const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker"); + for (const advancedMarker of advancedMarkers) { + + customElements.whenDefined(advancedMarker.localName).then(async () => { + advancedMarker.addEventListener('gmp-click', async () => { + + const infoWindow = new google.maps.InfoWindow({ + //@ts-ignore + content: advancedMarker.title, + }); + infoWindow.open({ + //@ts-ignore + anchor: advancedMarker + }); + }); + }); + } +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export { }; diff --git a/dist/samples/web-components-events/app/package.json b/dist/samples/web-components-events/app/package.json new file mode 100644 index 0000000000..e0371f95bb --- /dev/null +++ b/dist/samples/web-components-events/app/package.json @@ -0,0 +1,35 @@ +{ + "name": "web-components-events", + "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.2.2", + "vite": "^4.4.9" + }, + "private": true, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-events/app/style.css b/dist/samples/web-components-events/app/style.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-events/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: 500px; +} + diff --git a/dist/samples/web-components-events/app/tsconfig.json b/dist/samples/web-components-events/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/web-components-events/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-events/app/vite.config.js b/dist/samples/web-components-events/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/web-components-events/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-events/docs/index.html b/dist/samples/web-components-events/docs/index.html new file mode 100644 index 0000000000..95cf024ffd --- /dev/null +++ b/dist/samples/web-components-events/docs/index.html @@ -0,0 +1,46 @@ + + + + + + Add a Map Web Component with Events + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-events/docs/index.js b/dist/samples/web-components-events/docs/index.js new file mode 100644 index 0000000000..a383a2b6ac --- /dev/null +++ b/dist/samples/web-components-events/docs/index.js @@ -0,0 +1,33 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_web_components_events] +// This example adds a map using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); + + const advancedMarkers = document.querySelectorAll( + "#marker-click-event-example gmp-advanced-marker", + ); + + for (const advancedMarker of advancedMarkers) { + customElements.whenDefined(advancedMarker.localName).then(async () => { + advancedMarker.addEventListener("gmp-click", async () => { + const infoWindow = new google.maps.InfoWindow({ + //@ts-ignore + content: advancedMarker.title, + }); + + infoWindow.open({ + //@ts-ignore + anchor: advancedMarker, + }); + }); + }); + } +} + +window.initMap = initMap; +// [END maps_web_components_events] diff --git a/dist/samples/web-components-events/docs/style.css b/dist/samples/web-components-events/docs/style.css new file mode 100644 index 0000000000..7a594f1d19 --- /dev/null +++ b/dist/samples/web-components-events/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_events] */ +/* + * 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: 500px; +} + +/* [END maps_web_components_events] */ \ No newline at end of file diff --git a/dist/samples/web-components-events/iframe/index.html b/dist/samples/web-components-events/iframe/index.html new file mode 100644 index 0000000000..2b2f5e70d2 --- /dev/null +++ b/dist/samples/web-components-events/iframe/index.html @@ -0,0 +1,44 @@ + + + + + Add a Map Web Component with Events + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-events/jsfiddle/demo.css b/dist/samples/web-components-events/jsfiddle/demo.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-events/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: 500px; +} + diff --git a/dist/samples/web-components-events/jsfiddle/demo.details b/dist/samples/web-components-events/jsfiddle/demo.details new file mode 100644 index 0000000000..ceb2c1daa9 --- /dev/null +++ b/dist/samples/web-components-events/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: Add a Map Web Component with Events +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-events/jsfiddle/demo.html b/dist/samples/web-components-events/jsfiddle/demo.html new file mode 100644 index 0000000000..eeab6d44a2 --- /dev/null +++ b/dist/samples/web-components-events/jsfiddle/demo.html @@ -0,0 +1,42 @@ + + + + + Add a Map Web Component with Events + + + + + + + + + + + + + diff --git a/dist/samples/web-components-events/jsfiddle/demo.js b/dist/samples/web-components-events/jsfiddle/demo.js new file mode 100644 index 0000000000..68cde497fe --- /dev/null +++ b/dist/samples/web-components-events/jsfiddle/demo.js @@ -0,0 +1,31 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// This example adds a map using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); + + const advancedMarkers = document.querySelectorAll( + "#marker-click-event-example gmp-advanced-marker", + ); + + for (const advancedMarker of advancedMarkers) { + customElements.whenDefined(advancedMarker.localName).then(async () => { + advancedMarker.addEventListener("gmp-click", async () => { + const infoWindow = new google.maps.InfoWindow({ + //@ts-ignore + content: advancedMarker.title, + }); + + infoWindow.open({ + //@ts-ignore + anchor: advancedMarker, + }); + }); + }); + } +} + +window.initMap = initMap; diff --git a/dist/samples/web-components-events/playground/index.html b/dist/samples/web-components-events/playground/index.html new file mode 100644 index 0000000000..e44e160ff7 --- /dev/null +++ b/dist/samples/web-components-events/playground/index.html @@ -0,0 +1,45 @@ + + + Add a Map Web Component with Events + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-events/playground/index.ts b/dist/samples/web-components-events/playground/index.ts new file mode 100644 index 0000000000..b4311131f4 --- /dev/null +++ b/dist/samples/web-components-events/playground/index.ts @@ -0,0 +1,29 @@ +// This example adds a map using web components. +function initMap(): void { + console.log("Maps JavaScript API loaded."); + const advancedMarkers = document.querySelectorAll( + "#marker-click-event-example gmp-advanced-marker", + ); + for (const advancedMarker of advancedMarkers) { + customElements.whenDefined(advancedMarker.localName).then(async () => { + advancedMarker.addEventListener("gmp-click", async () => { + const infoWindow = new google.maps.InfoWindow({ + //@ts-ignore + content: advancedMarker.title, + }); + infoWindow.open({ + //@ts-ignore + anchor: advancedMarker, + }); + }); + }); + } +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export {}; diff --git a/dist/samples/web-components-events/playground/package.json b/dist/samples/web-components-events/playground/package.json new file mode 100644 index 0000000000..33703d5822 --- /dev/null +++ b/dist/samples/web-components-events/playground/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-events/playground/playground.ts.json b/dist/samples/web-components-events/playground/playground.ts.json new file mode 100644 index 0000000000..dfc32121fc --- /dev/null +++ b/dist/samples/web-components-events/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-events/playground/style.css b/dist/samples/web-components-events/playground/style.css new file mode 100644 index 0000000000..7d51737775 --- /dev/null +++ b/dist/samples/web-components-events/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: 500px; +} + diff --git a/dist/samples/web-components-map/app/.env b/dist/samples/web-components-map/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/web-components-map/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/web-components-map/app/.eslintrc.json b/dist/samples/web-components-map/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/web-components-map/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-map/app/.gitignore b/dist/samples/web-components-map/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/web-components-map/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/web-components-map/app/README.md b/dist/samples/web-components-map/app/README.md new file mode 100644 index 0000000000..012fc1859f --- /dev/null +++ b/dist/samples/web-components-map/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-map/app/env.d.ts b/dist/samples/web-components-map/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/web-components-map/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-map/app/index.html b/dist/samples/web-components-map/app/index.html new file mode 100644 index 0000000000..00dac9ea59 --- /dev/null +++ b/dist/samples/web-components-map/app/index.html @@ -0,0 +1,34 @@ + + + + + Add a Map Web Component + + + + + + + + + + + + diff --git a/dist/samples/web-components-map/app/index.ts b/dist/samples/web-components-map/app/index.ts new file mode 100644 index 0000000000..302941c04c --- /dev/null +++ b/dist/samples/web-components-map/app/index.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// This example adds a map using web components. +function initMap(): void { + console.log('Maps JavaScript API loaded.'); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export { }; diff --git a/dist/samples/web-components-map/app/package.json b/dist/samples/web-components-map/app/package.json new file mode 100644 index 0000000000..65f9839338 --- /dev/null +++ b/dist/samples/web-components-map/app/package.json @@ -0,0 +1,35 @@ +{ + "name": "web-components-map", + "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.2.2", + "vite": "^4.4.9" + }, + "private": true, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-map/app/style.css b/dist/samples/web-components-map/app/style.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-map/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: 500px; +} + diff --git a/dist/samples/web-components-map/app/tsconfig.json b/dist/samples/web-components-map/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/web-components-map/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-map/app/vite.config.js b/dist/samples/web-components-map/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/web-components-map/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-map/docs/index.html b/dist/samples/web-components-map/docs/index.html new file mode 100644 index 0000000000..4cc572142c --- /dev/null +++ b/dist/samples/web-components-map/docs/index.html @@ -0,0 +1,36 @@ + + + + + + Add a Map Web Component + + + + + + + + + + + + + diff --git a/dist/samples/web-components-map/docs/index.js b/dist/samples/web-components-map/docs/index.js new file mode 100644 index 0000000000..1fc6d74a23 --- /dev/null +++ b/dist/samples/web-components-map/docs/index.js @@ -0,0 +1,13 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_web_components_map] +// This example adds a map using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); +} + +window.initMap = initMap; +// [END maps_web_components_map] diff --git a/dist/samples/web-components-map/docs/style.css b/dist/samples/web-components-map/docs/style.css new file mode 100644 index 0000000000..9034c15dab --- /dev/null +++ b/dist/samples/web-components-map/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_map] */ +/* + * 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: 500px; +} + +/* [END maps_web_components_map] */ \ No newline at end of file diff --git a/dist/samples/web-components-map/iframe/index.html b/dist/samples/web-components-map/iframe/index.html new file mode 100644 index 0000000000..2a2d5f6182 --- /dev/null +++ b/dist/samples/web-components-map/iframe/index.html @@ -0,0 +1,34 @@ + + + + + Add a Map Web Component + + + + + + + + + + + + diff --git a/dist/samples/web-components-map/jsfiddle/demo.css b/dist/samples/web-components-map/jsfiddle/demo.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-map/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: 500px; +} + diff --git a/dist/samples/web-components-map/jsfiddle/demo.details b/dist/samples/web-components-map/jsfiddle/demo.details new file mode 100644 index 0000000000..450149eff9 --- /dev/null +++ b/dist/samples/web-components-map/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: Add a Map Web Component +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-map/jsfiddle/demo.html b/dist/samples/web-components-map/jsfiddle/demo.html new file mode 100644 index 0000000000..3390d5ae69 --- /dev/null +++ b/dist/samples/web-components-map/jsfiddle/demo.html @@ -0,0 +1,32 @@ + + + + + Add a Map Web Component + + + + + + + + + + diff --git a/dist/samples/web-components-map/jsfiddle/demo.js b/dist/samples/web-components-map/jsfiddle/demo.js new file mode 100644 index 0000000000..eef75b12e3 --- /dev/null +++ b/dist/samples/web-components-map/jsfiddle/demo.js @@ -0,0 +1,11 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// This example adds a map using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); +} + +window.initMap = initMap; diff --git a/dist/samples/web-components-map/playground/index.html b/dist/samples/web-components-map/playground/index.html new file mode 100644 index 0000000000..4c0001cfcc --- /dev/null +++ b/dist/samples/web-components-map/playground/index.html @@ -0,0 +1,35 @@ + + + Add a Map Web Component + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-map/playground/index.ts b/dist/samples/web-components-map/playground/index.ts new file mode 100644 index 0000000000..bd495807a9 --- /dev/null +++ b/dist/samples/web-components-map/playground/index.ts @@ -0,0 +1,12 @@ +// This example adds a map using web components. +function initMap(): void { + console.log("Maps JavaScript API loaded."); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export {}; diff --git a/dist/samples/web-components-map/playground/package.json b/dist/samples/web-components-map/playground/package.json new file mode 100644 index 0000000000..33703d5822 --- /dev/null +++ b/dist/samples/web-components-map/playground/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-map/playground/playground.ts.json b/dist/samples/web-components-map/playground/playground.ts.json new file mode 100644 index 0000000000..dfc32121fc --- /dev/null +++ b/dist/samples/web-components-map/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-map/playground/style.css b/dist/samples/web-components-map/playground/style.css new file mode 100644 index 0000000000..7d51737775 --- /dev/null +++ b/dist/samples/web-components-map/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: 500px; +} + diff --git a/dist/samples/web-components-markers/app/.env b/dist/samples/web-components-markers/app/.env new file mode 100644 index 0000000000..d7474dcb8b --- /dev/null +++ b/dist/samples/web-components-markers/app/.env @@ -0,0 +1 @@ +VITE_GOOGLE_MAPS_API_KEY=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg \ No newline at end of file diff --git a/dist/samples/web-components-markers/app/.eslintrc.json b/dist/samples/web-components-markers/app/.eslintrc.json new file mode 100644 index 0000000000..841a372aa2 --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/app/.gitignore b/dist/samples/web-components-markers/app/.gitignore new file mode 100644 index 0000000000..10ec766622 --- /dev/null +++ b/dist/samples/web-components-markers/app/.gitignore @@ -0,0 +1,4 @@ + +node_modules +dist +package-lock.json diff --git a/dist/samples/web-components-markers/app/README.md b/dist/samples/web-components-markers/app/README.md new file mode 100644 index 0000000000..012fc1859f --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/app/env.d.ts b/dist/samples/web-components-markers/app/env.d.ts new file mode 100644 index 0000000000..2d29a7a6be --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/app/index.html b/dist/samples/web-components-markers/app/index.html new file mode 100644 index 0000000000..220eaac793 --- /dev/null +++ b/dist/samples/web-components-markers/app/index.html @@ -0,0 +1,39 @@ + + + + + Add a Map with Markers using Web Components + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-markers/app/index.ts b/dist/samples/web-components-markers/app/index.ts new file mode 100644 index 0000000000..93044007f2 --- /dev/null +++ b/dist/samples/web-components-markers/app/index.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// This example adds a map with markers, using web components. +function initMap(): void { + console.log('Maps JavaScript API loaded.'); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export { }; diff --git a/dist/samples/web-components-markers/app/package.json b/dist/samples/web-components-markers/app/package.json new file mode 100644 index 0000000000..5b092ac52a --- /dev/null +++ b/dist/samples/web-components-markers/app/package.json @@ -0,0 +1,35 @@ +{ + "name": "web-components-markers", + "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.2.2", + "vite": "^4.4.9" + }, + "private": true, + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-markers/app/style.css b/dist/samples/web-components-markers/app/style.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-markers/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: 500px; +} + diff --git a/dist/samples/web-components-markers/app/tsconfig.json b/dist/samples/web-components-markers/app/tsconfig.json new file mode 100644 index 0000000000..b405998dad --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/app/vite.config.js b/dist/samples/web-components-markers/app/vite.config.js new file mode 100644 index 0000000000..d49e45cd7e --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/docs/index.html b/dist/samples/web-components-markers/docs/index.html new file mode 100644 index 0000000000..0f8dec7d14 --- /dev/null +++ b/dist/samples/web-components-markers/docs/index.html @@ -0,0 +1,41 @@ + + + + + + Add a Map with Markers using Web Components + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-markers/docs/index.js b/dist/samples/web-components-markers/docs/index.js new file mode 100644 index 0000000000..f6b523bc2d --- /dev/null +++ b/dist/samples/web-components-markers/docs/index.js @@ -0,0 +1,13 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_web_components_markers] +// This example adds a map with markers, using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); +} + +window.initMap = initMap; +// [END maps_web_components_markers] diff --git a/dist/samples/web-components-markers/docs/style.css b/dist/samples/web-components-markers/docs/style.css new file mode 100644 index 0000000000..c27bdba4e5 --- /dev/null +++ b/dist/samples/web-components-markers/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_markers] */ +/* + * 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: 500px; +} + +/* [END maps_web_components_markers] */ \ No newline at end of file diff --git a/dist/samples/web-components-markers/iframe/index.html b/dist/samples/web-components-markers/iframe/index.html new file mode 100644 index 0000000000..44f676ba74 --- /dev/null +++ b/dist/samples/web-components-markers/iframe/index.html @@ -0,0 +1,39 @@ + + + + + Add a Map with Markers using Web Components + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-markers/jsfiddle/demo.css b/dist/samples/web-components-markers/jsfiddle/demo.css new file mode 100644 index 0000000000..58002ee55c --- /dev/null +++ b/dist/samples/web-components-markers/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: 500px; +} + diff --git a/dist/samples/web-components-markers/jsfiddle/demo.details b/dist/samples/web-components-markers/jsfiddle/demo.details new file mode 100644 index 0000000000..4693ab19ed --- /dev/null +++ b/dist/samples/web-components-markers/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: Add a Map with Markers using 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-markers/jsfiddle/demo.html b/dist/samples/web-components-markers/jsfiddle/demo.html new file mode 100644 index 0000000000..19f8210bcb --- /dev/null +++ b/dist/samples/web-components-markers/jsfiddle/demo.html @@ -0,0 +1,37 @@ + + + + + Add a Map with Markers using Web Components + + + + + + + + + + + + + diff --git a/dist/samples/web-components-markers/jsfiddle/demo.js b/dist/samples/web-components-markers/jsfiddle/demo.js new file mode 100644 index 0000000000..add04d28ad --- /dev/null +++ b/dist/samples/web-components-markers/jsfiddle/demo.js @@ -0,0 +1,11 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// This example adds a map with markers, using web components. +function initMap() { + console.log("Maps JavaScript API loaded."); +} + +window.initMap = initMap; diff --git a/dist/samples/web-components-markers/playground/index.html b/dist/samples/web-components-markers/playground/index.html new file mode 100644 index 0000000000..672551d571 --- /dev/null +++ b/dist/samples/web-components-markers/playground/index.html @@ -0,0 +1,40 @@ + + + Add a Map with Markers using Web Components + + + + + + + + + + + + + + + + + + diff --git a/dist/samples/web-components-markers/playground/index.ts b/dist/samples/web-components-markers/playground/index.ts new file mode 100644 index 0000000000..2175bbcfe8 --- /dev/null +++ b/dist/samples/web-components-markers/playground/index.ts @@ -0,0 +1,12 @@ +// This example adds a map with markers, using web components. +function initMap(): void { + console.log("Maps JavaScript API loaded."); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +export {}; diff --git a/dist/samples/web-components-markers/playground/package.json b/dist/samples/web-components-markers/playground/package.json new file mode 100644 index 0000000000..33703d5822 --- /dev/null +++ b/dist/samples/web-components-markers/playground/package.json @@ -0,0 +1,3 @@ +{ + "dependencies": {} +} \ No newline at end of file diff --git a/dist/samples/web-components-markers/playground/playground.ts.json b/dist/samples/web-components-markers/playground/playground.ts.json new file mode 100644 index 0000000000..dfc32121fc --- /dev/null +++ b/dist/samples/web-components-markers/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-markers/playground/style.css b/dist/samples/web-components-markers/playground/style.css new file mode 100644 index 0000000000..7d51737775 --- /dev/null +++ b/dist/samples/web-components-markers/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: 500px; +} +