---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_balloon.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/placemark_balloon.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/ru/llms.txt
# Метка и балун-панель
Open in CodeSandbox
В данном примере на карту добавлена метка, при клике на которой открывается балун-панель с заданным содержимым.
Для задания стиля метки из набора встроенных стилей используется опция preset.
В API предустановлено пять различных стилей для меток (в скобках указаны соответствующие ключи):
- Метки с текстом ('islands#icon');
- метки, тянущиеся под текст ('islands#stretchyIcon');
- метки с точкой в центре ('islands#dotIcon');
- метки в виде кругов ('islands#circleIcon');
- метки в виде кругов с точкой в центре ('islands#circleDotIcon').
Для каждого стиля на выбор предоставлено 16 цветов. API позволяет задавать меткам также собственные цвета для всех стилей, кроме 'islands#stretchyIcon'.
Как задавать меткам собственные цвета см. в следующем примере.
{% list tabs %}
- index.html
```html
Метка и балун-панель
```
- placemark_balloon.js
```js
ymaps.ready(function () {
var myMap = new ymaps.Map("YMapsID", {
center: [55.733835, 37.588227],
zoom: 12,
// Обратите внимание, что в API 2.1 по умолчанию карта создается с элементами управления.
// Если вам не нужно их добавлять на карту, в ее параметрах передайте пустой массив в поле controls.
controls: [],
});
var myPlacemark = new ymaps.Placemark(
myMap.getCenter(),
{
balloonContentBody: [
"",
"Офис Яндекса в Москве",
"
",
"Адрес: 119021, Москва, ул. Льва Толстого, 16",
"
",
'Подробнее: https://company.yandex.ru',
"",
].join(""),
},
{
preset: "islands#redDotIcon",
}
);
myMap.geoObjects.add(myPlacemark);
});
```
{% endlist %}