Angular Google Maps (AGM) not visible

Question

I'm trying to add a map to my Angular project. Using AGM to achieve that (https://github.com/SebastianM/angular-google-maps). My map is not showing up though...

app.module.ts:

@NgModule(<NgModule>{
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    OrderModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    FormsModule,
    MatTabsModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    NoopAnimationsModule,
    MatPaginatorModule,
    MatSortModule,
    MatButtonModule,
    MatDialogModule,
    MatCardModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    AgmCoreModule.forRoot({
      apiKey: <APIKEY>
    })
  ],

  exports: [FilterPipe],
  providers: [],
  bootstrap: [AppComponent]
})

app.component.html:

<div>
  <agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="zoom" [disableDefaultUI]="false"
           [zoomControl]="false">
    <agm-marker [latitude]="51.678418" [longitude]="7.809007"></agm-marker>
  </agm-map>
</div>

I'm showing this in a mat-tab component (angular material)

Thanks in advance!

Answer 1

You're supposed to give the map a height so in your component styles add this:

agm-map{
    height: 300px
}

Answer 2

This works for me:

In HTML

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [mapTypeId]='mapType' #AgmMap></agm-map>

in TS

ngAfterViewInit(): void {
   setTimeout(() => {
     console.log('Resizing');
     this.agmMap.triggerResize();
   }, 100);
 }

In CSS

agm-map {
  height: 300px !important;
  width: 100%;  /* This is really important*/
}