Azure Maps - Map is not opening at the correct size

Question

I have a page with azure maps, and most of the time it loads normally and the map covers the entire screen. But at some points when refreshing the page, the map is limited to a small size, and if I just refresh the screen or even open the browser console, the size is updated correctly.

<body>
    <div id="mapDiv"></div>
</body>

I even created an event in an attempt to make a resize

map.events.add('ready', function () {
        setTimeout(function () {
            map.map.resize();
        }, 1000);
    });

Error enter image description here

when i refresh or open da console enter image description here

score 0 · Answer 1 · answered Dec 23 '20 at 05:43

If it is meant to be full screen, make sure to set the width/height to 100% for not only the map, but the html and body tags as well. When you don't specify any styles for the map div, it inherits from it's parents. Try adding this CSS to your page:

html, body, #mapDiv {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

Azure Maps - Map is not opening at the correct size

1 Answers1