Как реализовать адаптивную api яндекс карту на сайте?

Question

[Александр К]

Здравствуйте.

У меня появилась задача разместить расположение места на сайте с помощью API Яндекс карты. Я это сделал, но на мобильных устройствах это выглядит ужасно, карта вылезает за рамки дисплея. Как мне сделать, чтоб размер карты адаптировался под мобильные устройства?

Answer 1

[ghost23]

Используйте css

#map {
        width: 640px; height: 600px;
}
@media (max-width: 320px) {
      #map {
        width: 260px; height: 300px;
      }
}

Еще при загрузке можно определить при помощи javascript размер окна и поставить нужные параметры в скрипт яндекс карт.

пример с jquery

var viewport = {
    width : $(window).width(),
    height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;

if (width > 1000) {
var zoomval = 13;
} else {
var zoomval = 12;
}

function init() {
    myMap = new ymaps.Map("map", {
        center: [55.555555, 33.333333],
        zoom: zoomval,
        });
}

Answer 2

[Альберт Рашитов]

Автор вопроса не нашел ответ? Если нашли не могли бы поделиться?

Answer 3

[Александр К]

с яндекс картами не разобрался, нашел решение с google map

Answer 4

[Rager]

Нужно всего лишь в коде, который вы вставляете на сайт, заменить фиксированные width и и height на "auto".