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

Пост в архиве.

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, но не совсем понимаю куда его нужно поставить

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

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 комментария

Авторизуйтесь, чтобы оставить комментарий

dimik

28 января 2016, 05:25

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

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

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

powerdigital

28 января 2016, 05:25

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

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

kolebaeff

28 января 2016, 05:25

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

kolebaeff

28 января 2016, 05:25

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