文档不适用于地图显示

Question

我正在尝试使用传统文档在我的离子应用程序中显示google map，但是它不起作用。如果我使用viewChild的平均值，则效果很好。您能告诉我代码中有什么问题吗？

代码是：

app.ts

import { Component, ViewChild, NgZone } from '@angular/core';

...

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common';

...

@ViewChild('map') mapElement;
constructor(@Inject(DOCUMENT) private document: Document){}

...

initMap(lat, long){
  let latLng = new google.maps.LatLng(lat, long);
  let mapOptions = {
    center: latLng,
    zoom:0,
    scrollwheel: true,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
   };
   this.map = new google.maps.Map(this.document.getElementById("map"), mapOptions);
   /* it works well if use mapElement */
   // this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

} 

/* here is some code triggering initMap()*/

ap.html

<ion-item *ngIf="select == 'map'>
    <ion-card  class="transparent-card" *ngFor="let subtrip of trips" >
      <div #map id="map" style="height:250px;"></div>
    </ion-card>
</ion-item>