How to write the right script to optimize and display your label for Yandex maps?

Question

JavaScript

Good evening everyone!
Please help me with the script!
I use an existing script to optimize Yandex maps via the API.

//Переменная для включения/отключения индикатора загрузки
    var spinner = $('.ymap-container').children('.loader');
    //Переменная для определения была ли хоть раз загружена Яндекс.Карта (чтобы избежать повторной загрузки при наведении)
    var check_if_load = false;
    //Необходимые переменные для того, чтобы задать координаты на Яндекс.Карте
    var myMapTemp, myPlacemarkTemp;

    //Функция создания карты сайта и затем вставки ее в блок с идентификатором "map-yandex"
    function init() {
        var myMapTemp = new ymaps.Map("map-yandex", {
            center: [55.9097, 37.8243], // координаты центра на карте
            zoom: 17, // коэффициент приближения карты
            controls: ['zoomControl', 'fullscreenControl'] // выбираем только те функции, которые необходимы при использовании
        });
        var myPlacemarkTemp = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [55.6301, 37.2737] // координаты, где будет размещаться флажок на карте
            }
        });
        myMapTemp.geoObjects.add(myPlacemarkTemp); // помещаем флажок на карту

        // Получаем первый экземпляр коллекции слоев, потом первый слой коллекции
        var layer = myMapTemp.layers.get(0).get(0);

        // Решение по callback-у для определния полной загрузки карты
        waitForTilesLoad(layer).then(function () {
            // Скрываем индикатор загрузки после полной загрузки карты
            spinner.removeClass('is-active');
        });

        
    }

    // Функция для определения полной загрузки карты (на самом деле проверяется загрузка тайлов) 
    function waitForTilesLoad(layer) {
        return new ymaps.vow.Promise(function (resolve, reject) {
            var tc = getTileContainer(layer),
                readyAll = true;
            tc.tiles.each(function (tile, number) {
                if (!tile.isReady()) {
                    readyAll = false;
                }
            });
            if (readyAll) {
                resolve();
            } else {
                tc.events.once("ready", function () {
                    resolve();
                });
            }
        });
    }

    function getTileContainer(layer) {
        for (var k in layer) {
            if (layer.hasOwnProperty(k)) {
                if (
                    layer[k] instanceof ymaps.layer.tileContainer.CanvasContainer ||
                    layer[k] instanceof ymaps.layer.tileContainer.DomContainer
                ) {
                    return layer[k];
                }
            }
        }
        return null;
    }

    // Функция загрузки API Яндекс.Карт по требованию (в нашем случае при наведении)
    function loadScript(url, callback) {
        var script = document.createElement("script");

        if (script.readyState) { // IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { // Другие браузеры
            script.onload = function () {
                callback();
            };
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    // Основная функция, которая проверяет когда мы навели на блок с классом "ymap-container"
    var ymap = function () {
        $('.ymap-container').mouseenter(function () {
            if (!check_if_load) { // проверяем первый ли раз загружается Яндекс.Карта, если да, то загружаем

                // Чтобы не было повторной загрузки карты, мы изменяем значение переменной
                check_if_load = true;

                // Показываем индикатор загрузки до тех пор, пока карта не загрузится
                spinner.addClass('is-active');

                // Загружаем API Яндекс.Карт
                loadScript("https://api-maps.yandex.ru/2.1/?apikey=(7175574e-517b-4eb2-a94c-953f62e69909)&lang=ru_RU", function () {
                    // Как только API Яндекс.Карт загрузились, сразу формируем карту и помещаем в блок с идентификатором "map-yandex"
                    ymaps.load(init);
                });
            }
        });
    }
    $(function () {
        ymap();
    });

But there is a problem, I can’t display my label ....

I tried different options, but either it doesn’t output anything, or the script breaks.

Thank you!

Answer 1

If I understand your task correctly, your own label on Y.K is created like this:

//создаем объект
        var myPlacemark1 = new ymaps.Placemark([44.000000,33.000000], {
            iconContent: 'someText', // текст метки, может быть произвольным
            hintContent: 'someText', // подсказка при наведении
            balloonContentHeader: 'ТsomeText'
        }, {
            iconLayout: 'default#image', // Необходимо указать данный тип макета.
            iconImageHref: 'img/marker.svg',// Своё изображение иконки метки.
            iconImageSize: [35, 50],// Размеры метки.
            iconImageOffset: [-5, -38] // Смещение левого верхнего угла иконки относительно точки привязки
        });

        // добавляем объекты на карту
        myMap.geoObjects.add(myPlacemark1);