diff --git a/samples/map-3d-events/index.njk b/samples/map-3d-events/index.njk
new file mode 100644
index 0000000000..6654c0899f
--- /dev/null
+++ b/samples/map-3d-events/index.njk
@@ -0,0 +1,18 @@
+
+
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+
+
+{% endblock %}
diff --git a/samples/map-3d-events/index.ts b/samples/map-3d-events/index.ts
new file mode 100644
index 0000000000..09f5c35d17
--- /dev/null
+++ 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 { };
\ No newline at end of file
diff --git a/samples/map-3d-events/map-3d-events.json b/samples/map-3d-events/map-3d-events.json
new file mode 100644
index 0000000000..08080988e3
--- /dev/null
+++ 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 }}"
+ }
+
\ No newline at end of file
diff --git a/samples/map-3d-events/style.scss b/samples/map-3d-events/style.scss
new file mode 100644
index 0000000000..25c2a5c005
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..619324c28c
--- /dev/null
+++ b/samples/map-3d-simple/index.njk
@@ -0,0 +1,9 @@
+
+
+{% extends '../../src/_includes/layout.njk'%} {% block html %}
+
+{% endblock %}
diff --git a/samples/map-3d-simple/index.ts b/samples/map-3d-simple/index.ts
new file mode 100644
index 0000000000..370aaa1fc5
--- /dev/null
+++ 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 {
+ 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
new file mode 100644
index 0000000000..5607b2ced2
--- /dev/null
+++ 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 }}"
+ }
+
\ No newline at end of file
diff --git a/samples/map-3d-simple/style.scss b/samples/map-3d-simple/style.scss
new file mode 100644
index 0000000000..62cc16f779
--- /dev/null
+++ 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] */
+
\ No newline at end of file