Клуб API Карт

Странное поведение карт

powerdigital
2 января 2012, 17:18

Доброго времени суток всем жителям клуба! Рад к Вам присоединиться!

 

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

Но интересен сам факт, что карта нормально загружается, если просто нажать на "Анализировать код элемента" и до следующей перезагрузки корректно работает. Для наглядности прикладываю видео:

 

Вобпрос больше на любопытство, так как не могу увязать эти 2 факта))

У кого какие мысли?

 

upd: первоначальное предположение насчет стилей оказалось неверно, исправление стилей ничего не дало.

Но нашел другую причину - скрытые табы, в которых я пытаюсь загрузить карту.

Но вот тут столкнулся с проблемой, пытался сделать по этой инструкции

http://api.yandex.ru/maps/articles/tasks/map.xml#how-to-load-map-in-hidden-div

но потратив пол дня ничего так и не добился...

подозреваю что проблема с событием window.onLoad, но не совсем понимаю куда его нужно поставить

 вот код скрипта, который я использую, специально попробовал все максимально привести к виду кода в примере:

<script type="text/javascript">
   
   YMaps.jQuery(function () {
var container = YMaps.jQuery("#YMapsID-163"),
        map = new YMaps.Map(container[0]
map.setCenter(new YMaps.GeoPoint(34.090245,44.962084), 11, YMaps.MapType.MAP);
   
//YMaps.jQuery(window).load(function () {
//   var map = new YMaps.Map(YMaps.jQuery("#YMapsID-163")[0]
//   map.setCenter(new YMaps.GeoPoint(34.090245,44.962084), 11, YMaps.MapType.MAP);
YMaps.jQuery("#change-map-visibility").bind('click', function () {
container.css('display', (container.css('display') == 'none') ? '' : 'none');
map.redraw( // Перерисовывает карту
return false;
}
        map.addControl(new YMaps.Zoom()
        map.addControl(new YMaps.ToolBar()
        YMaps.MapType.PMAP.getName = function () { return "Народная"; };
map.addControl(new YMaps.TypeControl([
            YMaps.MapType.MAP,
            YMaps.MapType.SATELLITE,
            YMaps.MapType.HYBRID,
            YMaps.MapType.PMAP
        ], [0, 1, 2, 3])
        
        function createObject (type, point, style, description) {
            var allowObjects = ["Placemark", "Polyline", "Polygon"],
                index = YMaps.jQuery.inArray( type, allowObjects),
                constructor = allowObjects[(index == -1) ? 0 : index];
                description = description || "";
            
            var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}
            object.description = description;
            
            return object;
        }
    }
</script>

 где здесь нужно ставить window.onLoad? Если делаю по аналогии с оригиналом (тут же в коде под комментариями), то карта вообще неотображается.

<ul>
<li><a href=\"#tabs-1\">Фото объекта</a></li>
<li><a href=\"#tabs-2\" id=\"change-map-visibility\">Объект на карте</a></li>
</ul>

 понимаю что тема уже не раз подниммалась, но перепробовал все найденные варианты, а решить проблему не удалось, поэтому буду благодарен за подсказки.

4 комментария
Подписаться на комментарии к посту

если у вас карта открывается в скрытом табе

то после того как этот таб и карта станет видимым

надо вызвать у карты метод map.redraw()

забыл отписаться, решение уже найдено.

но все равно спрасибо за подсказку:-)

 

Неплохо было бы описать решение, столкнулся с похожей проблемой, только фаербаг в моем случае не помогает, зато карта нормально отображается в хроме. В фаербаге видно что при движении карты подгружаются новые тайлы, но карта пуста, я в печали

"Починил", проблема оказалась в twitter bootstrap который я использовал, а именно в свойстве img{max-width:100%}, прописал для дива с картой max-width: none; - проблема ушла. Надеюсь кому-нибудь пригодится