markers stay cached

Author: apixandru

src/dev-app/google-map/google-map-demo.html

@@ -8,11 +8,12 @@
                 (mapClick)="handleClick($event)"
                 (mapMousemove)="handleMove($event)"
                 (mapRightclick)="handleRightclick()"
+                [options]="createOptions"
                 [mapTypeId]="mapTypeId">
       <map-marker-clusterer [imagePath]="markerClustererImagePath">
-        <map-marker #firstMarker="mapMarker"
-                    [position]="center"
-                    (mapClick)="clickMarker(firstMarker)"></map-marker>
+<!--        <map-marker #firstMarker="mapMarker"-->
+<!--                    [position]="center"-->
+<!--                    (mapClick)="clickMarker(firstMarker)"></map-marker>-->
         @for (markerPosition of markerPositions; track markerPosition) {
           <map-marker #marker="mapMarker"
             [position]="markerPosition"
@@ -70,6 +71,13 @@
     <p><label>Latitude:</label> {{display?.lat}}</p>
     <p><label>Longitude:</label> {{display?.lng}}</p>
 
+    <div>
+      <label for="polyline-checkbox">
+        Hide markers
+        <input type="checkbox" (click)="toggleHideMarkers()">
+      </label>
+    </div>
+
     <div>
       <label for="map-type">
         Select map type

src/dev-app/google-map/google-map-demo.ts

@@ -91,7 +91,13 @@ export class GoogleMapDemo {
   center = {lat: 24, lng: 12};
   mapAdvancedMarkerPosition = {lat: 24, lng: 16};
   markerOptions = {draggable: false};
-  markerPositions: google.maps.LatLngLiteral[] = [];
+  markerPositions: google.maps.LatLngLiteral[] = [this.center];
+  markerPositionsOld: google.maps.LatLngLiteral[] = [];
+  advancedMarkerPositions: google.maps.LatLngLiteral[] = [this.mapAdvancedMarkerPosition];
+  advancedMarkerPositionsOld: google.maps.LatLngLiteral[] = [];
+
+  hidden: boolean = false;
+
   zoom = 4;
   display?: google.maps.LatLngLiteral;
   isPolylineDisplayed = false;
@@ -101,6 +107,11 @@ export class GoogleMapDemo {
     strokeOpacity: 0.8,
   };
 
+  createOptions: google.maps.MapOptions = {
+    gestureHandling: 'greedy',
+    mapId: '* YOUR MAP ID *',
+  };
+
   heatmapData = this._getHeatmapData(5, 1);
   heatmapOptions = {radius: 50};
   isHeatmapDisplayed = false;
@@ -319,4 +330,18 @@ export class GoogleMapDemo {
       document.body.appendChild(script);
     });
   }
+
+  toggleHideMarkers() {
+    if (this.hidden) {
+      this.advancedMarkerPositions = this.advancedMarkerPositionsOld;
+      this.markerPositions = this.markerPositionsOld;
+      this.hidden = false;
+    } else {
+      this.advancedMarkerPositionsOld = this.advancedMarkerPositions;
+      this.advancedMarkerPositions = [];
+      this.markerPositionsOld = this.markerPositions;
+      this.markerPositions = [];
+      this.hidden = true;
+    }
+  }
 }