---
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/edit.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt

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

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

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

Элементы управления размещаются в коллекции, ссылка на которую доступна через поле [map.controls](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#properties-summary).

Получить доступ к нужному элементу управления можно через метод [map.controls.get()](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/control.Manager.md#get). В качестве аргумента методу нужно передать ключ нужного элемента, либо ссылку на экземпляр соответствующего класса. Пример:

```javascript
// Создадим карту с элементом 'Пробки'.
        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-options}

Настройки элементов управления называются _опциями_. Настроить опции для элементов управления можно несколькими способами:
- [через конструктор элемента управления](#options-example1);
- [через конструктор карты](#options-example2);
- [через метод map.controls.add()](#options-example3);
- [через метод control.options.set()](#options-example4).

Доступные опции приведены в описании классов соответствующих элементов.

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

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

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

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

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

{% note info %}

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

{% endnote %}

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

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

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

```javascript
// Создадим карту с элементом 'Пробки'.
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');
```

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

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

#|
|| **Опция** | **Тип** | **Описание**  ||
|| `float` | String |

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

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

{% note alert %}

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

{% endnote %}

При задании опции `float` элементы управления будут выстраиваться так, чтобы не перекрывать друг друга. Порядок, в котором будут следовать элементы, определяется в опции `floatIndex`. ||
|| `floatIndex` | Number | Приоритет расположения элемента управления (см. [Пример 2](#position-example1)). Элемент с максимальным приоритетом находится ближе к указанному в параметре `float` краю карты. Опция не работает при float='none'. ||
|| `position` | Object | Смещение элемента относительно краев карты (см. [Пример 3](#position-example3)). Может содержать поля `top`, `bottom`, `left` и `right`. Опция `position` работает только при float='none'. ||
|#

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

#|
|| 

```javascript
// Пример 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'
});
```

| ![](../../_images/controls-float.png) ||
||

```javascript
// Пример 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'
});
```

| ![](../../_images/controls-floatIndex.png) ||
|| 

```javascript
// Пример 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'
    }
});
```

| ![](../../_images/controls-position.png) ||
|#