feat: Adds example maps for web components (#1618)

* feat: Adds demos for web components. Change-Id: I5998fb2fea9dbe9250f1d824c46143633ba7db78 * Update index.ts * Update index.ts
googlemaps · Nov 29, 2023 · 2ce7ad3 · 2ce7ad3
1 parent e16423a
commit 2ce7ad3
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 0 deletions.
diff --git a/samples/web-components-events/index.njk b/samples/web-components-events/index.njk
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
+  <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
+  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
+</gmp-map>
+{% endblock %}
diff --git a/samples/web-components-events/index.ts 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
@@ -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] */
diff --git a/samples/web-components-events/web-components-events.json 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 }}"
+  }
diff --git a/samples/web-components-map/index.njk b/samples/web-components-map/index.njk
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
+{% endblock %}
diff --git a/samples/web-components-map/index.ts 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
@@ -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] */
diff --git a/samples/web-components-map/web-components-map.json 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 }}"
+  }
diff --git a/samples/web-components-markers/index.njk b/samples/web-components-markers/index.njk
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
+    <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
+    <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
+</gmp-map>
+{% endblock %}
diff --git a/samples/web-components-markers/index.ts 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
@@ -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] */
diff --git a/samples/web-components-markers/web-components-markers.json 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 }}"
+  }