Refactor marker creation and visibility logic

Author: willum070

samples/advanced-markers-zoom/index.ts

@@ -6,51 +6,52 @@
 
 // [START maps_advanced_markers_zoom]
 const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
-let innerMap;
 
 async function initMap() {
   // Request needed libraries.
   const { Map } = (await google.maps.importLibrary(
-    "maps"
+    'maps'
   )) as google.maps.MapsLibrary;
   const { AdvancedMarkerElement } = (await google.maps.importLibrary(
-    "marker"
+    'marker'
   )) as google.maps.MarkerLibrary;
 
-  innerMap = mapElement.innerMap;
+  const markerOptions = [
+    {
+      position: { lat: 37.4239163, lng: -122.094 },
+      title: 'This marker is visible at zoom level 15 and higher.',
+      minZoom: 14,
+    },
+    {
+      position: { lat: 37.4245, lng: -122.096 },
+      title: 'This marker is visible at zoom level 16 and higher.',
+      minZoom: 15,
+    },
+    {
+      position: { lat: 37.4249, lng: -122.095 },
+      title: 'This marker is visible at zoom level 17 and higher.',
+      minZoom: 16,
+    },
+    {
+      position: { lat: 37.425, lng: -122.0955 },
+      title: 'This marker is visible at zoom level 18 and higher.',
+      minZoom: 17,
+    },
+  ];
+
+  const markers: google.maps.marker.AdvancedMarkerElement[] = [];
+  for (const { position, title } of markerOptions) {
+    const marker = new AdvancedMarkerElement({ position, title });
+    mapElement.appendChild(marker);
+    markers.push(marker);
+  }
 
-  const marker01 = new AdvancedMarkerElement({
-    map: innerMap,
-    position: { lat: 37.4239163, lng: -122.094 },
-    title: "This marker is visible at zoom level 15 and higher.",
-  });
-
-  const marker02 = new AdvancedMarkerElement({
-    map: innerMap,
-    position: { lat: 37.4245, lng: -122.096 },
-    title: "This marker is visible at zoom level 16 and higher.",
-  });
-
-  const marker03 = new AdvancedMarkerElement({
-    map: innerMap,
-    position: { lat: 37.4249, lng: -122.095 },
-    title: "This marker is visible at zoom level 17 and higher.",
-  });
-
-  const marker04 = new AdvancedMarkerElement({
-    map: innerMap,
-    position: { lat: 37.425, lng: -122.0955 },
-    title: "This marker is visible at zoom level 18 and higher.",
-  });
   // [START maps_advanced_markers_zoom_listener]
-  innerMap.addListener("zoom_changed", () => {
-    const zoom = innerMap.getZoom();
-    if (zoom) {
-      // Only show each marker above a certain zoom level.
-      marker01.map = zoom > 14 ? innerMap : null;
-      marker02.map = zoom > 15 ? innerMap : null;
-      marker03.map = zoom > 16 ? innerMap : null;
-      marker04.map = zoom > 17 ? innerMap : null;
+  mapElement.innerMap.addListener('zoom_changed', () => {
+    let zoom = mapElement.innerMap.getZoom();
+    for (let i = 0; i < markers.length; i++) {
+      const { position, minZoom } = markerOptions[i];
+      markers[i].position = zoom! > minZoom ? position : null;
     }
   });
   // [END maps_advanced_markers_zoom_listener]