Map inside a tab-pane does not load properly

[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.