在ionic 3的单个页面中动态加载多个地图

Question

我使用了id元素的静态div来加载Google地图。

但是在某些情况下，我必须加载多个地图以根据后端服务的纬度和经度响应在accordion list中显示路线图。

因此，我动态生成了id，如下所示。但是当我尝试访问div时，document.getElementById(mapId)为空。

HTML：

  <ion-slide padding>
    <div *ngFor="let md of mapDetails; let mi= index;" [ngClass]="{active: 
    isGroupShownMap('mi')}">
    <div *ngIf="md.showMap"> 
      <ion-item (click)="toggleGroupMap(mi,'map'+mi)">
    <ion-icon color="success" item-right [name]="isGroupShownMap('mi')? 
  'ios-arrow-down-outline' : 'ios-arrow-up-outline'"></ion-icon>
     </ion-item>
     <ion-card class="map-list">
            <div id="'map'+mi"></div>
     </ion-card>
        </div>  
    </div>
    </ion-slide>

Javascript：

 toggleGroupMap(group,mapId) {
   this.showmap(mapId,group);
  }

  showmap(mapId,index){
   //calling the web serive
    //loading the map
   //dynamicaly loading the map
   var map = new google.maps.Map(document.getElementById(mapId), {
   mapTypeId: google.maps.MapTypeId.ROADMAP
    });
 this.populateMapArray(map);
}