mojwp.ru
Назад

Как сделать карту Яндекс на сайте адаптивной

Вопрос: Как сделать карту Яндекс на сайте адаптивной, чтобы она хорошо смотрелась на мобильном телефоне, планшете и на компьютере?

Ответ: Чтобы сделать подобное, необходимо будет "взять" карту Яндекс в дополнительный контейнер div и задать ему максимальную ширину. Это нужно, чтобы она нормально смотрелась на компьютере.

А в самом скрипте карты мы заменим фиксированный параметр ширины на 100%.

Т.е. выглядеть ваш блок с картой будет так:

Обратите внимание:

  • max-width:600px; я выставляю максимальную ширину блока с картой. Вы ставите свой значение.
  • Уже в самом скрипте карты я заменил фикс. ширину на width=100%, чтобы она подстраивалась под размер экрана устройств.

Это самое простое решение и не требует подключения других скриптов, для адаптации карты.

Черкани пару строк
  • Kanmariks
    Опубликовано: 23.12.2015 Ответить на сообщение

    «Все клики одним цветом» — аналогично монохромной карте, но клики отображаются не областями, а точками.

  • Артур
    Опубликовано: 13.05.2018 Ответить на сообщение

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

  • Гость
    Опубликовано: 01.01.2019 Ответить на сообщение

    Большое спасибо! Очень помог!

  • Сергей
    Опубликовано: 26.01.2019 Ответить на сообщение

    Молодец! Реально выручил. Спасибо огромное

  • Елена
    Опубликовано: 18.08.2020 Ответить на сообщение

    Спасибо огромное! Все сразу получилось!

  • Peter
    Опубликовано: 20.01.2021 Ответить на сообщение

    Блин, спасибо большое, очень помог!

  • Богдан
    Опубликовано: 26.10.2021 Ответить на сообщение

    Шёл 2021й...
    Спасибо)

  • Валера
    Опубликовано: 06.12.2021 Ответить на сообщение

    Всё гениальное просто !) Спасибо Большое !!!

  • Влад
    Опубликовано: 30.06.2023 Ответить на сообщение

    Шёл 2023й...
    Спасибо)

  • Илья
    Опубликовано: 30.06.2023 Ответить на сообщение

    Шёл 2024й...
    Спасибо)

  • Роман
    Опубликовано: 28.09.2023 Ответить на сообщение

    Не получилось, карта размещается лишь в виде прямоугольной области по левой границе страницы при том, что в настройках ряда выставлено "во всю ширину + контент (без полей)"

  • Роман
    Опубликовано: 28.09.2023 Ответить на сообщение

    Update: Получилось! После того, как изменил в скрипте максимальную ширину с 600 на 2048

  • Неккерманн
    Опубликовано: 16.12.2023 Ответить на сообщение

    Не работает. А если поставить width=100%, а height=77% ( это соотношение сторон контейнера 600х400), тогда работает.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.