Resizing the map

Open in CodeSandbox

Map size is determined when it is created by the container manager. After this, the map does not track possible changes to its size. In order for the map to change its size to the current size, call the fitToViewport() function.

If you copy the full code of the example to a new HTML document, the opened map will take up the entire browser viewport. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Resizing the map</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="fillcontainer.js" type="text/javascript"></script>
    </head>

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0px;
            font-family: Arial;
            font-size: 14px;
        }

        #container {
            margin: 10px;
        }

        #map {
            width: 350px;
            height: 300px;
            border: 1px solid black;
            margin: 0;
            padding: 0;
            background-color: #ccc;
            overflow: hidden;
        }

        .smallMap {
            width: 300px !important;
            height: 200px !important;
        }

        #toggler {
            left: 5px;
            top: 5px;
            font-size: 12px;
        }

        #checkbox_block {
            left: 163px;
            top: 8px;
            font-size: 13px;
            text-shadow: 1px 1px 0 #fff;
        }
    </style>
    <body>
        <div id="container">
            <input type="button" value="Expand/Collapse" id="toggler" />
            <input type="checkbox" value="Resize the map" id="checkbox" />
            <label for="checkbox">Inform the map</label><br /><br />
            <div id="map" class="smallMap"></div>
        </div>
    </body>
</html>

ymaps.ready(init);

var myMap,
    bigMap = false;

function init() {
    myMap = new ymaps.Map(
        "map",
        {
            center: [55.755768, 37.617671],
            zoom: 10,
        },
        {
            /**
             * For complex rebuilds, we can set automatic updates to the map
             * when the container is resized.
             * For simple changes to the size of the container, we recommend updating the map programmatically.
             * autoFitToViewport: 'always'
             */
            searchControlProvider: "yandex#search",
        }
    );
    $("#toggler").click(toggle);
}

function toggle() {
    bigMap = !bigMap;

    /**
     * Adding/removing a CSS class that defines the dimensions of the map container
     * in absolute units (300x200 px).
     */
    if (bigMap) {
        $("#map").removeClass("smallMap");
    } else {
        $("#map").addClass("smallMap");
    }

    /**
     * If set, we tell the map that it should match its dimensions
     * to the dimensions of the container.
     */
    if ($("#checkbox").prop("checked")) {
        myMap.container.fitToViewport();
    }
}