Добавление кнопки на карту

Open in CodeSandbox

Класс control.Button позволяет создавать кнопки и добавлять их на карту через control.Manager.

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

У кнопки по умолчанию выставлена максимальная ширина в 90 пикселей. Если ваша кнопка содержит длинный текст, следует задать ей нужный максимальный размер через опцию maxWidth. 

<!DOCTYPE html>
<html>
    <head>
        <title>Добавление кнопки на карту</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="button.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);
function init() {
    var map = new ymaps.Map("map", {
            center: [59.93772, 30.313622],
            zoom: 10,
            controls: [],
        }),
        firstButton = new ymaps.control.Button("Кнопка");

    map.controls.add(firstButton, { float: "right" });

    var secondButton = new ymaps.control.Button({
        data: {
            // Зададим текст и иконку для кнопки.
            content: "Адаптивная кнопка",
            // Иконка имеет размер 16х16 пикселей.
            image: "error.svg",
        },
        options: {
            // Поскольку кнопка будет менять вид в зависимости от размера карты,
            // зададим ей три разных значения maxWidth в массиве.
            maxWidth: [28, 150, 178],
        },
    });
    map.controls.add(secondButton);

    // Будем искусственно переключать размеры кнопки каждую секунду, чтобы показать все варианты
    // внешнего вида кнопки.
    // При изменении размера карты эти перестроения будут происходить автоматически.
    function changeSize() {
        var oldSize = secondButton.options.get("size"),
            newSize;
        switch (oldSize) {
            case "small":
                newSize = "medium";
                break;
            case "medium":
                newSize = "large";
                break;
            case "large":
                newSize = "small";
                break;
            default:
                newSize = "small";
        }
        secondButton.options.set("size", newSize);
    }

    window.setInterval(changeSize, 1000);
}