Документация
Справочник JavaScript API
2.1.65 (текущая версия)
collection
interactivityModel
Интерфейсы

Элементы управления картой

Краткое содержание:

Общие сведения

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

На карту можно добавить следующие элементы управления:

Элементы управления размещаются в хранилище control.storage. Каждому элементу ставится в соответствие строковый ключ (например, 'geolocationControl'). Эти ключи можно использовать для добавления и удаления элементов управления с карты, а также для получения доступа к ним.

По умолчанию на карту добавляются следующие элементы управления:

Чтобы не добавлять все элементы управления по отдельности, можно использовать предустановленные наборы. В API включено три набора элементов управления: для больших карт (более 1000px в ширину), для стандартных карт (от 300 до 1000px в ширину) и для маленьких карт (менее 300px в ширину). Для отображения элементов управления из нужного набора достаточно указать ключ этого набора. Подробнее о наборах элементов управления.

Добавление и удаление элементов управления

Добавить элементы управления на карту можно двумя способами:

  1. через конструктор карты;
  2. с помощью метода map.controls.add().

Элементы управления можно добавлять по ключу, либо указав ссылку на экземпляр соответствующего класса (см. список доступных элементов управления). Чтобы добавить на карту встроенный набор элементов управления, нужно указать ключ этого набора.

Ниже рассмотрены примеры.

1. Добавление элементов через конструктор карты

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

Если в конструкторе карты не задана опция controls, на карту будет добавлен стандартный набор элементов управления (набор 'default'). Если необходимо создать карту без элементов управления, в опции controls следует задать пустой массив [].

// Пример 1.
// Зададим в конструкторе карты стандартный набор элементов управления
// и добавим к нему панель маршрутизации. 
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: ['default', 'routeButtonControl']
    });

// Пример 2. Создадим экземпляры элементов «Геолокация» и «Поиск по карте».
var geolocationControl = new ymaps.control.GeolocationControl(),
    searchControl = new ymaps.control.SearchControl({
        options: {
            // Зададим опции для поисковой строки.
            // Скроем панель с поисковыми подсказками.
            noSuggestPanel: false    
        }
    }),
// Добавим элементы на карту.
    myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: [geolocationControl, searchControl]
    });

// Пример 3. Создадим карту без элементов управления.
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: []
    });

2. Добавление элементов через метод map.controls.add()

В качестве первого аргумента методу map.controls.add() необходимо передать ключ элемента управления либо ссылку на экземпляр соответствующего класса. Вторым аргументом могут быть переданы параметры элемента управления.

// Создадим карту без элементов управления.
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: []
    });

// Добавим на карту ползунок масштаба и линейку.
myMap.controls.add('zoomControl');
myMap.controls.add('rulerControl', {
    // Отключим отображение масштабного отрезка рядом с линейкой.
    // Подробнее о настройке опций.
    scaleLine: false
});

Открыть примеры в песочнице

Удаление элементов управления

Для удаления элемента управления с карты предназначен метод map.controls.remove(). В качестве аргумента методу нужно передать ключ элемента управления или ссылку на экземпляр соответствующего класса.

// Удалим с карты «Ползунок масштаба».
myMap.controls.remove('zoomControl');

Получение доступа к элементам управления

После добавления на карту элементы управления размещаются в коллекции, ссылка на которую доступна через поле map.controls.

Получить доступ к нужному элементу управления можно через метод map.controls.get(). В качестве аргумента методу нужно передать ключ нужного элемента, либо ссылку на экземпляр соответствующего класса. Пример:

// Создадим карту с элементом 'Пробки'.
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [59.93772, 30.313622],
        controls: ['trafficControl']
    }), 
    // Получим ссылку на добавленный элемент управления.
    trafficControlObj = myMap.controls.get('trafficControl');

// Выведем в консоль информацию о текущем состоянии элемента.
console.log(trafficControlObj.state.get('size'));

Стандартные элементы управления

Ниже подробно рассмотрены стандартные элементы управления:

Геолокация

Класс control.GeolocationControl.

Позволяет определить местоположение пользователя путем вызова стандартной геолокационной функции браузера и/или по ip-адресу пользователя.

Ниже приведен пример добавления кнопки геолокации.

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['geolocationControl'],
        zoom: 10
    });

Поиск по карте

Класс control.SearchControl.

Осуществляет поиск объектов на карте. Позволяет искать не только географические объекты, но также и организации (эту возможность нужно включить через опцию provider). Объекты можно искать по названию, адресу или географическим координатам.

У этого элемента управления есть два представления:

  • полное – в виде поисковой строки;
  • компактное – в виде кнопки поиска.

Подробнее про адаптивность.

// Создадим поисковую строку.
var inputSearch = new ymaps.control.SearchControl({
        options: {
            // Пусть элемент управления будет
            // в виде поисковой строки.
            size: 'large',
            // Включим возможность искать
            // не только топонимы, но и организации.
            provider: 'yandex#search'            
        }
    }),
// Добавим поисковую строку на карту. 
    myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: [inputSearch]
    });

Панель маршрутизации

Класс control.RouteButton.

Строит маршрут по двум заданным точкам.

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

Начальную и конечную точки маршрута можно задать несколькими способами:

  • кликом по карте;
  • указав адрес в поле ввода;
  • по кнопке определения местоположения (на рисунке эта кнопка показана в поле ввода для точки «B»);
  • программно, через метод control.routePanel.state.set().

Пример добавления элемента управления на карту:

// Пример добавления панели маршрута.
var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['routeButtonControl'],
        zoom: 12
    }),
// Получим ссылку на элемент управления.
    control = myMap.controls.get('routeButtonControl');

// Программно установим начальную точку маршрута.
control.routePanel.state.set('from', 'чернышевская');

Примечание. Элемент управления control.RouteButton доступен в API начиная с версии 2.1.54.
У данного элемента управления есть несколько представлений: полное (и подпись и иконка), стандартное (только подпись) и компактное (только иконка). Подробнее про адаптивность.

Пробки

Класс control.TrafficControl

Позволяет показывать пробки на карте. Может быть показана как текущая (пробки «сейчас»), так и усредненная по времени загруженность дорог (пробки «обычно»).

В зависимости от размеров карты элемент будет иметь разное представление:

  • подробное (для карт больших размеров) – с расширенной информацией и возможностью посмотреть статистику и прогноз;
  • компактное (для небольших карт) – только кнопка включения и выключения дорожной информации (см. рисунок).

Подробнее про адаптивность.

// Добавим «Пробки».
var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['trafficControl'],
        zoom: 12
    }),
// Получим доступ к элементу управления.
    control = myMap.controls.get('trafficControl');

// Покажем пробки на карте.
control.showTraffic();

Переключатель слоев карты

Класс control.TypeSelector.

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

У кнопки есть два представления: подробное (для карт больших размеров) и компактное (см. рисунок). Подробнее про адаптивность.

Пример добавления «Переключателя слоев»:

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['typeSelector'],
        zoom: 12
    });

Полноэкранный режим

Класс control.FullscreenControl.

Включает/отключает полноэкранный режим. При нажатии на эту кнопку карта развернется на все окно браузера.

Пример добавления кнопки для перехода в полноэкранный режим:

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['fullscreenControl'],
        zoom: 12
    });

Ползунок масштаба

Класс control.ZoomControl.

Позволяет изменять коэффициент масштабирования карты.

В зависимости от высоты карты элемент будет иметь разное представление:

  • полное – с кнопками изменения масштаба и ползунком;
  • компактное – только с двумя кнопками (см. рисунок слева).

Подробнее про адаптивность.

Пример добавления ползунка масштаба:

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['zoomControl'],
        zoom: 12
    });

Линейка

Класс control.rulerControl.

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

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

Ниже приведен пример добавления линейки на карту.

// Добавим кнопку измерения расстояний.
var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['rulerControl'],
        zoom: 8
    });

Кнопка

Класс control.Button.

Кнопка со стандартным внешним видом.

Поддерживается два типа реакций на нажатие кнопки: после нажатия кнопка остается нажатой (поведение по умолчанию) или возвращается в исходное состояние. Тип реакции на нажатие задается опцией selectOnClick (true/false).

При нажатии на кнопку всегда генерируется событие click. Для кнопок, запоминающих свое состояние после нажатия, дополнительно генерируется событие select или deselect (в зависимости от того, в каком состоянии кнопка находилась в момент нажатия).

Для кнопки можно задавать собственную иконку (с помощью опции image), а также полностью изменить макет оформления.

var myButton =
  new ymaps.control.Button(
    '<b>Я кнопка</b>'
  );
myButton.events
  .add(
    'press',
    function () {
      alert('Щёлк');
    }
  )
  .add(
    'select',
    function () {
      alert('Нажата');
    }
  )
  .add(
    'deselect',
    function () {
      alert('Отжата');
    }
  );
myMap.controls.add(myButton, {
  float: "left"
});
myMap.controls.add(
  new ymaps.control.Button({
    data: {
      content: "кнопка с иконкой",
      image: "ya.png"
    },
    options: {
      maxWidth: 150
    }
  }
));
var template =
  '<div style="border: 1px solid gray; padding: 3px;">' +
  "{{ data.content }}" +
  "</div>"

myMap.controls.add(
  new ymaps.control.Button({
    data: {
      content: "Моя кнопка"
    },
    options: {
      layout:
        ymaps.templateLayoutFactory.createClass(
            template
        ),
      maxWidth: 100
    }})
);

Открыть примеры в песочнице

API предоставляет внешний модуль, который позволяет задать кнопкам круглое оформление. Модуль позволяет задать круглый вид как для стандартных, так и для собственных элементов управления.

Выпадающий список

Классы: control.ListBox и control.ListBoxItem.

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

Ниже приведен пример добавления на карту выпадающего списка.

var listItems = [
      new ymaps.control.ListBoxItem('Москва'),
      new ymaps.control.ListBoxItem('Новосибирск'),
      new ymaps.control.ListBoxItem('Нью-Йорк')
    ],

    myListBox = new ymaps.control.ListBox({
      data: {
        content: 'Выбрать город'
      },
      items: listItems
    });

myMap.controls.add(myListBox);

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

Встроенные наборы элементов управления

Чтобы не добавлять все элементы управления по отдельности, можно использовать предустановленные наборы. В API включено три набора элементов управления: для больших карт (более 1000px в ширину), для стандартных карт (от 300 до 1000px в ширину) и для маленьких карт (менее 300px в ширину). Для отображения элементов управления из нужного набора достаточно указать ключ этого набора.

Примечание. API не позволяет изменять встроенные наборы и создавать собственные.

При добавлении набора на карту можно дополнительно указывать отдельные элементы управления, не входящие в этот набор.

НаборОписание

«smallMapDefaultSet»

Набор кнопок, предназначенный для маленьких карт (менее 300 пикселей в ширину).

Список кнопок в наборе:

  • «Геолокация»;
  • «Поиск по карте»;
  • «Переключатель слоев карты»;
  • «Полноэкранный режим»;
  • «Кнопки управления масштабом».

Пример добавления набора:

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['smallMapDefaultSet'],
        zoom: 12
    });

Пример добавления набора и отдельного элемента:

// Добавим на карту набор и элемент
// «Панель маршрута».
var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['smallMapDefaultSet', 'routeButtonControl'],
        zoom: 12
    });

«mediumMapDefaultSet» (или «default»)

Набор кнопок, предназначенный для стандартных карт (от 300 до 1000 пикселей в ширину).

Список кнопок в наборе:

  • «Геолокация»;
  • «Поиск по карте»;
  • «Пробки»;
  • «Переключатель слоев карты»;
  • «Полноэкранный режим»;
  • «Кнопки управления масштабом»;
  • «Измеритель расстояния».

Этот набор добавляется на карту по умолчанию:

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        zoom: 12
    });

«largeMapDefaultSet»

Набор кнопок, предназначенный для больших карт (более 1000 пикселей в ширину).

Список кнопок в наборе:

  • «Геолокация»;
  • «Поиск по карте»;
  • «Кнопка маршрутов»;
  • «Пробки»;
  • «Переключатель слоев карты»;
  • «Ползунок масштаба»;
  • «Измеритель расстояния».

Пример добавления на карту:

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['largeMapDefaultSet'],
        zoom: 11
    });

Настройка элементов управления

API позволяет настраивать опции элементам управления. Например, можно изменить размер элементов или задать их позицию на карте.

Настроить опции для элементов управления можно несколькими способами:

  1. через конструктор элемента управления;
  2. через конструктор карты;
  3. через метод map.controls.add();
  4. через метод control.options.set().

Опции, которые можно задавать элементам управления, приведены в справочнике в описании соответствующих классов.

Способ 1. Настройка опций через конструктор элемента

// Создадим экземпляр кнопки "Геолокация" и зададим ей позицию.
// Подробнее о позиционировании элементов.
var geolocationControl = new ymaps.control.GeolocationControl({
        options: {
            float: 'right'
        }
    }),
    // Добавим элемент на карту.
    myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: [geolocationControl]
    });

Способ 2. Настройка опций через конструктор карты

Чтобы задать опции через конструктор карты, к названиям опций следует добавить префикс в виде ключа того элемента, для которого задается опция. Например, 'geolocationControlSize'.

// Создадим карту с элементами «Геолокация» и «Ползунок Масштаба».
var myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: ['geolocationControl', 'zoomControl']
    }, {
        // Зададим опции для элементов управления.
        geolocationControlFloat: 'right',
        zoomControlSize: 'large'
    });

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

Способ 3. Настройка опций через метод map.controls.add()

// Добавим на карту поисковую строку.
myMap.controls.add('searchControl', {
    // Расположим поисковую строку справа.
    float: 'right',
    // Включим возможность искать организации.
    provider: 'yandex#search'
});

Способ 4. Настройка опций через метод control.options.set()

// Создадим карту с элементом 'Пробки'.
var myMap = new ymaps.Map('map', {
        zoom: 10,
        center: [59.93772, 30.313622],
        controls: ['trafficControl']
    }), 
    // Получим ссылку на добавленный элемент управления.
    trafficControlObj = myMap.controls.get('trafficControl');

// Зафиксируем размер элемента, чтобы он не менял свой вид
// при изменении размеров карты. Подробнее про адаптивность.
trafficControlObj.options.set('size', 'small');

Настройка позиции элементов управления

Позицию элементов управления можно задать с помощью опций:

ОпцияТипОписание
floatString

Сторона, по которой нужно выравнивать элемент управления (см. Пример 1). Доступные значения:

  • 'right' – элемент будет расположен по правой стороне;
  • 'left' – элемент будет расположен по левой стороне;
  • 'none' – для элемента будет задано произвольное расположение (параметр position).

Внимание! Опцию float можно настроить только для тех элементов, которые по умолчанию располагаются в верхней части карты («Геолокация», «Поиск по карте», «Пробки» и др.). Для элементов «Ползунок масштаба» и «Линейка» нельзя установить автоматическую привязку к стороне, то есть для них опция float всегда должна принимать значение 'none'.

При задании опции float элементы управления будут выстраиваться так, чтобы не перекрывать друг друга. Порядок, в котором будут следовать элементы, определяется в опции floatIndex.

floatIndexNumberПриоритет расположения элемента управления (см. Пример 2). Элемент с максимальным приоритетом находится ближе к указанному в параметре float краю карты. Опция не работает при float='none'.
positionObjectСмещение элемента относительно краев карты (см. Пример 3). Может содержать поля top, bottom, left и right. Опция position работает только при float='none'.

Ниже рассмотрены примеры.

// Пример 1.
// Привяжем элементы «Пробки» и «Геолокация»
// к левому углу.
myMap.controls.add('trafficControl', {
    float: 'left'
});
myMap.controls.add('geolocationControl', {
    float: 'left'
});

// Привяжем кнопку маршрутов к правому углу.
myMap.controls.add('routeButtonControl', {
        float: 'right'
});

// Обратите внимание, что для элементов 
// «Ползунок масштаба» и «Линейка» опция
// float не работает (она должна всегда
// принимать значение 'none').
// Позицию этих элементов можно настроить
// только через параметр position.
// см. Пример 3.
myMap.controls.add('rulerControl', {
    // Опция будет проигнорирована.
    float: 'left'
});
myMap.controls.add('zoomControl', {
    float: 'right'
});

// Пример 2. 
// Зададим свой порядок следования элементов.
myMap.controls.add('routeButtonControl', {
    float: 'left',
    // «Панель маршрута» будет первой слева.
    floatIndex: '400'
});
myMap.controls.add('typeSelector', {
    float: 'left',
    // Переключатель слоев карты – второй слева.
    floatIndex: '300'
});
myMap.controls.add('trafficControl', {
    float: 'left',
    // Элемент «Пробки» будет третьим слева.
    floatIndex: '200'
});
myMap.controls.add('geolocationControl', {
    float: 'left',
    // Кнопка геолокации будет самой дальней
    // от левого угла.
    floatIndex: '100'
});

// Пример 3. 
// Зададим произвольное расположение элементов.
myMap.controls.add('trafficControl', {
    float: 'none',
    position: {
        top: '10px',
        left: '45px'
    }
});
 
myMap.controls.add('rulerControl', {
    float: 'none',
    position: {
        bottom: '40px',
        left: '15px'
    }
});

myMap.controls.add('zoomControl', {
    size: 'small',
    float: 'none',
    position: {
        bottom: '50px',
        right: '30px'
    }
});

Адаптивность элементов управления

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

Адаптивность поддерживают следующие элементы управления:

Элемент «Ползунок масштаба» изменяет свой внешний вид в зависимости от высоты карты. Остальные элементы – в зависимости от ширины карты.

Примечание. Адаптивность работает только для тех элементов управления, для которых выставлена опция float: 'left' или float: 'right'. Исключением является элемент «Ползунок масштаба». Поскольку он изменяет свое состояние в зависимости от высоты карты, его адаптивность будет работать и в том случае, если для него выставлена опция float: «none».

Элементы управления могут принимать одно из трех состояний: 'small', 'medium', 'large'. Для каждого состояния определено визуальное представление элемента управления:

СостояниеОписание

'small'

Показывается только иконка элемента управления.

'medium'

Показывается только подпись. Для элементов управления «Ползунок масштаба» и «Пробки» состояния 'small' и 'medium' совпадают.

'large'

Показывается и подпись и иконка.

Примечание. Элемент управления масштабом изменяет свой внешний вид следующим образом. При маленьких размерах карты элемент представляется в виде двух кнопок; при больших размерах карты помимо кнопок отображается также ползунок масштабирования.

Информация о текущем состоянии элемента управления размещается в поле state, у которого есть свойство size. Ниже продемонстрировано, как можно определить текущее состояние элемента управления.

myMap.controls.add('trafficControl');
// Определяем состояние элемента управления «Пробки».
var controlState = myMap.controls.get('trafficControl').state.get('size');

Управление состоянием элементов осуществляется менеджером control.Manager. При добавлении очередного элемента управления на карту или при изменении размеров карты менеджер проверяет состояние элементов и при необходимости изменяет его. При этом менеджер изменяет состояния сразу для всех элементов управления, поддерживающих адаптивность.

Если необходимо фиксировать состояние элемента управления, следует задать для него опцию size. Если в качестве значения опции указать один из трех размеров ('small', 'medium', 'large'), то элемент управления всегда будет представлен в этом размере. Если указать значение 'auto', элемент будет автоматически изменять свой внешний вид в зависимости от размеров карты.

// Фиксируем состояние элемента управления «Пробки». 
// Теперь он всегда будет отображаться в большом размере.
myMap.controls.get('trafficControl').options.set('size', 'large');

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

В песочнице приведены примеры, демонстрирующие поведение адаптивных элементов управления.

Создание собственных элементов управления

Чтобы настроить собственный элемент управления, необходимо реализовать интерфейс IControl.

Пример создания собственного элемента управления

Как сделать собственные элементы адаптивными

Чтобы сделать собственные элементы управления адаптивными, можно использовать встроенные классы API — control.Button и control.ListBox. Макеты кнопки и выпадающего списка по умолчанию реализуют адаптивность. Если в элементах управления заданы текст и картинка, они будут изменять свой внешний вид следующим образом:

КнопкаВыпадающий список

'small'

'small'

'medium'

'medium'

'large'

'large'

Ниже приведен пример создания собственной адаптивной кнопки с использованием класса control.Button.

var myButton = new ymaps.control.Button({
      data: {
        // Текст кнопки.
        content: "<b>Кнопка</b>",
        // Изображение иконки кнопки.
        image: 'my_button.png',
        // Текст всплывающей подсказки, которая появляется
        // при наведении на кнопку курсора мыши. 
        title: "Нажми меня"
      },
      options: {
        // Пусть кнопка будет менять ширину в зависимости от размера карты.
        // Зададим в опции maxWidth максимальную ширину кнопки
        // для трех ее состояний: 'small', 'medium' и 'large' соответственно.
        // Фактический размер кнопки будет вычисляться автоматически в зависимости
        // от размеров карты и длины текста, заданного в поле content.
        maxWidth: [28, 150, 178]
      }
    });
myMap.controls.add(myButton);

Открыть пример в песочнице

Примечание. Если в опции maxWidth задать одно число (например, maxWidth: 100), то это значение будет применяться ко всем трем состояниям кнопки, то есть кнопка не будет адаптивной. Если опция maxWidth не задана, то по умолчанию для всех состояний кнопки будет использоваться значение '90'.

Обратите внимание, что опция maxWidth задает не фактическую ширину кнопки, а границы, в которые должен вмещаться текст кнопки для разных состояний (текст задается в поле content). Например, если для состояния 'small' текст не вмещается в указанную в опции maxWidth ширину, кнопка переключится в следующее состояние (если это позволяют размеры карты). Если текст не вместился в границы, заданные для состояния 'large', такой текст будет отображаться не полностью.

var myMap = new ymaps.Map('map', {
      center: [56, 34],
      zoom: 4,
      type: 'yandex#map',
      controls: []
    }),
    // Создадим кнопку
    myButton = new ymaps.control.Button({
      data: {
        // Текст кнопки.
        content: '<b>«Мой дядя самых честных правил, ' +
        'Когда не в шутку занемог</b>'		
      },
      options: {
	 size: 'large',
        // Ограничим размер кнопки
        // для каждого из состояний.
        maxWidth: [10, 20, 200]
      }
    });
myMap.controls.add(myButton);

Если для кнопки необходимо задать собственные правила изменения размеров, следует использовать фабрику templateLayoutFactory. Ниже рассмотрен пример, в котором кнопка меняет свой внешний вид в зависимости от того, нажата она или нет (по умолчанию кнопки изменяют внешний вид в зависимости от ширины карты).

var ButtonLayout = ymaps.templateLayoutFactory.createClass([
      '<div alt="{{ data.title }}" class="my-button ',
        '{% if state.size == "small" %}my-button_small{% endif %}',
        '{% if state.size == "medium" %}my-button_medium{% endif %}',
        '{% if state.size == "large" %}my-button_large{% endif %}',
        '{% if state.selected %} my-button_selected{% endif %}">',
        '<img class="my-button__img" src="{{ data.image }}" alt="{{ data.title }}">',
        '<span class="my-button__text">{{ data.content }}</span>',
      '</div>'
    ].join('')),

    button = new ymaps.control.Button({
      data: {
        content: "Жмак-жмак",
        image: 'examples/maps/ru/button_layout/images/pen.gif',
        title: "Жмак-жмак-жмак"
      },
      options: {
        layout: ButtonLayout
      }
    });

myMap.controls.add(button, {
  float: "right"
});

Открыть пример в песочнице

контролы
адаптивные элементов управления
создание собственных элементов управления
кнопки
панель управления
выпадающие списки
круглые кнопки
настройка позиции элементов
размеры элементов управления
пробки
построение маршрутов