Клуб API Карт

проблема с картами внутри невидимых div

Пост в архиве.
GoogleBoom
6 октября 2010, 13:56

в поддержку вопроса о проблеме jquery+thickbox

это, похоже, не проблема самого tickbox, потому что аналогичная проблема с colorbox и просто с картой внутри невидимого изначально div-a. Я еще более упростил ситуацию: есть скрытый блок, который надо показать на клик куда нибудь. так вот при его открытии вместо карты - серое поле, есть только логотип.

если изначально блок видимый (#map_contaner.style.display=block), то карта грузится. похоже что она просто не подгружается, если родительский блок невидим. map.update() пробовал - не помогает.

<html>

    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=..."
 type="text/javascript"></script>

<script type="text/javascript">

var map;

window.onload = function () {

map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(60.70331, 56.753781), 16);

}

</script>

<body>

<div
style="display:none;position:absolute;top:100px;left:100px;"
id="map_container"><div id="YMapsID"
style="width:600px;height:400px"></div></div>

<a href="#" onclick="document.getElementById('map_container').style.display = 'block'">Тынц</a>
</body>

</html>

 
5 комментариев
Это не совсем то, о чем я писал. Обратите внимание на код - карта лежит ВНУТРИ невидимого дива, а сама она видна. То есть их тут два.

причина - мне не надо показывать карту в том месте, где она лежит. Вместо нее показывается копия (видимо так, я пока не хотел бы разбираться с кодом colorbox). А если я самому DIV-у с картой установлю свойство display, то она мне тут же и нарисуется. А мне надо, чтобы карта показывалась "во всплывающем окне/div-е", что собственно и делает colorbox.

Ситуацию видно и по моему приложенному примеру. Я попробовал сделать загрузку-по-необходимости, ничего не изменилось, квадрат так же серый.
Сам себе отвечаю (ну и всем заинтересованным). Почитав тему про неправильный масштаб при выводе ряда точек, натолкнулся на мысль про таймаут.
Предположил что карта рисуется рано, а когда родительский контрол невидим - возможно он не получает какие то события (тут разработчикам бы посмотреть, что внутри API происходит) и карта не рисуется.

Вылечил следующим образом: повесил на событие окончания загрузки colorbox-a обновление карты.

$(document).bind('cbox_complete', function() { map.redraw(); })

Спасибо большое, что вы написали решение своей проблемы. Столкнулся с тем же самым: яндекс.карты, colorbox, серый прямоугольник :(

Еще раз спасибо!

Спасибо огромное! Мне Вы тоже сэкономили несколько минут чтения мануалов :)