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. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Dynamically loading balloon content</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            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",
            }
        ),
        // 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);
}