HERE map doesn't load on page load, it only shows the HERE logo and copyright, but it loads with a function on clicking a button. The below code is slightly adapted from the HERE docs (https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html). I want the map loaded with the page, not after clicking a button. What am I missing?

<div id="map" style="height: 400px; width: 100%;"></div>

$(function() {
    let platform = new H.service.Platform({
        'apikey': api_key
    });

    loadMap ({
        lat: <?php echo round($obj->getLatitude(), 4); ?>,
        lng: <?php echo round($obj->getLongitude(), 4); ?>
    });

    function loadMap (position) {
        let defaultLayers = platform.createDefaultLayers();

        let map = new H.Map(
            document.getElementById('map'),
            defaultLayers.vector.normal.map,
            {
                zoom: 16,
                center: position,
            }
        );
    });
});

[EDIT] I've been struggling for days trying to figure out why the map wouldn't load with the very basic code example. And I accidentally closed the browser Development console and the map appeared all of a sudden! What the?!...

So the problem is the map won't appear on page load until the window is resized. So what can I do to trigger that to make the map to appear?