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

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.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="balloon_ajax.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

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