---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/balloon_html.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Собственный html-контент балуна метки
Open in CodeSandbox
Через свойства и опции геообъектов можно задавать содержимое для балуна и всплывающей подсказки, а также изменять их внешний вид.
Содержимое балуна/всплывающей подсказки задается через свойства геообъекта:
- hintContent - содержимое всплывающей подсказки геообъекта;
- balloonContent - содержимое балуна геообъекта;
- balloonContentHeader - содержимое заголовка балуна геообъекта;
- balloonContentBody - содержимое основой части балуна геообъекта;
- balloonContentFooter - содержимое нижней части балуна геообъекта.
При задании содержимого можно использовать HTML-разметку.
Обратите внимание, через HTML-разметку можно задать только внутреннюю структуру балуна/всплывающей подсказки. Если нужно изменить их внешний вид, вам потребуется переопределить их макет с помощью фабрики templateLayoutFactory. Макет задается через опции геообъекта.
Фабрика макетов позволяет решить задачи:
- поменять форму балуна и всплывающей подсказки;
- сдвинуть относительно метки;
- изменить внешний вид крестика закрытия балуна;
- изменить внешний вид ножки балуна и др.
Чтобы понять, как работать с фабрикой макетов, посмотрите пример Пользовательский макет балуна с поддержкой автопозиционирования.
{% list tabs %}
- index.html
```html
Собственный html-контент балуна метки
```
- balloon_html.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [55.751574, 37.573856],
zoom: 9,
controls: [],
},
{
searchControlProvider: "yandex#search",
}
);
var placemark = new ymaps.Placemark(myMap.getCenter(), {
// Зададим содержимое заголовка балуна.
balloonContentHeader:
'Рога и копыта
' +
'Сеть кинотеатров',
// Зададим содержимое основной части балуна.
balloonContentBody:
'🎬
' +
'+7 (123) 456-78-90
' +
"Ближайшие сеансы
Сеансов нет.",
// Зададим содержимое нижней части балуна.
balloonContentFooter:
'Информация предоставлена:
OOO "Рога и копыта"',
// Зададим содержимое всплывающей подсказки.
hintContent: "Рога и копыта",
});
// Добавим метку на карту.
myMap.geoObjects.add(placemark);
// Откроем балун на метке.
placemark.balloon.open();
}
```
{% endlist %}