From 2ce7ad3c44fac00f0d28cb75c82b5bcd69f23c2b Mon Sep 17 00:00:00 2001 From: William French Date: Wed, 29 Nov 2023 09:07:11 -0800 Subject: [PATCH] feat: Adds example maps for web components (#1618) * feat: Adds demos for web components. Change-Id: I5998fb2fea9dbe9250f1d824c46143633ba7db78 * Update index.ts * Update index.ts --- samples/web-components-events/index.njk | 12 ++++++ samples/web-components-events/index.ts | 37 +++++++++++++++++++ samples/web-components-events/style.scss | 16 ++++++++ .../web-components-events.json | 14 +++++++ samples/web-components-map/index.njk | 9 +++++ samples/web-components-map/index.ts | 20 ++++++++++ samples/web-components-map/style.scss | 16 ++++++++ .../web-components-map.json | 14 +++++++ samples/web-components-markers/index.njk | 12 ++++++ samples/web-components-markers/index.ts | 20 ++++++++++ samples/web-components-markers/style.scss | 16 ++++++++ .../web-components-markers.json | 14 +++++++ 12 files changed, 200 insertions(+) create mode 100644 samples/web-components-events/index.njk create mode 100644 samples/web-components-events/index.ts create mode 100644 samples/web-components-events/style.scss create mode 100644 samples/web-components-events/web-components-events.json create mode 100644 samples/web-components-map/index.njk create mode 100644 samples/web-components-map/index.ts create mode 100644 samples/web-components-map/style.scss create mode 100644 samples/web-components-map/web-components-map.json create mode 100644 samples/web-components-markers/index.njk create mode 100644 samples/web-components-markers/index.ts create mode 100644 samples/web-components-markers/style.scss create mode 100644 samples/web-components-markers/web-components-markers.json diff --git a/samples/web-components-events/index.njk b/samples/web-components-events/index.njk new file mode 100644 index 0000000000..05cdcb17de --- /dev/null +++ b/samples/web-components-events/index.njk @@ -0,0 +1,12 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} + + + + +{% endblock %} diff --git a/samples/web-components-events/index.ts b/samples/web-components-events/index.ts new file mode 100644 index 0000000000..3d1ce40298 --- /dev/null +++ b/samples/web-components-events/index.ts @@ -0,0 +1,37 @@ +/** + * @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(): 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; +// [END maps_web_components_events] +export { }; diff --git a/samples/web-components-events/style.scss b/samples/web-components-events/style.scss new file mode 100644 index 0000000000..75d3c001b6 --- /dev/null +++ b/samples/web-components-events/style.scss @@ -0,0 +1,16 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order + +/* [START maps_web_components_events] */ +@include meta.load-css("../../shared/scss/default.scss"); + +gmp-map { + height: 500px; +} + +/* [END maps_web_components_events] */ \ No newline at end of file diff --git a/samples/web-components-events/web-components-events.json b/samples/web-components-events/web-components-events.json new file mode 100644 index 0000000000..116b8bd147 --- /dev/null +++ b/samples/web-components-events/web-components-events.json @@ -0,0 +1,14 @@ +{ + "title": "Add a Map Web Component with Events", + "callback": "initMap", + "libraries": ["marker"], + "version": "beta", + "tag": "web_components_events", + "name": "web-components-events", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } \ No newline at end of file diff --git a/samples/web-components-map/index.njk b/samples/web-components-map/index.njk new file mode 100644 index 0000000000..0d00fc5627 --- /dev/null +++ b/samples/web-components-map/index.njk @@ -0,0 +1,9 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} + +{% endblock %} diff --git a/samples/web-components-map/index.ts b/samples/web-components-map/index.ts new file mode 100644 index 0000000000..771c09d63b --- /dev/null +++ b/samples/web-components-map/index.ts @@ -0,0 +1,20 @@ +/** + * @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(): void { + console.log('Maps JavaScript API loaded.'); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_web_components_map] +export { }; diff --git a/samples/web-components-map/style.scss b/samples/web-components-map/style.scss new file mode 100644 index 0000000000..205f6d4c15 --- /dev/null +++ b/samples/web-components-map/style.scss @@ -0,0 +1,16 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order + +/* [START maps_web_components_map] */ +@include meta.load-css("../../shared/scss/default.scss"); + +gmp-map { + height: 500px; +} + +/* [END maps_web_components_map] */ \ No newline at end of file diff --git a/samples/web-components-map/web-components-map.json b/samples/web-components-map/web-components-map.json new file mode 100644 index 0000000000..ca25c7387b --- /dev/null +++ b/samples/web-components-map/web-components-map.json @@ -0,0 +1,14 @@ +{ + "title": "Add a Map Web Component", + "callback": "initMap", + "libraries": [], + "version": "beta", + "tag": "web_components_map", + "name": "web-components-map", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } \ No newline at end of file diff --git a/samples/web-components-markers/index.njk b/samples/web-components-markers/index.njk new file mode 100644 index 0000000000..f224983b79 --- /dev/null +++ b/samples/web-components-markers/index.njk @@ -0,0 +1,12 @@ + + +{% extends '../../src/_includes/layout.njk'%} {% block html %} + + + + +{% endblock %} diff --git a/samples/web-components-markers/index.ts b/samples/web-components-markers/index.ts new file mode 100644 index 0000000000..b18674208e --- /dev/null +++ b/samples/web-components-markers/index.ts @@ -0,0 +1,20 @@ +/** + * @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(): void { + console.log('Maps JavaScript API loaded.'); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_web_components_markers] +export { }; diff --git a/samples/web-components-markers/style.scss b/samples/web-components-markers/style.scss new file mode 100644 index 0000000000..dc258914a1 --- /dev/null +++ b/samples/web-components-markers/style.scss @@ -0,0 +1,16 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order + + /* [START maps_web_components_markers] */ + @include meta.load-css("../../shared/scss/default.scss"); + + gmp-map { + height: 500px; + } + + /* [END maps_web_components_markers] */ \ No newline at end of file diff --git a/samples/web-components-markers/web-components-markers.json b/samples/web-components-markers/web-components-markers.json new file mode 100644 index 0000000000..f1aebe1738 --- /dev/null +++ b/samples/web-components-markers/web-components-markers.json @@ -0,0 +1,14 @@ +{ + "title": "Add a Map with Markers using Web Components", + "callback": "initMap", + "libraries": ["marker"], + "version": "beta", + "tag": "web_components_markers", + "name": "web-components-markers", + "pagination": { + "data": "mode", + "size": 1, + "alias": "mode" + }, + "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}" + } \ No newline at end of file