Карта заполняет своим содержимым контейнер, в котором она размещается. В момент инициализации карта должна иметь возможность определить размеры контейнера.
Если в момент инициализации карты контейнер еще не сформирован, размеры карты будут нулевыми (0x0), т. е. она фактически не будет отображена.
Неотображение карты в неактивной вкладке jQuery.UI происходит из-за того, что для скрытия вкладки используется CSS-свойство display: none. Элемент, для которого выставлено display: none, не знает свои реальные размеры. Самое простое решение - в момент переключения вкладки инициировать пересчет размеров карты вызовом команды fitToViewport(). Также можно обойти проблему в примере (используется jQuery.UI), если использовать альтернативный способ скрытия вкладки, переопределив стандартные классы jQuery.UI:
```
- 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 %}