Map Constructor

Map Constructor is an easy-to-use online tool for creating custom maps with directions and marked points of interest. You can post the maps you create on your website or blog, including via the paid Yandex Maps API.

To display a map on a webpage, just copy the widget code generated by Map Constructor and embed it on the page.

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

With Map Constructor, you can change your map settings by passing parameters in the widget code. For example, you can set the map height and width, as well as its language.

You can't change the Map Constructor widget code that is generated with the iframe element.

Interactive map

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

  • um — the map ID (required).

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

    Note

    In previous versions of Map Constructor, the map ID was set using 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 element <head>.

  • 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 Map localization.

  • scroll — Enable the “zooming the map with the mouse wheel” behavior. Accepts the value "true".

  • apikeyYandex Maps API key. If the API key is not specified, the map will not display the following controls: the search bar, button for the route building, and panoramas.

Note

The widget can be inserted in either the body element or the head element. If your widget code is in the head element, you need to set the id parameter 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 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%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&width=514&height=326&lang=en_US&apikey=<API-key>"></script>
        </div>
    </body>
</html>

Example 2. Embedding an interactive map in a defined 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%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&width=514&height=326&id=mymap&lang=en_US&apikey=<API-key>"></script>
    </head>
    <body>
        <div id="mymap"></div>
    </body>
</html>

Example 3. Embedding an interactive map in a container with set dimensions

<!DOCTYPE html>
<html>
    <head>
        <title>Example with an interactive map in a specific container with a specified size</title>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&id=mymap&lang=en_US&apikey=<API-key>"></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 parameter value: um=constructor%3A834e99a97453487e0b040c9619...

    Note

    In previous versions of Map Constructor, the map ID was set using 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 Map localization.

  • apikeyYandex Maps API key.

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 its size

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

Example 2. Embedding a static map with set dimensions

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