Динамическая загрузка нескольких карт на одной странице в ionic 3 - PullRequest
Новая
       26

Динамическая загрузка нескольких карт на одной странице в ionic 3

0 голосов
/ 22 октября 2018

Я использовал статический 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);
}
...