Карта Москвы
Карта Санкт-Петербурга
``` [Открыть примеры в песочнице](https://tech.yandex.ru/maps/jsbox/2.1/mapbasics) Карта может быть размещена в любом [блочном HTML-элементе](http://www.w3.org/TR/html401/struct/global.html#h-7.5.3) и полностью заполняет занимаемую им прямоугольную область. Вычисление размеров области производится в момент инициализации карты. Если в момент вызова конструктора карты HTML-контейнер не сформирован в DOM-дереве или его размеры не определены, будет создана карта нулевых размеров (т.е. фактически она не будет отображена). Такая ситуация часто возникает при [размещении карты в изначально скрытом контейнере](https://tech.yandex.ru/maps/jsbox/2.1/hiddendiv). Для удаления карты из DOM используется метод [destroy](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#destroy). ```javascript // Удаление карты. moscow_map.destroy(); ``` HTML-элемент, который был указан при создании карты, из DOM-дерева не удаляется. ## Параметры карты {#parameters} Основными параметрами карты являются: DOM-элемент, в котором размещается карта, участок отображаемой местности и способ ее изображения. При создании карты необходимо обязательно задать область картографирования путем указания центра и уровня масштабирования. В дальнейшем область картографирования можно изменить с помощью методов [setCenter](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#setCenter), [panTo](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#panTo), [setGlobalPixelCenter](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#setGlobalPixelCenter), [setZoom](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#setZoom), [setBounds](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#setBounds). ```javascript myMap.setCenter([55.7, 37.6], 6); myMap.panTo([50.451, 30.522], {duration: 2000}); myMap.setBounds([[50.1, 30.2],[60.3, 20.4]]); ``` Тип карты можно указать в конструкторе или с помощью метода [setType](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#setType). Можно использовать как встроенные, так и собственные типы карт. К встроенным типам относятся (в скобках указаны соответствующие данным типам ключи): - схема ('`yandex#map`'), - спутник ('`yandex#satellite`'), - гибрид ('`yandex#hybrid`'). ```javascript myMap.setType('yandex#satellite'); ``` См. [Пример](http://api.yandex.ru/maps/jsbox/2.1/mapparams). ## Поведения {#behaviors} Карта обладает набором поведений, определяющих реакцию карты на действия, производимые пользователем. Например, при перемещении курсора мыши в области показа при нажатой левой кнопке карта сдвигается вслед за курсором. При инициализации карты ей присваивается набор поведений, который в дальнейшем можно изменить. Доступ к поведениям карты предоставляется полем [behaviors](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#behaviors). ```javascript myMap.behaviors // Отключаем некоторые включенные по умолчанию поведения: // - drag - перемещение карты при нажатой левой кнопки мыши; // - rightMouseButtonMagnifier - увеличение области, выделенной // правой кнопкой мыши. .disable(['drag', 'rightMouseButtonMagnifier']) // Включаем измеритель расстояний, активирующийся при // щелчке левой кнопкой мыши. .enable('ruler'); ``` Собственные поведения определяются с помощью реализации интерфейса [IBehavior](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/IBehavior.md). Для создания собственного поведения достаточно создать класс и определить его свойства: менеджер опций поведения и менеджер событий. Также необходимо определить методы класса: `enable`, `disable`, `setParent` и `getParent`. Затем класс добавляется в хранилище поведений карты `ymaps.behavior.storage`, после чего менеджер поведений `map.behaviors` создаст экземпляр этого класса - новое поведение. ```javascript // Создадим и добавим на карту поведение, при котором // при щелчке на карте происходит ее центрирование по месту клика. // Для этого создадим класс MyBehavior и определим его свойства и методы function MyBehavior() { // Определим свойства класса this.options = new ymaps.option.Manager(); // Менеджер опций this.events = new ymaps.event.Manager(); // Менеджер событий } // Определим методы. MyBehavior.prototype = { constructor: MyBehavior, // Когда поведение будет включено, добавится событие щелчка на карту enable: function () { /* this._parent - родителем для поведения является менеджер поведений; this._parent.getMap() - получаем ссылку на карту; this._parent.getMap().events.add - добавляем слушатель события на карту. */ this._parent.getMap().events.add('click', this._onClick, this); }, disable: function () { this._parent.getMap().events.remove('click', this._onClick, this); }, // Устанавливает родителя для исходного поведения. setParent: function (parent) { this._parent = parent; }, // Получает родителя getParent: function () { return this._parent; }, // При щелчке на карте происходит ее центрирование по месту клика. _onClick: function (e) { var coords = e.get('coords'); this._parent.getMap().setCenter(coords); } }; // Помещаем созданный класс в хранилище поведений. // Далее данное поведение будет доступно по ключу 'mybehavior'. ymaps.behavior.storage.add('mybehavior', MyBehavior); // Включаем поведение myMap.behaviors.enable('mybehavior'); ``` ## Балун и хинт {#balloon_and_hint} На карте может быть отображен один балун (всплывающее окно) и один хинт (подсказка).  Балун и хинт отображаются в точке с заданными координатами, а их содержимое может содержать HTML-разметку. Ссылки на экземпляры классов балуна и хинта карты содержатся в полях [balloon](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#balloon) и [hint](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/Map.md#hint) объекта карты. ```javascript myMap.balloon.open(myMap.getCenter(), { contentHeader: 'Однажды', contentBody: 'В студеную зимнюю пору' + ' Я' + ' из лесу вышел', }); myMap.hint.open([55.76, 37.38], 'Кто поднимается в гору?'); ``` Доступ к балуну и хинту карты имеют геообъекты и активные области. То есть балун/хинт может быть открыт над геообъектом или активной областью без непосредственного указания координат балуна/хинта. ```javascript var myPlacemark = new ymaps.Placemark([55.7, 37.6], { balloonContentHeader: 'Однажды', balloonContentBody: 'В студеную зимнюю пору', balloonContentFooter: 'Мы пошли в гору', hintContent: 'Зимние происшествия' }); myMap.geoObjects.add(myPlacemark); // Балун откроется в точке «привязки» балуна — т. е. над меткой. myPlacemark.balloon.open(); ``` Если в момент открытия балуна на карте уже есть открытый балун, то старый балун закрывается, и открывается новый. То же самое относится и к хинту. Внешний вид балуна и хинта удобно настраивать с помощью [опций](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/general.md#options_data_state) или [шаблонов](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/layouts.md). {% note info %} Обратите внимание, открытие балуна и хинта является асинхронной операцией, методы `open` возвращают объекты [Promise](https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/vow.Promise.md) {% endnote %} Возможна ситуация, что балун выходит за границы карты. В таком случае балуну нужно задать дополнительно опцию `balloonPane`: #| || **Иллюстрация примера** | **Пример** || ||  | ```javascript var myPlacemark = new ymaps.Placemark([55.76, 37.64], { balloonContent: 'Я вышел за границы карты' }, { balloonPane: 'outerBalloon' }); ``` || |# См. [Примеры](http://api.yandex.ru/maps/jsbox/2.1/balloon_and_hint). ## Сохранение состояния карты в URL {#save-map} Когда пользователь работает с картой, он обычно изменяет ее состояние: центр, масштаб, тип и т. д. При перезагрузке страницы эти изменения будут потеряны. Для сохранения текущего состояния карты можно использовать, например, [URL hash](https://developer.mozilla.org/en-US/docs/Web/API/window.location). В примере ниже параметры карты передаются в URL hash при возникновении событий, изменяющих состояние карты. При загрузке страницы карта устанавливается в состояние, соответствующее переданным параметрам.