---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/fillcontainer.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/fillcontainer.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# 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.
{% list tabs %}
- index.html
```html
Examples. Resizing the map
```
- fillcontainer.js
```js
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();
}
}
```
{% endlist %}