--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/examples/cases/balloon_ajax.md --- # Динамическая загрузка содержимого балуна Open in CodeSandbox
ready, Map, Placemark geocode

Содержимое балуна может подгружаться динамически. Для этого в 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, }), // Метка, содержимое балуна которой загружается с помощью AJAX. placemark = new ymaps.Placemark( [55.8, 37.72], { iconContent: "Узнать адрес", hintContent: "Перетащите метку и кликните, чтобы узнать адрес", }, { draggable: true, preset: "twirl#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 %}