Стилизованная Яндекс карта на сайт

Настройка внешнего вида Яндекс карты под дизайн сайта и подключение через API.

Карта может органично вписываться в дизайн сайта при использовании инструмента стилизации от Яндекса, который позволяет настроить цвета, детализацию и внешний вид под интерфейс проека. Ниже — пошаговая инструкция по добавлению такой карты с пользовательским стилем и меткой.

Стилизация карты и получение JSON

Перейдите в редактор стилей карты.
С помощью настроек (палитра, детализация и т.д.) создайте нужный внешний вид карты.
После настройки нажмите: «Экспортировать JSON». На вкладке «Web» выберите «Загрузить JSON».
Загрузите полученный JSON-файл на ваш сайт (например, в папку /assets/...).

Создание API-ключа

Перейдите в кабинет разработчика.
Подключите API: «JavaScript API и HTTP Геокодер».
Создайте новый ключ и обязательно укажите домен в поле «Ограничение по HTTP Referer».
Подключите API на странице сайта:

<script src="https://api-maps.yandex.ru/v3/?apikey=ВАШ_API_KEY&lang=ru_RU"></script>

Добавление карты на сайт

Создайте HTML-блок, в котором будет отображаться карта. Размер контейнера задаётся через CSS.

<div id="map" style="width: 100%; height: 800px"></div>

Инициализация карты со стилями

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

<script>
initMap();

async function initMap() {
    await ymaps3.ready;

    const {
        YMap,
        YMapDefaultSchemeLayer,
        YMapMarker,
        YMapDefaultFeaturesLayer
    } = ymaps3;

    /* Загружаем кастомизацию по ссылке */
    const customization = await fetch(
        '/assets/app/js/customization-map.json' /* Укажите путь к файлу JSON */
    ).then(r => r.json());

    const map = new YMap(
        document.getElementById('map'),
        {
            location: {
                center: [37.621564, 55.753462], /*Координаты центра карты в формате [долгота, широта].*/
                zoom: 15 /*Начальный уровень масштабирования (чем больше — тем ближе).*/
            }, 
        }
    );

    map.addChild(
        new YMapDefaultSchemeLayer({
            theme: 'dark', /*Тема карты — тёмная. (можно light или кастом)*/
            customization: customization
        })
    );

    map.addChild(new YMapDefaultFeaturesLayer());

    const content = document.createElement('section');

    const marker = new YMapMarker( /*Создание маркера.*/
        {
            coordinates: [37.621564, 55.753462], /*Координаты маркера*/
            draggable: false /*Запрет на перемещение маркера*/
        },
        content
    );

    map.addChild(marker);

    content.innerHTML = `
        <div class="map-marker">
            <img src="/assets/app/img/icons/map-pointer.svg" alt=""> <!-- Пусть к изображению маркера -->
        </div>
    `; /*Кастомная разметка маркера*/
}
</script>

Стили маркера

Стили нужны для правильной привязки маркера к координате — не на левый верхний угол картинки, а на «острие» маркера, как у пина. Второй стиль делает масштабирование маркера синхронным с картой.

<style>
.map-marker {
    position: relative;
    transform: translate(-50%,-100%)
}

.map-marker img {
    display: block;
    transform-origin: 50% 100%;
    transform: scale(var(--ymap-scale))
}
</style>

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

Комментарии: