Map inside a tab-pane does not load properly

[halindra]

hello,

I have a user dashboard with multiple tabs using wappler’s default Tabs with Nav. In one of the tab-pane-component is a map (using mapbox).

The issue is, if that tab-pane is not set as the initial active tab (check show and active), it does not load properly (only load partially) like this:

otherwise, it works completely fine and fills the entire card. What might be the issue here?

[Dave]

You may have to re-initialise the map upon a click event if I remember correctly?

This thread on Stack may help:

Initialize Google map on AJAX refreshed partial

Or just search for re-initialise Google Map…

[halindra]

thanks for the help Dave!

I think that is similar to Teodor's solution (that I just found) and I managed to get it done by following it:

Masonry not initializing when inside a tab pane

Component like masonry, google maps, swiper and others that rely on the height of the element they are placed into will always have issues with tabs, modals, collapses, initially hidden elements. On page load these elements have a height of 0 as they have a style of display: none; applied. In your case, your tab 2 is hidden on page load and masonry component doesn’t know what its height is. You need to “refresh” the masonry component on tab show. Example code, that will do the job: <script> …

but I had to remove dmx.parse and change it to resize() instead of reflow() because it doesn't work for some reason.

[Teodor]

The solution you mention is for the masonry component, not for Google Maps.
For google maps you can use the tab shown dynamic event and use the available refresh option: