Dynamic Multiple Google Maps

Ionic Framework ionic-v3
1

Hello,

Anyone can help me? I didn’t find a solution in the forum. Maybe it’s helpful for all of us.
I will load multiple departments in multiple ion-cards with inside the google maps of the department.

In my html:

<div *ngFor="let department of departments">
     <ion-card>
          <div style="height: 200px; width: 100%" #mapCanvas id="map{{department.ID}}"></div>
          <ion-item>
               <ion-icon name="pin" item-left large></ion-icon>
               <h2>{{department.name}}</h2>
               <p>{{department.address}}</p>
          </ion-item>
     </ion-card>
</div>

The name and the address works. But I didn’t find who I can get the reference to the google maps div.
When it always exists, I can use @ViewChild('map') mapElement: ElementRef; but now its dynamically

Who can I get the reference to the google maps div in the code to create them and add marker,…

I though by document.getElementById(“map” + [number]). But I think the html page is not loaded when he is at this code because I get the error Cannot read property 'firstChild' of null.

Thanks in advance.

2

I made a workaround for it, but I don’t now if there is already a better solution.
I make use of the angular ngAfterViewChecked.
The problem is that this method is called after every check of a component’s view.
You heard it, we came in a loop…

I solved it simple by a boolean mapsStartLoaded.

If you want to refresh the maps later, you can set the boolean again into false.
Easy, but works for me.

ngAfterViewChecked() {
     var maps = document.getElementsByName("map");
     if (maps.length > 0) {
          if (!this.mapsStartLoaded) {
               this.mapsStartLoaded = true;
               this.loadMaps(maps);
          }
     }
}

loadMaps(maps){
     for (let i = 0; i < maps.length; i++) {
          let mapEle = document.getElementById(maps.item(i).getAttribute("id"));
          ...
     }
}
1 Like
3

@pixello can you share the code of loadMaps() function ?