angularng-bootstrapangular-google-mapsagm

agm-map on a non-active ngb-tab using fitbounds with GeoJson


I'm trying to get an agm-map to show on a second tab of an ngb-tabset, and to fitbounds around the geojson that gets loaded.

Here is a stackblitz with the map on the first tab - it works fine, apart from maybe the first load, when 'google is undefined'. (I would normally load the geojson data from an API based on user input, so the google maps script would have loaded by then.) https://stackblitz.com/edit/angular-8-app-example-6ynh9n

If you uncomment the other (first) ngb-tab in the html, then it all goes to pot: now the ViewChild (this.agmMap) is undefined in ngAfterViewInit. If you can get around that (by using something like (tabChange)="tabChanged($event)", then when you click away from the map tab, then back to it, the map doesn't fitbounds to the geojson as the map has been destroyed and recreated; agmMap doesn't get re-initialised either (mapReady).

(I also can't get the agmMap's fitbounds to work, so I'm using the GoogleMap's fitbounds directly.)


Solution

  • Correct, this is a known issue. The workaround is to lazy load the tab.