Встроенная карта (iframe) не центрируется при отображении

Question

Я создаю веб-страницу с несколькими вкладками / таблетками, которые показывают таблицы и карты, относящиеся к точкам в базе данных. Одна из этих вкладок - карта местоположения iframe. По умолчанию эта вкладка скрыта (отображение не установлено). Когда пользователь нажимает на вкладку, карта должна отображаться.

Проблема в том, что при нажатии на вкладку карта смещается от центра. Я думаю, это потому, что когда страница загружается, она загружает элемент карты с определенным размером. При щелчке по вкладке она изменяет размер фрейма, чтобы заполнить страницу без панорамирования карты.

Как мне сделать так, чтобы при нажатии на вкладку загрузка была центрирована?

Вот рисунок, показывающий проблему: https://imgur.com/FFIEWcf

Вот фрагмент кода.

<div id="Location" class="occTabcontent">
<style>
                .embed-container {
                    position: relative;
                    width:900px;
                    height:450px;
                }

                .embed-container iframe, .embed-container object, .embed-container iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 900px;
                        height: 450px;
                    }

                small {
                    position: absolute;
                    z-index: 40;
                    bottom: 0;
                    margin-bottom: -15px;
                }
            </style>
            <div class="embed-container" style="border: 1px solid #d4c7cf;height:450px">

            <iframe frameborder="0" title="MineralOccurrenceFeeder-Webmap" src="//yukon2.maps.arcgis.com/apps/Embed/index.html?webmap=d5ed3bcdb3be41e2a22364d549b6cc0f&amp;legend=true&amp;basemap_toggle=true&amp;zoom=true&amp;scale=true&amp;disable_scroll=true&amp;theme=light&center=@longDD,@latDD&level=12&amp;marker=@longDD,@latDD"></iframe>
            </div>
            <div class="mapLink"><a href="http://yukon2.maps.arcgis.com/home/webmap/viewer.html?webmap=d5ed3bcdb3be41e2a22364d549b6cc0f&center=@longDD,@latDD&level=14&marker=@longDD,@latDD" target=" _blank">Open map in larger window.</a></div>
        }
        </div>
</div>

<script type="text/javascript">  
        document.getElementById("defaultOpen").click();

        function openTab(evt, tabName) {
            var i, tabcontent, occTab;
            tabcontent = document.getElementsByClassName("occTabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            occTab = document.getElementsByClassName("occTab");
            for (i = 0; i < occTab.length; i++) {
                occTab[i].className = occTab[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        } 
</script>