---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/controls/standard.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt

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

В API Яндекс Карт доступны следующие элементы управления:

- [Геолокация](#geolocation) – определяет текущее местоположение пользователя;
- [Поиск по карте](#search-on-map) – ищет географические объекты и организации;
- [Панель маршрутизации](#route-button) – прокладывает маршрут по заданным точкам. Элемент управления доступен в API начиная с версии 2.1.54;
- [Пробки](#traffic) – показывает пробки на карте;
- [Переключатель слоев карты](#layer-change) – переключает отображаемый слой карты (схема, спутник и гибрид). Кроме того, элемент позволяет показывать на карте сетку панорам;
- [Переход в полноэкранный режим](#fullscreen) – разворачивает карту на все окно браузера;
- [Ползунок масштаба](#scale) – увеличивает или уменьшает масштаб карты;
- [Линейка](#ruler) – измеряет расстояние между заданными точками;
- [Кнопка](#standard-button) – позволяет добавить стандартную кнопку и настроить для нее произвольное поведение;
- [Выпадающий список](#component) – позволяет добавить элемент управления в виде раскрывающегося меню.

Ниже предоставлена расширенная информация об элементах управления.

## Геолокация {#geolocation}

#|
|| ![](../../_images/control_geolocation.png) |

Класс [control.GeolocationControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.GeolocationControl.md).

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


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

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

## Поиск по карте {#search-on-map}

![](../../_images/control_search.png)

Класс [control.SearchControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.SearchControl.md).

Осуществляет поиск объектов на карте. Позволяет искать не только географические объекты, но также и организации (эту возможность нужно включить через опцию [provider](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.SearchControl.md#param-parameters.options.provider)). Объекты можно искать по названию, адресу или географическим координатам.

У этого элемента управления есть два представления:
- полное – в виде поисковой строки;
- компактное – в виде кнопки поиска.

[Подробнее про адаптивность](#adaptive-standard-controls).

```javascript
// Создадим поисковую строку.
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]
    });
```

## Панель маршрутизации {#route-button}

![](../../_images/control_route_button.png)

Класс [control.RouteButton](#controls).

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

При нажатии на кнопку ![](../../_images/routeButton-small.png) откроется всплывающая панель с настройками маршрута. Через эту панель пользователи могут задать пункт отправления и назначения, а также указать тип маршрута: на автомобиле, на общественном транспорте или пешком.

Начальную и конечную точки маршрута можно задать несколькими способами:
- кликом по карте;
- указав адрес в поле ввода;
- по кнопке определения местоположения (на рисунке эта кнопка показана в поле ввода для точки «B»);
- программно, через метод `control.routePanel.state.set()`.

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

```javascript
// Пример добавления панели маршрута.
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', 'чернышевская');
```

{% note info %}

Элемент управления [control.RouteButton](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.RouteButton.md) доступен в API начиная с версии 2.1.54.

{% endnote %}

У данного элемента управления есть несколько представлений: полное (и подпись и иконка), стандартное (только подпись) и компактное (только иконка). [Подробнее про адаптивность](#adaptive-standard-controls).

## Пробки {#traffic}

![](../../_images/control_traffic.png)

Класс [control.TrafficControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.TrafficControl.md)

Позволяет показывать пробки на карте. Может быть показана как текущая информация, так и статистика по загрузке дорог в указанное время.

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

[Подробнее про адаптивность](#adaptive-standard-controls).

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

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

## Переключатель слоев карты {#layer-change}

#|
|| ![](../../_images/control_type_selector.png) |

Класс [control.TypeSelector](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.TypeSelector.md).

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

У кнопки есть два представления: подробное (для карт больших размеров) и компактное (см. рисунок). [Подробнее про адаптивность](#adaptive-standard-controls). ||
|#


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

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

## Полноэкранный режим {#fullscreen}

#|
|| ![](../../_images/control_fullscreen.png) |

Класс [control.FullscreenControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.FullscreenControl.md).

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

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

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

## Ползунок масштаба {#scale}

#|
|| ![](../../_images/control_zoom.png) |

Класс [control.ZoomControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.ZoomControl.md).

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

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

[Подробнее про адаптивность](#adaptive-standard-controls). ||
|#

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

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

## Линейка {#ruler}

#|
|| ![](../../_images/control_ruler.png) |

Класс [control.rulerControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.RulerControl.md#set).

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

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

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

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

## Кнопка {#standard-button}

#|
|| ![](../../_images/control-button.png) |

Класс [control.Button](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md).

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

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

При нажатии на кнопку всегда генерируется событие [click](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Button.md#event-click). Для кнопок, запоминающих свое состояние после нажатия, дополнительно генерируется событие [select](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-select) или [deselect](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/ISelectableControl.md#event-deselect) (в зависимости от того, в каком состоянии кнопка находилась в момент нажатия).

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

#|
|| ![](../../_images/control_button_onmap_1.png) |

![](../../_images/control_button_onmap_2.png) ||
||

```javascript
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"
});
```

|

```javascript
myMap.controls.add(
  new ymaps.control.Button({
    data: {
      content: "кнопка с иконкой",
      image: "ya.png"
    },
    options: {
      maxWidth: 150
    }
  }
));
```

||
|#

[Открыть примеры в песочнице](https://tech.yandex.ru/maps/jsbox/2.1/button)
API предоставляет [внешний модуль](https://github.com/yandex/mapsapi-round-controls), который позволяет задать кнопкам круглое оформление. Модуль позволяет задать круглый вид как для стандартных, так и для собственных элементов управления.

[![](../../_images/round-controls.png)](https://github.com/yandex/mapsapi-round-controls)

## Выпадающий список {#component}

#|
|| ![](../../_images/control_listbox.png) |

Классы: [control.ListBox](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.ListBox.md) и [control.ListBoxItem](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.ListBoxItem.md).

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

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

```javascript
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);
```

Взаимодействие выпадающего меню с картой необходимо запрограммировать самостоятельно. В [примере](https://tech.yandex.ru/maps/jsbox/2.1/list_box_layout) показано, как настроить центрирование карты по выбранному элементу из списка.

[![](../../_images/interactive-list.gif)](https://tech.yandex.ru/maps/jsbox/2.1/list_box_layout)