googlemaps · willum070 · Apr 26, 2024 · Apr 29, 2024 · Apr 29, 2024
diff --git a/samples/map-3d-events/index.njk b/samples/map-3d-events/index.njk
@@ -0,0 +1,18 @@
+<!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-3d center="37.7704, -122.3985, 460" range="300" tilt="700"></gmp-map-3d>
+<aside>
+  <p id="gmp-centerchange">gmp-centerchange</p>
+  <p id="gmp-click">gmp-click</p>
+  <p id="gmp-headingchange">gmp-headingchange</p>
+  <p id="gmp-rangechange">gmp-rangechange</p>
+  <p id="gmp-rollchange">gmp-rollchange</p>
+  <p id="gmp-steadychange">gmp-steadychange</p>
+  <p id="gmp-tiltchange">gmp-tiltchange</p>
+</aside>
+{% endblock %}
diff --git a/samples/map-3d-events/index.ts b/samples/map-3d-events/index.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_map_3d_event]
+async function initMap() {
+    // Request needed libraries.
+    //@ts-ignore
+    await google.maps.importLibrary("maps3d") as google.maps.Maps3DLibrary;
+    //@ts-ignore
+    const mapElement = document.querySelector('gmp-map-3d') as google.maps.maps3d.Map3DElement;
+
+    const events =
+        [...document.querySelectorAll('aside > p')].map(i => i.textContent);
+
+    customElements.whenDefined(mapElement.localName).then(() => {
+      for (const event of events) {
+        mapElement.addEventListener(event, () => {
+          const eventElement = document.querySelector(`#${event}`);
+          eventElement?.classList.add('active');
+          setTimeout(() => {
+            eventElement?.classList.remove('active');
+          }, 1000);
+        });
+      }
+    });
+}
+
+initMap();
+// [END maps_map_3d_event]
+export { };
diff --git a/samples/map-3d-events/map-3d-events.json b/samples/map-3d-events/map-3d-events.json
@@ -0,0 +1,14 @@
+{
+    "title": "Map 3D Events",
+    "dynamic_import": "true",
+    "version": "alpha",
+    "tag": "map_3d_events",
+    "name": "map-3d-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/map-3d-events/style.scss b/samples/map-3d-events/style.scss
@@ -0,0 +1,38 @@
+/**
+ * @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_map_3d_events] */
+@include meta.load-css("../../shared/scss/sidebar.scss");
+
+body, main {
+  display: flex;
+}
+main {
+  padding: 30px;
+}
+main {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+}
+gmp-map-3d {
+  flex-basis: 75%;
+  height: 100%;
+}
+aside {
+  flex-basis: 25%;
+  font-family: Droid Sans Mono, monospace;
+  font-size: 14px;
+  padding-left: 10px;
+}
+aside > p.active {
+  background-color: #9cf;
+}
+/* [END maps_map_3d_events] */
diff --git a/samples/map-3d-simple/index.njk b/samples/map-3d-simple/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-3d center="37.7704, -122.3985, 460" range="300" tilt="700"></gmp-map-3d>
+{% endblock %}
diff --git a/samples/map-3d-simple/index.ts b/samples/map-3d-simple/index.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_3d_map_simple]
+async function initMap(): Promise<void> {
+    console.log('Maps JavaScript API loaded.');
+}
+
+declare global {
+    interface Window {
+        initMap: () => void;
+    }
+}
+window.initMap = initMap;
+// [END maps_3d_map_simple]
+export { };
diff --git a/samples/map-3d-simple/map-3d-simple.json b/samples/map-3d-simple/map-3d-simple.json
@@ -0,0 +1,17 @@
+{
+    "title": "Map 3D Simple Example",
+    "libraries": [
+      "maps3d"
+    ],
+    "callback": "initMap",
+    "version": "alpha",
+    "tag": "map_3d_simple",
+    "name": "map-3d-simple",
+    "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/map-3d-simple/style.scss b/samples/map-3d-simple/style.scss
@@ -0,0 +1,13 @@
+/**
+ * @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_3d_map_simple] */
+ @include meta.load-css("../../shared/scss/default.scss");
+
+ /* [END maps_3d_map_simple] */
+