Opening the balloon on the placemark in ObjectManager

Open in CodeSandbox

ObjectManager - A class for adding a large number of objects to the map without needing to create placemarks individually.

Objects added in ObjectManager are in the ObjectManager.objects collection. The clusters formed from the added placemarks are added to the ObjectManager.clusters collection.

These collections have managers that control balloons and hints (ObjectManager.objects.balloon, ObjectManager.clusters.hint).

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Working with the balloon in ObjectManager</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="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script
            src="object_manager_balloon.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: [55.76, 37.64],
                zoom: 10,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        objectManager = new ymaps.ObjectManager({
            clusterize: true,
        });

    myMap.geoObjects.add(objectManager);

    $.ajax({
        url: "data.json",
    }).done(function (data) {
        objectManager.add(data);
        // Opening the balloon on the placemark with id == 1.
        var objectState = objectManager.getObjectState(1);
        if (objectState.isClustered) {
            // Making sure that the specified object has been "selected" in the balloon.
            objectManager.clusters.state.set(
                "activeObject",
                objectManager.objects.getById(1)
            );
            /**
             * All the generated clusters have unique identifiers.
             * This identifier must be passed to the balloon manager to specify
             * which cluster to show the balloon on.
             */
            objectManager.clusters.balloon.open(objectState.cluster.id);
        } else {
            objectManager.objects.balloon.open(1);
        }
    });
}