ngAfterViewInit()

in src/app/map/map.component.ts [134:157]


  ngAfterViewInit() {
    Promise.all([pendingMap, this.pendingStyles])
      .then(([_, mapStyles]) => {
        // Initialize Maps API outside of the Angular zone. Maps API binds event listeners,
        // and we do NOT want Angular to trigger change detection on these events. Ensuring
        // that Maps API interaction doesn't trigger change detection improves performance.
        // See: https://blog.angularindepth.com/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb
        this._ngZone.runOutsideAngular(() => {
          this.map = new google.maps.Map(this.mapEl.nativeElement, {
            center: { lat: INITIAL_VIEW_STATE.latitude, lng: INITIAL_VIEW_STATE.longitude },
            zoom: INITIAL_VIEW_STATE.zoom,
            tilt: 0
          });
          this.map.setOptions({ styles: mapStyles });
          this.infoWindow = new google.maps.InfoWindow({ content: '' });
          this.map.data.addListener('click', (e) => {
            this.showInfoWindow(e.feature, e.latLng);
          });
          this._deckLayer = new GoogleMapsOverlay({ layers: [] });
          this._deckLayer.setMap(this.map);
          this.map.addListener('click', (e) => this._onClick(e));
        });
      });
  }