---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/module_request.md
  - https://yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/module_request.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/jsapi-v2-1/doc/en/llms.txt

# Loading the module on demand

<iframe id="LIVE-EXAMPLE" style="width:100%;height: 400px;border-radius: 8px;border: 1px solid rgba(92, 94, 102, 0.14);" frameBorder="0" src="https://yastatic.net/s3/front-maps-static/maps-front-jsapi-v2-1/examples/2/out/s3-cases/en/module_request/index.html" allow="fullscreen"></iframe>

<a target="_blank" rel="noopener noreferrer" style="display: inline-block;margin-top: 10px;cursor: pointer;border-radius: 4px;padding: 9px 12px;background: #151515;color: white;text-decoration: none;font-weight: 500" href="https://codesandbox.io/p/sandbox/vnps9z?file=index.html">Open in CodeSandbox</a>

<div id="references">
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ready">ready</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/modules.require">modules.require</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/vow">vow</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map">Map</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Placemark">Placemark</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Button">control.Button</a>
</div>
    In this example, only the map and button modules are loaded during initialization.
<br/>
    The placemark module is loaded when the button is clicked.
<br/>
     You can load separate modules using the <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/modules.require">require</a> method in the modular system.
<br/>
    The method returns a <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/vow.Promise.xml">promise object</a> that is resolved by an array of requested modules.
<br/>
    For convenience, the example uses the 'spread' method, which passes the function the data as a list of arguments, not as an array.
<br/><br/>
    The Yandex.Maps API consists of a large number of interrelated modules.
<br/>
    By default, when the API is enabled, it loads a standard set of modules (package.full), which includes everything that is necessary for using the API.
<br/>
    To reduce the amount of API code that is loaded, you can enable certain modules instead of the full set.
<br/>
    You can do this by specifying the desired modules in the 'load' GET parameter. Modules are specified as a comma-separated list.
<br/>
    If the 'load' GET parameter isn't specified, package.full is loaded.
<br/>
    For more information aobut modules, see the <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/dg/concepts/modules">Modules</a> section.

{% list tabs %}

-   index.html

    ```html
    <!DOCTYPE html>
    <html>
        <head>
            <title>An example of loading only necessary modules</title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <!--
                You can use GET for the 'load' parameter to list the necessary Yandex.Maps API modules.
    
                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/
            -->
            
            
            
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
    ```

-   module_request.js

    ```js
    ymaps.ready(function () {
        var myMap = new ymaps.Map("map", {
            center: [55.755381, 37.619044],
            zoom: 7,
            // Not displaying any standard controls on the map, as they were not loaded.
            controls: [],
        });

        var loadControl = new ymaps.control.Button({
            data: { content: "Add a placemark" },
            options: { maxWidth: 200, float: "right", selectOnClick: false },
        });
        myMap.controls.add(loadControl);

        loadControl.events.add("click", function () {
            if (ymaps.Placemark) {
                // If the module has already been loaded, there is no need to access the module system again.
                addPlacemark();
            } else {
                /**
                 * On-demand loading of the placemarks class and overlay.
                 * By default, the overlay is automatically loaded after you add placemarks to the map.
                 * In this example, the placemark module itself is loaded asynchronously and there is no need to load the overlay separately.
                 */
                ymaps.modules
                    .require(["Placemark", "overlay.Placemark"])
                    .spread(function (Placemark, PlacemarkOverlay) {
                        /**
                         * Adding the class manually to the global viewport, since this does not happen
                         * when using the "require" method of the module system.
                         */
                        ymaps.Placemark = Placemark;
                        addPlacemark();
                    });
            }
        });

        function addPlacemark() {
            var center = myMap.getCenter();
            // Setting a random position close to the center of the map.
            center[0] += Math.random() * 2 - 1;
            center[1] += Math.random() * 2 - 1;
            var placemark = new ymaps.Placemark(center);
            myMap.geoObjects.add(placemark);
        }
    });
    ```

{% endlist %}
