title: How to use marker clustering in Angular 10+
body: <p>The following code is inspired from this official documentation and works pretty well in my Angular 10 app:
  <a href="https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=en" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=en</a></p>
  <pre class="lang-ts prettyprint-override"><code>import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core'
  import { Coordinates } from '@shared/models/coordinates.model';
  import MarkerClusterer from '@googlemaps/markerclustererplus'
  
  @Component({
    selector: 'store-map',
    template: `&lt;div id=&quot;map&quot; style=&quot;height: 500px&quot;&gt;&lt;/div&gt;`,
    styleUrls: ['./store-map.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class StoreMapComponent implements AfterViewInit {
  
    @ViewChild('map', {static: false}) info: ElementRef;
  
    ngAfterViewInit() {
      const locations = [
        { lat: -31.56391, lng: 147.154312 },
        { lat: -33.718234, lng: 150.363181 },
        { lat: -33.727111, lng: 150.371124 },
        { lat: -33.848588, lng: 151.209834 },
        { lat: -33.851702, lng: 151.216968 },
        { lat: -34.671264, lng: 150.863657 },
        { lat: -35.304724, lng: 148.662905 },
        { lat: -36.817685, lng: 175.699196 },
        { lat: -36.828611, lng: 175.790222 },
        { lat: -37.75, lng: 145.116667 },
        { lat: -37.759859, lng: 145.128708 },
        { lat: -37.765015, lng: 145.133858 },
        { lat: -37.770104, lng: 145.143299 },
        { lat: -37.7737, lng: 145.145187 },
        { lat: -37.774785, lng: 145.137978 },
        { lat: -37.819616, lng: 144.968119 },
        { lat: -38.330766, lng: 144.695692 },
        { lat: -39.927193, lng: 175.053218 },
        { lat: -41.330162, lng: 174.865694 },
        { lat: -42.734358, lng: 147.439506 },
        { lat: -42.734358, lng: 147.501315 },
        { lat: -42.735258, lng: 147.438 },
        { lat: -43.999792, lng: 170.463352 },
      ];
      const map = new google.maps.Map(document.getElementById(&quot;map&quot;) as HTMLElement, {
          zoom: 3,
          center: { lat: -28.024, lng: 140.887 },
        }
      )
  
      const labels = &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;;
      
      const markers = locations.map((location, i) =&gt; {
        return new google.maps.Marker({
          position: location,
          label: labels[i % labels.length],
        });
      });
  
      new MarkerClusterer(map, markers, {
        imagePath:
          &quot;https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m&quot;,
      });
  
    }
  }
  </code></pre>
  <p>Marker clustering is working well here. Unfortunately, it's not really an &quot;Angular-way&quot; to achieve what I want. What I want is to use the &quot;new&quot; native Google Maps component from Angular. So here is what I did (without marker clustering):</p>
  <p>Component:</p>
  <pre class="lang-ts prettyprint-override"><code>@Component({
    selector: 'store-map',
    templateUrl: './store-map.component.html',
    styleUrls: ['./store-map.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class StoreMapComponent {
  
    @Input()
    coordinates: Coordinates
  
    @Input()
    zoom: number
  
    @Input()
    set stores(value: Store[]) {
      // Allow time for the map to load before showing markers
      if (this.isFirstLoad &amp;&amp; value.length &gt; 0) {
        this.isFirstLoad = false
        setTimeout(() =&gt; {
          this._stores = value
          this.changeDetector.markForCheck() // Needed because of setTimeout()
        }, 1000)
      } else {
        this._stores = value
      }
  
    }
  
    private isFirstLoad = true
  
    _stores: Store[] = []
    markerOptions: google.maps.MarkerOptions = {
      animation: Animation.DROP,
      icon: {
        url: '/assets/img/yarn.png',
        size: new google.maps.Size(32, 32)
      }
    }
  
    constructor(private changeDetector: ChangeDetectorRef) { }
  
    getStoreLatLngLiteral(store: Store): google.maps.LatLngLiteral {
      return this.mapCoordinatesToLatLngLiteral({
        latitude: store.lat,
        longitude: store.lng
      })
    }
  
    mapCoordinatesToLatLngLiteral(coordinates: Coordinates): google.maps.LatLngLiteral {
      return {
        lat: coordinates.latitude,
        lng: coordinates.longitude
      }
    }
  </code></pre>
  <p>Template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;google-map [center]=&quot;mapCoordinatesToLatLngLiteral(coordinates)&quot; [zoom]=&quot;zoom&quot; width=&quot;auto&quot;&gt;
    &lt;map-marker *ngFor=&quot;let store of _stores&quot; [position]=&quot;getStoreLatLngLiteral(store)&quot;
                [title]=&quot;store.name&quot;
                [options]=&quot;markerOptions&quot;&gt;
    &lt;/map-marker&gt;
  &lt;/google-map&gt;
  </code></pre>
  <p>The problem is that at this point, I don't know how to setup marker clustering in an &quot;Angular-way&quot;.</p>