Module «map-custom-zoom». Серая яндекс карта с кастомным зумом и одним кастомным placemark.

Source:

https://html.ildar-meyker.ru/html-kgeu/components.html?tab=tab-maps

Демо:

Плагины:

Подключение:

//

<script
    src="https://api-maps.yandex.ru/2.1/?apikey=4ee83d51-9c82-4832-ae32-283ef606144b
&lang=ru_RU"
    type="text/javascript"
></script>

Разметка:

//
<div
    class="map-contacts"
    data-id="map-contacts-1"
    data-center="[59.779398, 30.459721]"
    data-hint="г. Санкт-Петербург, Московское ш., д. 177, к. 2 лит. Ж"
    data-assets-url=""
>
    <div class="map-contacts__container">
        <div
            id="map-contacts-1"
            style="width: 100%; height: 100%"
        ></div>
    </div>
</div>

Стили:

//
.map-contacts {
    position: relative;
    background: #f3f3f3;
    border-radius: 2rem;
    overflow: hidden;

    &:before {
        content: " ";
        padding-top: 55%;
        display: block;
    }

    &__container {
        @include fill;

        [class*="ymaps-2"][class*="-ground-pane"] {
            filter: #{"grayscale()"};
        }
        [class*="ymaps-2"][class*="copyrights-pane"] {
            display: none !important;
        }
        [class*="ymaps-2"][class*="controls__control"] {
            inset: 3rem 3rem auto auto !important;
        }
    }

    &__btn-zoom-in,
    &__btn-zoom-out {
        cursor: pointer;
        background: #fff;
        border-radius: 50%;
        font-size: 4.8rem;
        width: 1em;
        height: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;

        .icon {
            font-size: 1.2rem;
        }
    }
}

@media (max-width: 999.98px) {
    .map-contacts {
        border-radius: 0.8rem;

        &:before {
            padding-top: 100%;
        }

        &__btn-zoom-in,
        &__btn-zoom-out {
            font-size: 3.5rem;
        }

        &__container {
            [class*="ymaps-2"][class*="controls__control"] {
                inset: 1rem 1rem auto auto !important;
            }
        }
    }
}

Инициализация:

//
if (typeof ymaps !== "undefined") {
    ymaps.ready(init);
}


const CLASS_ZOOM_IN = "map-contacts__btn-zoom-in";
const CLASS_ZOOM_OUT = "map-contacts__btn-zoom-out";

function init() {
    $(".map-contacts").each(function () {
        const $root = $(this);

        const { id, center, hint } = $root.data();
        const assetsUrl = $root.data("assets-url");

        const myMap = new ymaps.Map(id, {
            center,
            controls: [],
            zoom: 15,
        });

        const myPlacemark = new ymaps.Placemark(
            center,
            {
                hintContent: hint,
                balloonContent: hint,
                iconContent: "",
            },
            {
                // Опции.
                // Необходимо указать данный тип макета.
                iconLayout: "default#image",
                // Своё изображение иконки метки.
                iconImageHref: assetsUrl + "img/map-marker.svg",
                // Размеры метки.
                iconImageSize: [80, 92],
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-40, -92],
            }
        );

        // Создадим пользовательский макет ползунка масштаба.
        const ZoomLayout = ymaps.templateLayoutFactory.createClass(
            `<div>
                <div class='${CLASS_ZOOM_IN}'>
                    <svg class="icon">
                        <use xlink:href="${assetsUrl}img/icons/general/sprite.svg#zoom-in"></use>
                    </svg>
                </div>
                <div class='${CLASS_ZOOM_OUT}'>
                    <svg class="icon">
                        <use xlink:href="${assetsUrl}img/icons/general/sprite.svg#zoom-out"></use>
                    </svg>
                </div>
            "</div>`,
            {
                // Переопределяем методы макета, чтобы выполнять дополнительные действия
                // при построении и очистке макета.
                build: function () {
                    // Вызываем родительский метод build.
                    ZoomLayout.superclass.build.call(this);

                    // Привязываем функции-обработчики к контексту и сохраняем ссылки
                    // на них, чтобы потом отписаться от событий.
                    this.zoomInCallback = ymaps.util.bind(this.zoomIn, this);
                    this.zoomOutCallback = ymaps.util.bind(this.zoomOut, this);

                    // Начинаем слушать клики на кнопках макета.
                    $root
                        .find("." + CLASS_ZOOM_IN)
                        .on("click", this.zoomInCallback);
                    $root
                        .find("." + CLASS_ZOOM_OUT)
                        .on("click", this.zoomOutCallback);
                },

                clear: function () {
                    // Снимаем обработчики кликов.
                    $root
                        .find("." + CLASS_ZOOM_IN)
                        .off("click", this.zoomInCallback);
                    $root
                        .find("." + CLASS_ZOOM_OUT)
                        .off("click", this.zoomOutCallback);

                    // Вызываем родительский метод clear.
                    ZoomLayout.superclass.clear.call(this);
                },

                zoomIn: function () {
                    var map = this.getData().control.getMap();
                    map.setZoom(map.getZoom() + 1, { checkZoomRange: true });
                },

                zoomOut: function () {
                    var map = this.getData().control.getMap();
                    map.setZoom(map.getZoom() - 1, { checkZoomRange: true });
                },
            }
        );

        const zoomControl = new ymaps.control.ZoomControl({
            options: { layout: ZoomLayout },
        });

        myMap.geoObjects.add(myPlacemark);
        myMap.behaviors.disable("scrollZoom");
        myMap.controls.add(zoomControl);
    });
}