Как использовать Яндекс Карту в качестве фона?

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

 

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

 

Теперь начинаем, выбираем место для данного блока. Вообще позиция совсем не важна, хоть сверху, хоть снизу, где угодно. Я же встрою его по середине, между двумя другими блоками.

Использование Яндекс Карты в качестве фона (скриншот 1)

Далее добавляем следующую html разметку:

Сперва мы создаем общий блок — контейнер с классом contacts. В нем будет карта и дополнительное описание. Внутри создается блок с id со значением map. Обратите внимание, что все классы указанные в этом примеры можно изменять на свои, но id со значением map должно быть именно таким, так как это прописано в скриптах Яндекс Карт.

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

 

Перейдем к стилям этой конструкции:

Для контейнера (.contacts) мы задаем ширину, которая равняется 100 процентам, а также высоту 450 пикселей.

Для селектора #map устанавливается абсолютное позиционирование. То есть он располагается независимо от других блоков, по сути другие блоки его вообще не видят. Также для карты задается полная ширина и та же высота в пикселях.

Для блока наложения (.overlap) указываем ширину в 80 процентов, чтобы блок с информацией имел некоторые отступы по краям, а не был прижал к границе браузера. С помощью margin выравниваем блок по центру. Затем мы используем замечательные свойства flexbox, для настройки расположения дочернего элемента. Задаем блоку свойство flex и указываем, что внутренний блок будет по-горизонтали находится справа в конце (flex-end).

Для блока с информацией (.info) задаем ширину в 330 пикселей, добавляем отступ сверху в 50 пикселей, внутренние отступы в 25 пикселей, заливка будет белая с непрозрачностью в 80 процентов и небольшая тень с серым оттенком. Также нужно указать положение по оси Z (z-index) выше, чем у карты. Карта имеет нулевой индекс, соответственно для информационного блока идет единица.

 

Идем дальше. Теперь в html файле перед тегом </body> вставляем ссылку на API Яндекс Карт и ссылку на скрипт, который нужно самостоятельно создать.

Часто эти скрипты подключают между тегами <head> и </head>. Но, это снижает скорость загрузки сайта, что негативно влияет на поисковую оптимизацию. Поэтому лучше в самом низу!

 

Остается настроить карту. Открываем созданный скрипт и вставляем следующий код:

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

Использование Яндекс Карты в качестве фона (скриншот 2)

Параметр zoom устанавливает уровень приближения карты. Для комфортного просмотра города оптимальным значением является промежуток от 10 до 16.

Параметр controls устанавливает элементы управления картой. Сейчас здесь указан только fullscreenControl, добавляющий кнопку, разворачивающую карту на весь экран. Но кроме этого здесь может быть: default (полный набор стандартных кнопок), smallMapDefaultSet (полный набор маленьких кнопок), geolocationControl (кнопка для получения своего местоположения), searchControl (строка поиска адресов), typeSelector (кнопка для переключения режимов карты), zoomControl (ползунок для увеличения и уменьшения масштаба карты). Необходимые параметры указываются в кавычках через запятую. Также доступны другие параметры и функции, обо всех можно прочитать в документации по API Яндекс Карт.

Так как наша карта является фоном, то обязательно нужно отключить изменение масштаба карты с помощью колесика мыши. Просто вместо прокрутки сайта будет прокручиваться карта, а это не удобно для пользователей. Именно для этого мы отключаем данное поведение карты с помощью myMap.behaviors.disable.

 

Теперь поговорим о метках. Они устанавливаются также через координаты. Через параметр balloonContentHeader задается название метки во всплывающем окне, balloonContentBody добавляет туда же некоторый текст. Параметр iconCaption позволяет добавить текст рядом с меткой. А параметр preset задает тип (изображение и цвет) метки.

 

Разумеется весь код разбирать нет смысла, мы прошлись лишь по основным моментам настройки. Более детальную информацию ищите в документации Яндекс Карт, там это расписано достаточно подробно.