diff --git a/dist/index.html b/dist/index.html
index b36ac742..2c80eb87 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -43,6 +43,7 @@ Maps JSAPI Samples
advanced-markers-html
advanced-markers-html-simple
advanced-markers-simple
+ advanced-markers-zoom
deckgl-heatmap
deckgl-kml
deckgl-kml-updated
diff --git a/dist/samples/advanced-markers-zoom/app/.eslintsrc.json b/dist/samples/advanced-markers-zoom/app/.eslintsrc.json
new file mode 100644
index 00000000..4c44dab0
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/.eslintsrc.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
+ }
+}
diff --git a/dist/samples/advanced-markers-zoom/app/README.md b/dist/samples/advanced-markers-zoom/app/README.md
new file mode 100644
index 00000000..ac1ec065
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/README.md
@@ -0,0 +1,40 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/advanced-markers-zoom`
+`npm start`
+
+### Build an individual example
+
+`cd samples/advanced-markers-zoom`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=advanced-markers-zoom/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/advanced-markers-zoom`
+`npx eslint index.ts`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/dist/samples/advanced-markers-zoom/app/index.html b/dist/samples/advanced-markers-zoom/app/index.html
new file mode 100644
index 00000000..968569cd
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Advanced Marker Zoom Visibility
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/advanced-markers-zoom/app/index.ts b/dist/samples/advanced-markers-zoom/app/index.ts
new file mode 100644
index 00000000..b513872a
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/index.ts
@@ -0,0 +1,58 @@
+
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_advanced_markers_zoom]
+async function initMap() {
+ // Request needed libraries.
+ const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+
+ const map = new Map(document.getElementById('map') as HTMLElement, {
+ center: {lat: 37.424563902650114, lng: -122.09512859577026},
+ zoom: 17,
+ mapId: '4504f8b37365c3d0',
+ });
+
+ const marker01 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4239163, lng: -122.094 },
+ title: 'This marker is visible at zoom level 15 and higher.'
+ });
+
+ const marker02 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4245, lng: -122.096 },
+ title: 'This marker is visible at zoom level 16 and higher.'
+ });
+
+ const marker03 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4249, lng: -122.095 },
+ title: 'This marker is visible at zoom level 17 and higher.'
+ });
+
+ const marker04 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.425, lng: -122.0955 },
+ title: 'This marker is visible at zoom level 18 and higher.'
+ });
+ // [START maps_advanced_markers_zoom_listener]
+ map.addListener('zoom_changed', () => {
+ const zoom = map.getZoom();
+ if (zoom) {
+ // Only show each marker above a certain zoom level.
+ marker01.map = zoom > 14 ? map : null;
+ marker02.map = zoom > 15 ? map : null;
+ marker03.map = zoom > 16 ? map : null;
+ marker04.map = zoom > 17 ? map : null;
+ }
+ });
+ // [END maps_advanced_markers_zoom_listener]
+}
+
+initMap();
+// [END maps_advanced_markers_zoom]
\ No newline at end of file
diff --git a/dist/samples/advanced-markers-zoom/app/package.json b/dist/samples/advanced-markers-zoom/app/package.json
new file mode 100644
index 00000000..e2e8dab3
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@js-api-samples/advanced-markers-zoom",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh advanced-markers-zoom && bash ../app.sh advanced-markers-zoom && bash ../docs.sh advanced-markers-zoom && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-zoom",
+ "test": "tsc && npm run build:vite --workspace=.",
+ "start": "tsc && vite build --base './' && vite",
+ "build:vite": "vite build --base './'",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+
+ }
+}
diff --git a/dist/samples/advanced-markers-zoom/app/style.css b/dist/samples/advanced-markers-zoom/app/style.css
new file mode 100644
index 00000000..a748b5a2
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/style.css
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_advanced_markers_zoom] */
+/*
+ * 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;
+}
+
+/* [END maps_advanced_markers_zoom] */
\ No newline at end of file
diff --git a/dist/samples/advanced-markers-zoom/app/tsconfig.json b/dist/samples/advanced-markers-zoom/app/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/app/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "esnext",
+ "strict": true,
+ "noImplicitAny": false,
+ "lib": [
+ "es2015",
+ "esnext",
+ "es6",
+ "dom",
+ "dom.iterable"
+ ],
+ "moduleResolution": "Node",
+ "jsx": "preserve"
+ }
+}
diff --git a/dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css
new file mode 100644
index 00000000..672cb7cc
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */#map{height:100%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js b/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js
new file mode 100644
index 00000000..3c3cdfcc
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js
@@ -0,0 +1,5 @@
+(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const i of t.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function r(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function s(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */async function a(){const{Map:l}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o}=await google.maps.importLibrary("marker"),r=new l(document.getElementById("map"),{center:{lat:37.424563902650114,lng:-122.09512859577026},zoom:17,mapId:"4504f8b37365c3d0"}),s=new o({map:r,position:{lat:37.4239163,lng:-122.094},title:"This marker is visible at zoom level 15 and higher."}),e=new o({map:r,position:{lat:37.4245,lng:-122.096},title:"This marker is visible at zoom level 16 and higher."}),t=new o({map:r,position:{lat:37.4249,lng:-122.095},title:"This marker is visible at zoom level 17 and higher."}),i=new o({map:r,position:{lat:37.425,lng:-122.0955},title:"This marker is visible at zoom level 18 and higher."});r.addListener("zoom_changed",()=>{const n=r.getZoom();n&&(s.map=n>14?r:null,e.map=n>15?r:null,t.map=n>16?r:null,i.map=n>17?r:null)})}a();
diff --git a/dist/samples/advanced-markers-zoom/dist/index.html b/dist/samples/advanced-markers-zoom/dist/index.html
new file mode 100644
index 00000000..7d696511
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/dist/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Advanced Marker Zoom Visibility
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/advanced-markers-zoom/docs/index.html b/dist/samples/advanced-markers-zoom/docs/index.html
new file mode 100644
index 00000000..968569cd
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/docs/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Advanced Marker Zoom Visibility
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/advanced-markers-zoom/docs/index.js b/dist/samples/advanced-markers-zoom/docs/index.js
new file mode 100644
index 00000000..a759ccbb
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/docs/index.js
@@ -0,0 +1,51 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// [START maps_advanced_markers_zoom]
+async function initMap() {
+ // Request needed libraries.
+ const { Map } = await google.maps.importLibrary("maps");
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+ const map = new Map(document.getElementById('map'), {
+ center: { lat: 37.424563902650114, lng: -122.09512859577026 },
+ zoom: 17,
+ mapId: '4504f8b37365c3d0',
+ });
+ const marker01 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4239163, lng: -122.094 },
+ title: 'This marker is visible at zoom level 15 and higher.'
+ });
+ const marker02 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4245, lng: -122.096 },
+ title: 'This marker is visible at zoom level 16 and higher.'
+ });
+ const marker03 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4249, lng: -122.095 },
+ title: 'This marker is visible at zoom level 17 and higher.'
+ });
+ const marker04 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.425, lng: -122.0955 },
+ title: 'This marker is visible at zoom level 18 and higher.'
+ });
+ // [START maps_advanced_markers_zoom_listener]
+ map.addListener('zoom_changed', () => {
+ const zoom = map.getZoom();
+ if (zoom) {
+ // Only show each marker above a certain zoom level.
+ marker01.map = zoom > 14 ? map : null;
+ marker02.map = zoom > 15 ? map : null;
+ marker03.map = zoom > 16 ? map : null;
+ marker04.map = zoom > 17 ? map : null;
+ }
+ });
+ // [END maps_advanced_markers_zoom_listener]
+}
+initMap();
+// [END maps_advanced_markers_zoom]
diff --git a/dist/samples/advanced-markers-zoom/docs/index.ts b/dist/samples/advanced-markers-zoom/docs/index.ts
new file mode 100644
index 00000000..b513872a
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/docs/index.ts
@@ -0,0 +1,58 @@
+
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_advanced_markers_zoom]
+async function initMap() {
+ // Request needed libraries.
+ const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+
+ const map = new Map(document.getElementById('map') as HTMLElement, {
+ center: {lat: 37.424563902650114, lng: -122.09512859577026},
+ zoom: 17,
+ mapId: '4504f8b37365c3d0',
+ });
+
+ const marker01 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4239163, lng: -122.094 },
+ title: 'This marker is visible at zoom level 15 and higher.'
+ });
+
+ const marker02 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4245, lng: -122.096 },
+ title: 'This marker is visible at zoom level 16 and higher.'
+ });
+
+ const marker03 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4249, lng: -122.095 },
+ title: 'This marker is visible at zoom level 17 and higher.'
+ });
+
+ const marker04 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.425, lng: -122.0955 },
+ title: 'This marker is visible at zoom level 18 and higher.'
+ });
+ // [START maps_advanced_markers_zoom_listener]
+ map.addListener('zoom_changed', () => {
+ const zoom = map.getZoom();
+ if (zoom) {
+ // Only show each marker above a certain zoom level.
+ marker01.map = zoom > 14 ? map : null;
+ marker02.map = zoom > 15 ? map : null;
+ marker03.map = zoom > 16 ? map : null;
+ marker04.map = zoom > 17 ? map : null;
+ }
+ });
+ // [END maps_advanced_markers_zoom_listener]
+}
+
+initMap();
+// [END maps_advanced_markers_zoom]
\ No newline at end of file
diff --git a/dist/samples/advanced-markers-zoom/docs/style.css b/dist/samples/advanced-markers-zoom/docs/style.css
new file mode 100644
index 00000000..a748b5a2
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/docs/style.css
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_advanced_markers_zoom] */
+/*
+ * 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;
+}
+
+/* [END maps_advanced_markers_zoom] */
\ No newline at end of file
diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.css b/dist/samples/advanced-markers-zoom/jsfiddle/demo.css
new file mode 100644
index 00000000..fa4d8cd3
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.css
@@ -0,0 +1,24 @@
+/**
+ * @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;
+}
+
diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.details b/dist/samples/advanced-markers-zoom/jsfiddle/demo.details
new file mode 100644
index 00000000..d704703b
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: advanced-markers-zoom
+authors:
+ - Geo Developer IX Documentation Team
+tags:
+ - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.html b/dist/samples/advanced-markers-zoom/jsfiddle/demo.html
new file mode 100644
index 00000000..6d066fa7
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Advanced Marker Zoom Visibility
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.js b/dist/samples/advanced-markers-zoom/jsfiddle/demo.js
new file mode 100644
index 00000000..fbff671a
--- /dev/null
+++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.js
@@ -0,0 +1,51 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+async function initMap() {
+ // Request needed libraries.
+ const { Map } = await google.maps.importLibrary("maps");
+ const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+ const map = new Map(document.getElementById('map'), {
+ center: { lat: 37.424563902650114, lng: -122.09512859577026 },
+ zoom: 17,
+ mapId: '4504f8b37365c3d0',
+ });
+ const marker01 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4239163, lng: -122.094 },
+ title: 'This marker is visible at zoom level 15 and higher.'
+ });
+ const marker02 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4245, lng: -122.096 },
+ title: 'This marker is visible at zoom level 16 and higher.'
+ });
+ const marker03 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.4249, lng: -122.095 },
+ title: 'This marker is visible at zoom level 17 and higher.'
+ });
+ const marker04 = new AdvancedMarkerElement({
+ map,
+ position: { lat: 37.425, lng: -122.0955 },
+ title: 'This marker is visible at zoom level 18 and higher.'
+ });
+
+ map.addListener('zoom_changed', () => {
+ const zoom = map.getZoom();
+ if (zoom) {
+ // Only show each marker above a certain zoom level.
+ marker01.map = zoom > 14 ? map : null;
+ marker02.map = zoom > 15 ? map : null;
+ marker03.map = zoom > 16 ? map : null;
+ marker04.map = zoom > 17 ? map : null;
+ }
+ });
+
+}
+initMap();
+
diff --git a/index.html b/index.html
index b36ac742..2c80eb87 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,7 @@ Maps JSAPI Samples
advanced-markers-html
advanced-markers-html-simple
advanced-markers-simple
+ advanced-markers-zoom
deckgl-heatmap
deckgl-kml
deckgl-kml-updated
diff --git a/package-lock.json b/package-lock.json
index 71e86644..e00896b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1007,6 +1007,10 @@
"resolved": "samples/advanced-markers-simple",
"link": true
},
+ "node_modules/@js-api-samples/advanced-markers-zoom": {
+ "resolved": "samples/advanced-markers-zoom",
+ "link": true
+ },
"node_modules/@js-api-samples/deckgl-heatmap": {
"resolved": "samples/deckgl-heatmap",
"link": true
@@ -5195,6 +5199,10 @@
"name": "@js-api-samples/advanced-markers-simple",
"version": "1.0.0"
},
+ "samples/advanced-markers-zoom": {
+ "name": "@js-api-samples/advanced-markers-zoom",
+ "version": "1.0.0"
+ },
"samples/deckgl-heatmap": {
"name": "@js-api-samples/deckgl-heatmap",
"version": "1.0.0"