Как скрыть все управляющие элементы с Яндекс карты?

Изредка хочется оставить карту по дизайну - без ничего. Как это сделать - рассказываю в статье

Зачем?

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

Вот как раз в этой статье я хочу показать, как это сделать. Давайте разбираться!

JS-код

На самом деле все очень просто, если заглянуть в доку и проявить смекалку. Начнем с JS

ymaps.ready(init);

function init() {
  var map = new ymaps.Map("map", {
    center: [55.60804306913301,37.615973499999946], // ваши данные
    zoom: 15
  });

  map.controls.remove('geolocationControl'); // удаляем геолокацию
  map.controls.remove('searchControl'); // удаляем поиск
  map.controls.remove('trafficControl'); // удаляем контроль трафика
  map.controls.remove('typeSelector'); // удаляем тип
  map.controls.remove('fullscreenControl'); // удаляем кнопку перехода в полноэкранный режим
  map.controls.remove('zoomControl'); // удаляем контрол зуммирования
  map.controls.remove('rulerControl'); // удаляем контрол правил
  map.behaviors.disable(['scrollZoom']); // отключаем скролл карты (опционально)
}

По сути, этот код удалит все, что нам нужно. Однако после него еще остается снизу строчка с тем, что это именно Яндекс карты, со ссылкой на переход в сами карты и т.д. Не нашел, как это убирать через js, поэтому решил написать простой селектор на CSS.

CSS

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

Время от времени, при загрузке сайта, префикс меняется, и нетрудно догадаться, что через какое-то время ваш селектор по классу просто перестанет работать. Однако в CSS есть более умные селекторы, которые могут искать по кусочку css-класса, что нам и нужно, ведь буквенная часть класса неизменна. Пишем код:

[class*="copyrights-pane"] {
  display: none !important;
}

Мы просто находим классы с упоминанием сopyrights-pane и скрываем их. important явно тут необязателен, но я решил добавить на всякий случай.

По большому счету, мы могли бы и другие контролы просто скрыть с помощью стилей, но тогда все равно ресурсы будут тратиться на загрузку этих скрытых элементов. Если уж API карт позволяет их скрыть "правильно" - стоит делать правильно.

Заключение

У меня на этом все, надеюсь вам было полезно) Поскольку новый формат блога просто не поддерживает комментарии (и да, я знаю что есть сторонние сервисы, но не хочу их подключать), если вам что-то непонятно или вы знает решение лучше - пишите через форму обратной связи. Я добавляю их не ко всем постам, а там, где это действительно оправдано.

До скорых встреч!