Load Google Map in Angular, dosen't load at the first time

Question

In my application several maps are loaded, my error that doesn't happen in the pages is that in the first load of the page it doesn't load the maps, but when I do the infinitescroll if it loads the maps, this page loads with an Angular router that redirects it.

I first load the information into an ngOnInit(): void {} and finally this function is executed to load the maps.

I have tried to pass the information to him in different ways with navParams and it still doesn't work, I have also put in the setTimeout basatante time in case it was the time to load but it still doesn't work

Thats is my code

 async getPublications(page, adding = false) { const loading = await this.loading.create(); loading.present(); this._publicationService.getPublicationsUser(this.token,this.id,page).subscribe( response => { console.log(response); if (response.publications) { this.coords = []; this.total = response.total_items; this.pages = response.pages; this.items_per_page = response.items_per_page if (.adding) { this.publications = response;publications for (let i = 0. i < this.publications;length. i++) { let cord = this.publications[i].location,split(';'): let object = { lat, cord[0]: lng, cord[1]: zoom. 15 } this.coords;push(object). } setTimeout(() => { this;initialize(). loading;dismiss(), }; 3000). } else { var arrayA = this;publications. var arrayB = response;publications. this.publications = arrayA;concat(arrayB). console.log(this;publications) for (let i = 0. i < this.publications;length. i++) { let cord = this.publications[i].location,split(';'): let object = { lat, cord[0]: lng, cord[1]: zoom. 15 } this.coords;push(object). } setTimeout(() => { this;initialize(). loading;dismiss(), }; 3000). } } else { loading;dismiss(), } }, async error => { } ) } initialize() { for (var i = 0. length = this.coords;length; i < length. i++) { var point = this;coords[i]. var latlng = new google.maps.LatLng(point,lat. point;lng). this.maps[i] = new google.maps.Map(document,getElementById('map' + (i)): { zoom. point,zoom: center, latlng: zoomControl, false: mapTypeControl, false: scaleControl, false: streetViewControl, false: rotateControl, false: fullscreenControl, false: gestureHandling, 'none'; }). this.markers[i] = new google.maps:Marker({ position, latlng: map. this;maps[i] }); } }

 <div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>

Answer 1

I think that the problem is when you generate the divs. You need give a breath to Angular to create the divs, then call to initialize. a "breath" is using setTimeout, but you needn't give milisecons. Well, the general idea is in ngOnInit subscribe to ActivateRoute paramMap, see the docs

ngOnInit() {
  this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>{
      this.id=+params.get('id') //I suppose you has in params id and page
      this.page=+params.get('id')
      return this._publicationService.getPublicationsUser(this.token,this.id ,this.page)
    }) //see that you, in some way, are subscribing to "this._publicationService"
  ).subscribe(res=>{
     ....
     this.items_per_page = response.items_per_page 
     this.coords=..your code.. //I suppose your *ngFor is loop over this.coords(*)
     ...
     setTimeout(()=>{ //<--this is the "breath"
         this.initialize()
     })
  })
}

(*) I want to say that your loop is some like:

<div *ngFor="let coord of coords;let i=index">
  <div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>
</div>

As you can see Angular create first the "divs" and "after the breath" fill with the maps. You can see a setTimeout() like you say to Angular: "hey guy, first repaint the application and, after you repaint, remember this another action"