---
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/en/llms.txt
# Dynamically loading balloon content
Open in CodeSandbox
The contents of the balloon can be loaded dynamically. In the callback function of the AJAX request, you need to
override the property of the geo object responsible for the balloon content.
The balloon will automatically update its content and size.
As an example of an AJAX request, we use the geocoding mechanism in the API.
{% list tabs %}
- index.html
```html
Examples. Dynamically loading balloon content
```
- 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",
}
),
// A placemark with balloon contents loaded using AJAX.
placemark = new ymaps.Placemark(
[55.8, 37.72],
{
iconContent: "Get the address",
hintContent:
"Drag the placemark and click to see the address",
},
{
// Disabling the replacement of the conventional balloon with the balloon panel.
balloonPanelMaxMapArea: 0,
draggable: "true",
preset: "islands#blueStretchyIcon",
// Making the balloon open even if there is no content.
openEmptyBalloon: true,
}
);
/**
* Handling the event of opening the balloon on the geo object:
* begin loading data, then updating its contents.
*/
placemark.events.add("balloonopen", function (e) {
placemark.properties.set("balloonContent", "Loading data...");
// Imitating a delay when loading data (for demonstration purposes).
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")
: "Couldn't detect address.";
// Setting the new content of the balloon in the corresponding placemark property.
placemark.properties.set("balloonContent", newContent);
});
}, 1500);
});
myMap.geoObjects.add(placemark);
}
```
{% endlist %}