--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/examples/cases/hiddendiv.md --- # Размещение в скрытом контейнере Open in CodeSandbox
ready, Map, map.Container

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

Если в момент инициализации карты контейнер еще не сформирован, размеры карты будут нулевыми (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; }

{% list tabs %} - index.html ```html Примеры. Размещение карты в скрытом контейнере

Во вкладке Карта находится карта Москвы

``` - hiddendiv.js ```js 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(); }); } ``` {% endlist %}