Angular рендеринг модуля Google Maps на локальном, но не на производстве

Question

У меня есть небольшое приложение, использующее официальный Angular модуль Google Maps. В моем окружении он творит чудеса, но на производстве он просто отображает серое окно. Проверка кода, карты, маркера и информационного окна есть, но ничего не отображается.

В процессе производства я не получаю ошибок при загрузке, но при попытке увеличить карту отображается следующее:

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'zoom' of null
at ev (map.js:4)
at HTMLDivElement.<anonymous> (map.js:3)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:167)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
at invokeTask (zone-evergreen.js:1621)
at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1647)

Вот мой код:

import { MapInfoWindow  } from '@angular/google-maps'

export class ExhibitorDetailsComponent implements OnInit, AfterViewInit {


  // Map stuffs

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  openInfo(marker: MapMarker, content) {
    this.infoWindow.open(marker)
  }

  zoom = 14
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'roadmap',
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    maxZoom: 15,
    minZoom: 8,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    rotateControl: true,
    fullscreenControl: true,

  }

  markers = [{
    position: {
      lat: 52.5504827,
      lng: 13.4015135,
    },
    title: 'Marker title ',
    clickable: true,
    options: {  },
  }]

  lat = this.markers[0].position.lat;
  lng = this.markers[0].position.lng;



  // Open marker info window on load

  @ViewChild('markerElem') markerElem;

  ngAfterViewInit() { 

    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        lat: 52.5504827,
        lng: 13.4015135,
      }
    })

    this.openInfo(this.markerElem, "");

  }


  // On Init

  ngOnInit(): void {

    this.route.paramMap.subscribe(params => {
      let item = params.get('exhibitorId')
      console.log(item);
      this.exhibitor = exhibitors.find(x => x.doc.slug === item);
      console.log(this.exhibitor);
    });
  }


}

А впереди:

<google-map height="100%" width="100%" [zoom]="zoom" [center]="center" [options]="options">
      <map-info-window>{{exhibitor.doc.galleryname}} <br><a href="https://www.google.com/maps/dir//'+{{lat}},{{lng}}'/@52.5504827,13.4015135,13z/" target="_blank">Get direction</a></map-info-window>
      <map-marker class="marrrker" id="markerclick" #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, '')">
      </map-marker>
    </google-map>

Что я пытался сделать до сих пор:

• Все упомянутое здесь . Включая:
• Понижение до 9.1.3
• Инициализация с определенным mapTypeId
• Отсутствие карты в скрытом контейнере
• Полное изменение контейнера и CSS

Есть какие-нибудь указатели на эту загадку?

РЕДАКТИРОВАТЬ: Попытка ответа от принца

Вот как это выглядит сейчас. Все та же проблема!

import { Component, OnInit, Input, ViewChild, AfterViewInit,ElementRef, Renderer2   } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { GoogleMapsModule } from '@angular/google-maps'
import { MapMarker  } from '@angular/google-maps'
import { MapInfoWindow  } from '@angular/google-maps'


@Component({
  selector: 'app-exhibitor-details',
  templateUrl: './exhibitor-details.component.html',
  styleUrls: ['./exhibitor-details.component.scss']
})

export class ExhibitorDetailsComponent implements OnInit, AfterViewInit {


  // Map stuffs

  @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow

  openInfo(marker: MapMarker, content) {
    this.infoWindow.open(marker)
  }

  'zoom' = 14
  'mapTypeId': google.maps.MapTypeId;
  'center': {
    'lat': 52.5504827,
    'lng': 13.4015135
  }
  'options': google.maps.MapOptions = {
    'zoomControl': true,
    'scrollwheel': true,
    'disableDoubleClickZoom': false,
    'maxZoom': 15,
    'minZoom': 8,
    'mapTypeControl': false,
    'scaleControl': false,
    'streetViewControl': false,
    'rotateControl': false,
    'fullscreenControl': false,


  }

  'markers' = [{
    'position': {
      'lat': 52.5504827,
      'lng': 13.4015135,
    },
    'title': 'Marker title ',
    'clickable': true,
    'options': {  },
  }]

  'lat' = this.markers[0].position.lat;
  'lng' = this.markers[0].position.lng;


  // Open marker info window on load

  @ViewChild('markerElem') markerElem;



  ngAfterViewInit() { 

    setTimeout(() => {
       this.mapTypeId = google.maps.MapTypeId.ROADMAP;
     }, 3000);


    setTimeout(() => {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          'lat': 52.5504827,
          'lng': 13.4015135,
        }
      })
     }, 3000);

    this.openInfo(this.markerElem, "");

  }



  // On Init

  ngOnInit(): void {

    navigator.geolocation.getCurrentPosition(position => {
      this.center = {
        'lat': 52.5504827,
        'lng': 13.4015135,
      }
    })


  }


}

Answer 1

Существует проблема с частью кода, где есть установленное время ожидания!

this.openInfo(this.markerElem, "") будет выполняться задолго до того, как код внутри обоих ваших setTimeouts!

вместо ngAfter ngAfterViewInit, попробуйте это:

isMapInitiated = false;
 ...
ngAfterViewChecked() { 
 if( !this.isMapInitiated ) {
    setTimeout(() => {
       this.mapTypeId = google.maps.MapTypeId.ROADMAP;
       navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          'lat': 52.5504827,
          'lng': 13.4015135,
        }
     this.openInfo(this.markerElem, "");
     this.isMapInitiated = true;
     }, 3000);
  }

}

3000 зависит от того, с какого уровня начисляются необходимые файлы Google JS! Если он заряжался до запуска компонента, вы можете установить его на 0.

Answer 2

У меня были похожие проблемы долго go. Не могу вспомнить точно. Вы пробовали устанавливать ширину и высоту в пикселях, а не в процентах. Или добавьте max-width и max-height в пикселях.