Карта в модальном окне

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

al-nov

6 сентября 2016, 11:08

Добрый день!

Не получается отобразить карту в модальном окне. В обычном блоке все отображается правильно, а здесь - только "Яндекс-условия использования" на сером фоне... Маршрут рассчитывается корректно, при попытке сдвинуть карту (в данном случае, серый фон) время от времени проскакивают начальная и конечная точки маршрута, но расположены они очень близко, возможно слетатает масштаб. Сам маршрут не видно. Модальное окно вызываю с помощью Bootstrap jQuery.

Пожалуйста подскажите, в чем может быть дело.

6 комментариев

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

dimik

6 сентября 2016, 11:56

После того как контейнер с картой (модальное окно) отобразится (обычно есть специальное событие, на которое можно подписаться), нужно вызвать пересчет размеров карты

https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#fitToViewport

dimik

6 сентября 2016, 12:03

В случае маршрута (если используется опция mapStateAutoApply/boundsAutoApply) или вызывается метод карты setBounds, также необходимо дождаться, чтобы контейнер карты получил ненулевой размер

al-nov

6 сентября 2016, 12:38

Что-то не получается...
Пытаюсь следующим образом:

$('#marshrutbutton').click(function(event){
$("#myModal").modal(); // открываю модальное окно.
YMaps.jQuery(function () {

var map = new YMaps.Map(YMaps.jQuery("#modalcontent")[0]);
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 8);
})
})
$('#myModal').on('shown.bs.modal', function () { //событие открытия окна
map.container.getElement().style.width = '200px';
map.container.getElement().style.height = '200px';
map.container.fitToViewport();
})

Подскажите пожалуйста что делаю не так

dimik

6 сентября 2016, 13:49

al-nov,

У вас какая версия АПИ используется? Вы смешали вызовы 1.х и 2.1 они не совместимы между собой

al-nov

6 сентября 2016, 16:22

Если честно я даже не в курсе. Не с нуля делаю. У меня друпал. Видимо каким то модулем подключается? Судя по тому, что вот это работает:

var map = new YMaps.Map(YMaps.jQuery("#modalcontent")[0]);

map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 8);

а вариант, который описывается с функцией init - нет, у меня используется 1.х Там аналогично делается? И есть ли вообще возможность? Есть смысл переподключать?

dimik

6 сентября 2016, 17:04

al-nov,

1.x нет никакого смысла использовать