На весь экран

Open in CodeSandbox

Размер карты определяется при ее создании менеджером контейнеров. Далее карта не следит за возможными изменениями своих размеров. Чтобы карта изменила свои размеры на актуальные, требуется вызов функции менеджера fitToViewport().

Если скопировать полный код примера в новый HTML-документ, развернутая карта будет полностью занимать область просмотра браузера.

Этот пример также демонстрирует, как не надо размещать свои элементы управления на карте. Для создания элементов управления, связанных с картой, следует использовать классы пространства имен control. Например, control.Button для создания кнопки. 

<!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.0/?load=package.standard&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/1.6.4/jquery.min.js"
            type="text/javascript"
        ></script>

        <script src="fillcontainer.js" type="text/javascript"></script>
    </head>

    <style type="text/css">
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .smallMap {
            width: 300px !important;
            height: 200px !important;
            border: 1px solid #f00;
        }

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

        #checkbox_block {
            position: absolute;
            left: 163px;
            top: 8px;
            font-size: 13px;
            text-shadow: 1px 1px 0 #fff;
        }
    </style>

    <body>
        <div
            id="map"
            style="background-color:#FF0; overflow:hidden"
            class="smallMap"
        ></div>
        <input type="button" value="Развернуть/Cвернуть" id="toggler" />

        <div id="checkbox_block">
            <input
                type="checkbox"
                value="Изменить размеры карты"
                id="checkbox"
            />
            <label for="checkbox">Информировать карту</label>
        </div>
    </body>
</html>

ymaps.ready(init);

var myMap,
    fullScreen = false;

function init() {
    myMap = new ymaps.Map("map", {
        center: [55.755768, 37.617671],
        zoom: 10,
    });
    $("#toggler").click(toggle);
}

function toggle() {
    fullScreen = !fullScreen;

    // Добавляем/убираем CSS-класс, определяющий размеры контейнера карты,
    // заданные в абсолютных единицах (300x200 px).
    if (fullScreen) {
        $("#map").removeClass("smallMap");
    } else {
        $("#map").addClass("smallMap");
    }

    // Если выставлен флаг, сообщаем карте, что ей следует
    // привести свои размеры к размерам контейнера.
    if ($("#checkbox").attr("checked")) {
        myMap.container.fitToViewport();
    }
}