JavaScript HERE map not showing on Bootstrap Tabs until window resized

Question

I'm trying to show a HERE map on Bootstrap tabs with this simple example: https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html

The problem is the map won't appear on page load until the window is resized. As soon as I change the window size the map appears right away. Or if I move th emap outside of the tabs it works fine. I’ve already tried forcing window and document event triggering - doesn’t help. Tried delay - nothing.

What else can I do to show the map on the tab on page load?

Answer 1

I’ve finally got it! I thought I needed to load the map on either window or document load, that may be true without tabs, but with tabs it’s about the tab shown.bs.tab event:

$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    if (lat > 0 && lng > 0) {
        loadMap({ lat: lat, lng: lng });
    }
});