---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/balloon_ajax.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/balloon_ajax.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Динамическая загрузка содержимого балуна
Open in CodeSandbox
Содержимое балуна может подгружаться динамически. Для этого в callback-функции AJAX-запроса нужно всего лишь
переопределить свойство геообъекта, отвечающее за содержимое балуна.
Балун автоматически обновит своё содержимое и размеры.
В качестве примера AJAX-запроса использован механизм геокодирования в API.
{% list tabs %}
- index.html
```html
Динамическая загрузка содержимого балуна
```
- balloon_ajax.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [54.83, 37.11],
zoom: 5,
},
{
searchControlProvider: "yandex#search",
}
),
// Метка, содержимое балуна которой загружается с помощью AJAX.
placemark = new ymaps.Placemark(
[55.8, 37.72],
{
iconContent: "Узнать адрес",
hintContent:
"Перетащите метку и кликните, чтобы узнать адрес",
},
{
// Запретим замену обычного балуна на балун-панель.
balloonPanelMaxMapArea: 0,
draggable: "true",
preset: "islands#blueStretchyIcon",
// Заставляем балун открываться даже если в нем нет содержимого.
openEmptyBalloon: true,
}
);
// Обрабатываем событие открытия балуна на геообъекте:
// начинаем загрузку данных, затем обновляем его содержимое.
placemark.events.add("balloonopen", function (e) {
placemark.properties.set(
"balloonContent",
"Идет загрузка данных..."
);
// Имитация задержки при загрузке данных (для демонстрации примера).
setTimeout(function () {
ymaps
.geocode(placemark.geometry.getCoordinates(), {
results: 1,
})
.then(function (res) {
var newContent = res.geoObjects.get(0)
? res.geoObjects.get(0).properties.get("name")
: "Не удалось определить адрес.";
// Задаем новое содержимое балуна в соответствующее свойство метки.
placemark.properties.set("balloonContent", newContent);
});
}, 1500);
});
myMap.geoObjects.add(placemark);
}
```
{% endlist %}