How to redraw Here Map when container resizes?

Question

I hit a peculiar problem today which I haven't encountered or noticed before. While setting up a map in Here Maps 3.0, I noticed that if the browser window is "small", less than a full-screen one, during loading the map, also the map will stay small even if the browser window will be resized to a full-screen one.

How could I update the Here Maps map size to occupy as much space as allotted?

My arrangement is as follows and I wonder if the reason for this could be the relative divs. The reason I have them is that I'm experimenting with designs that have headers, footers, other text with and without scrolls bars (and it looks like scrolling the map gets a bit jittery if there's a scrollbar present on the page).

<style type="text/css">
    #mapContainer {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background: grey;
    }

    #main {
         position: relative;
         width: 100%;
         height: 100%;
    }

    html, body {
        overflow-y: hidden;
    }    
</style>

<div id="main">
    <div id="mapContainer"></div>
</div>

Answer 1

try this after the map object initialization:

window.addEventListener('resize', function () {
    map.getViewPort().resize(); 
});

That should solve the problem.

Answer 2

The window resize event mentioned by support seems to be the main approach. However, in a templated page the window resize event sometimes occurs too soon and the resize() call then doesn't have the correct sizing yet - at that point you may need to find an 'AfterRender' event for the template library, or failing that set a timeout from the resize event to give the element resizing a chance to finish.