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));
});
});
}