Динамическая загрузка содержимого балуна

Open in CodeSandbox

Содержимое балуна может подгружаться динамически. Для этого в callback-функции AJAX-запроса нужно всего лишь переопределить свойство геообъекта, отвечающее за содержимое балуна. Балун автоматически обновит своё содержимое и размеры.

В качестве примера AJAX-запроса использован механизм геокодирования в API. 

<!DOCTYPE html>
<html>
    <head>
        <title>Примеры. Динамическая загрузка содержимого балуна</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.standard&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>

        <script src="balloon_ajax.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

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);
}