Documentation
Next Ctrl 

Map Constructor API

Map Constructor is an easy-to-use online tool for creating maps with directions and marking places on maps. You can put the maps you create on your website or blog. You can also use these maps in accordance with the Commercial API.

To display a map on a page, you just need to take the widget code generated by the Map Constructor and embed it on the page. Sample widget code:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um
[no-highlight[

um — Unique map ID. Generated by the Map Constructor.

]no-highlight]
=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8"></script>

um — Unique map ID. Generated by the Map Constructor.

Note. You can insert the same widget code on a page any number of times.

You can use the Map Constructor for creating two types of maps: interactive and static. For an interactive map, the Map Constructor generates the script element, which loads JavaScript code to the page for creating the map. For a static map, the Map Constructor generates the img element, which contains a link to a page that performs a 301 redirect to the Static API with the specified map parameters.

The Map Constructor API lets you change the map settings by passing the desired parameters in the widget code. For example, you can set the map height and width, as well as the language. In addition, if the map is used for commercial purposes, the widget code should include the key for the Yandex.Maps API commercial license.

Interactive map

The interactive map is inserted on the page using the script element. The following map parameters can be set in the src attribute:

  • um — The map ID (required).

    Example of the parameter value: um=constructor%3A834e99a97453487e0b040c9619...

    Note. In previous versions of the Map Constructor, the map ID was set in the sid parameter. Example: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH. This parameter has been deprecated.
  • width — The width of the map in pixels or percentages. If this parameter is omitted, the map stretches to the entire width of the parent container.
  • height — The height of the map in pixels or percentages. If this parameter is omitted, the map stretches to the entire height of the parent container. If this parameter is specified as a percentage, you must set the height for the parent container, or the map won't be displayed.
  • id — The ID of the DOM element to embed the map in. Specified if the widget is inserted on the page in the <head> element.
  • lang — The locale. The following values are supported: ru_RU (default), ru_UA, uk_UA, en_RU, en_US, tr_TR. For more information, see the section Map localization.
  • scroll — Enable the “zooming the map with the mouse wheel” behavior. Accepts the value "true".
  • apikey — The API key for a Yandex.Maps API commercial license. Required if the map is used for commercial purposes. For more information, see Using the commercial version of the API.

Note. The widget can be inserted in either the body element or the head element. If the widget code is in the head element, the id parameter must be specified in the src attribute.

If the same widget code with the same id is inserted on a page multiple times, all the maps will be added to the DOM element with the specified id.

Several examples of embedding an interactive map on a page are shown below.

Example 1. Embedding an interactive map without specifying size

<!DOCTYPE html>
<html>
    <head>
        <title>Example with an interactive map</title>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8"></script>
    </body>
</html>

Example 2. Embedding an interactive map with set dimensions

<!DOCTYPE html>
<html>
    <head>
        <title>Example with an interactive map</title>
    </head>
    <body>
        <div style="width: 300px; height: 200px;">
            <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;width=514&amp;height=326"></script>
        </div>
    </body>
</html>

Example 3. Embedding an interactive map in a specific container

<!DOCTYPE html>
<html>
    <head>
        <title>Example with an interactive map in a specific container</title>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;width=514&amp;height=326&amp;id=mymap"></script>
    </head>
    <body>
        <div id="mymap"></div>
    </body>
</html>

Example 4. Embedding an interactive map in a container with set parameters

<!DOCTYPE html>
<html>
    <head>
        <title>Example with an interactive map in a specific container with set dimensions</title>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;id=mymap"></script>
    </head>
    <body>
        <div id="mymap" style="width: 300px; height: 200px"></div>
    </body>
</html>

Static map

A static map is inserted on a page using the img element. Map parameters that can be set in the src attribute:

  • um — The map ID (required).

    Example of the parameter value: um=constructor%3A834e99a97453487e0b040c9619...

    Note. In previous versions of the Map Constructor, the map ID was set in the sid parameter. Example: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH. This parameter has been deprecated.
  • width — The width of the map, in pixels (if omitted, it is taken from stored map parameters).
  • height — The height of the map, in pixels (if omitted, it is taken from stored map parameters).
  • lang — The locale. The following values are supported: ru_RU (default), ru_UA, uk_UA, en_RU, en_US, tr_TR. For more information, see the section Map localization.
  • apikey — The API key for a Yandex.Maps API commercial license. Required if the map is used for commercial purposes. For more information, see Using the commercial version of the API.

Note. The code snippet can only be embedded in the body element.

The examples below demonstrate placing a static map on a page.

Example 1. Embedding a static map without specifying the size

<!DOCTYPE html>
<html>
    <head>
        <title>Example with a static map</title>
    </head>
    <body>
        <img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;lang=ru_RU" alt="" style="border: 0;" alt=""/>
    </body>
</html>

Example 2. Embedding a static map with set dimensions

<!DOCTYPE html>
<html>
    <head>
        <title>Example with a static map</title>
    </head>
    <body>
        <img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;width=500&amp;height=400&amp;lang=ru_RU" alt="" style="border: 0;" />
    </body>
</html>

Using the commercial version of the API

The Commercial API is intended for commercial purposes. You can use it in closed systems, applications, and software modules. The commercial version is exempt from the restrictions that apply to the standard license (see point 2.3.7 in the Yandex.Maps API Terms of Use).

The commercial version applies to both interactive and static maps.

In order to use the commercial version of the API, the widget code must specify the apikey parameter, which is the API key obtained in the developer's dashboard. For example:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A834e99a97453487e0b040c9619bf7aa54450e75709460b9dc67802e2e589b9c8&amp;apikey=<API key>"></script>