Positioning the map to display geocoding results and clustering

Open in CodeSandbox

This example demonstrates how to add geocoding results to the GeoQueryResult selection. Using the applyBoundsToMap method, set the mapping area so that all the objects in the selection fall within it. Use the clusterize method to add the objects to the clusterer. 

<!DOCTYPE html>

<html>
    <head>
        <title>
            Examples. Positioning the map to display geocoding results and
            clustering
        </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="apply_bounds_and_clusterize.js"
            type="text/javascript"
        ></script>
        <style>
            body,
            html {
                font-family: Arial;
                font-size: 11pt;
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                background-color: white;
            }
            p {
                padding: 10px;
            }
            #map {
                width: 100%;
                height: 80%;
            }
        </style>
    </head>
    <body>
        <p>Clustered results for the request "Arbat" are shown</p>
        <div id="map"></div>
    </body>
</html>

function init() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.73, 37.75],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    /**
     * Making a geocoding request, then positioning the map so that
     * all objects fall within the map viewport
     * and the zoom level is as high as possible.
     */
    var result = ymaps
        .geoQuery(ymaps.geocode("Arbat"))
        .applyBoundsToMap(myMap, { checkZoomRange: true });
    /**
     * Clustering the resulting objects and adding the clusterer to the map.
     * Note that the clusterer is created immediately, but the objects are added to it
     * only after the response is received from the server.
     */
    myMap.geoObjects.add(result.clusterize());
}
ymaps.ready(init);