Размещение в скрытом контейнере

Open in CodeSandbox

Карта заполняет своим содержимым контейнер, в котором она размещается. В момент инициализации карта должна иметь возможность определить размеры контейнера.

Если в момент инициализации карты контейнер еще не сформирован, размеры карты будут нулевыми (0x0), т. е. она фактически не будет отображена.

Неотображение карты в неактивной вкладке jQuery.UI происходит из-за того, что для скрытия вкладки используется CSS-свойство display: none. Элемент, для которого выставлено display: none, не знает свои реальные размеры. Самое простое решение - в момент переключения вкладки инициировать пересчет размеров карты вызовом команды fitToViewport(). Также можно обойти проблему в примере (используется jQuery.UI), если использовать альтернативный способ скрытия вкладки, переопределив стандартные классы jQuery.UI:

.ui-tabs .ui-tabs-hide { position: absolute !important; left: -10000px !important; display: block !important; } 

<!DOCTYPE html>

<html>
    <head>
        <title>Размещение в скрытом контейнере</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>

        <!--
        Основная библиотека JQuery.
        Яндекс предоставляет хостинг JavaScript-библиотек
    -->
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>

        <!-- Библиотека JQuery.UI. Используем для работы со вкладками -->
        <script
            src="https://yandex.st/jquery-ui/1.11.2/jquery-ui.min.js"
            type="text/javascript"
        ></script>

        <!-- CSS JQuery.UI. Используем для отрисовки вкладок -->
        <link
            rel="stylesheet"
            href="https://yandex.st/jquery-ui/1.8.23/themes/humanity/jquery.ui.all.min.css"
            type="text/css"
        />

        <script src="hiddendiv.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="tabs" style="width: 95%">
            <ul>
                <li><a href="#tab-1">Описание</a></li>
                <li><a href="#tab-2">Карта</a></li>
            </ul>
            <div id="tab-1">
                <p>Во вкладке Карта находится карта Москвы</p>
            </div>
            <div
                id="tab-2"
                style="width: 100%; height: 300px; padding: 0;"
            ></div>
        </div>
    </body>
</html>

ymaps.ready(init);

var myMap;

function init() {
    // Инициализация вкладок.
    // После исполнения команды tabs() tab-2 получит style='display:none'.
    // Карта будет инициализирована, но будет иметь нулевой размер.
    // В данном случае это хорошо, так как невидимая карта не будет загружать невидимые тайлы.
    $("#tabs").tabs();
    myMap = new ymaps.Map("tab-2", {
        center: [55.76, 37.64], // Москва
        zoom: 10,
    });

    // В момент показа новой вкладки будем пересчитывать размер карты.
    // Карта примет максимально возможные значения при активации ее таба
    // и нулевые, как только будет выбран первый таб.
    // Подписываемся на событие 'tabsshow' (а не 'tabselect',
    // так как требуется, чтобы элемент с картой уже был виден).
    $("#tabs").bind("tabsshow", function (event, ui) {
        myMap.container.fitToViewport();
    });
}