Angular-google-maps: Map getting zoomed out completely when using angular material's Tabs even though fitBounds value is correct

[blackblood19]

Issue description
When using angular material's Tabs, if the map is present in 2nd tab or later, when we go that tab for the first time, we see that the map is completely zoomed out. I am using [fitBounds]="bounds" and "bounds" is LatLngBounds type. This issue is not there if the same map is present in 1st tab.

Steps to reproduce and a minimal demo of the problem
Use angular material's Tabs and create a map in 2nd tab or later. Use [fitBounds] and set some bounds. When you go that tab, you see that the map is completely zoomed out.

Current behavior
Map is getting completely zoomed out the first time we visit that map in 2nd tab, or later. This is not the case if the map is in 1st tab.

Expected/desired behavior
Map should obey bounds even if the map is present in 2nd tab or later.

Observations
I listened to maps 'bounds_changed' event and printed maps.getBounds(). When I open the website (by default, 1st tab will be in viewport), correct bounds got printed for the map which is in 2nd tab. Now, I clicked on 2nd tab, bounds got changed and now the bounds have values (-88 long to -111 long) which represents that the map is completely zoomed out. I am assuming some event is getting triggered when we visit a tab, and agm is listening to that event to change bounds incorrectly.

[BSnivelyGarner]

I have run into the same issue and have been able to reproduce @blackblood19's issue. I am using the following:

• agm/core: 1.0.0-beta.5
• angular/core: 6.1.2,
• angular/material: 6.4.5,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lucasvanhalst]

Was wondering why it wouldn't work, then found this issue. You can bypass the issue by lazy loading the tab content:

<mat-tab-group>
  <mat-tab>
    <ng-template matTabContent>
      <agm-map [fitBounds]="..."></agm-map>
    </ng-template>
  </mat-tab>
</mat-tab-group>

[avingochea]

I'm having the same issue. Did you ever find a fix?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ghost]

LazyLoading is definitely a viable workaround. I have to really think about how to fix it, if at all.

Edit: I also just now figured out that the issue is only there when using fitBounds

[ghost]

Update: MatTab component library is a bowl of spaghetti. I am still trying to work through it.

And another update. I figured out the issue. MatTabs create the DOM for unselected tags, but don't attach it. Since it's not attached, it's pixel dimensions are 0. Google's FitBounds method uses the size of the map to determine the zoom, the smaller the map, the wider the zoom. When the map is height 0, the zoom is set to 0.

[ghost]

Unfortunately, there doesn't seem to be a way to register an event on getting dom attached or receiving a true size. That means that the only way to fix this, would be to make fitBounds emit a bound on every sampleTime ms, even if there were no changes. This addition would be a moderate performance drag for ALL fitbounds users, to fix a rare case. Being that there is a viable workaround, I think it's best to just recommend using matTabContent template for these cases.

Closing this issue with a heavy heart. If anyone can think of a better solution, comment here.