Изменение языка карты

Open in CodeSandbox

Map

API позволяет отображать карты, локализованные на различных языках с учётом специфики отдельных стран. Для того чтобы управлять локализацией, необходимо в HTTP-запросе передать локаль.

Локаль задается параметром lang:

lang=language_region

  • language — двузначный код языка в формате ISO 639-1. Задает язык объектов на карте (топонимов, элементов управления).
  • region — двузначный код страны в формате ISO 3166-1. Определяет региональные особенности, например единицу измерения (для обозначения расстояния между объектами или скорости движения по маршруту).

    Примечание. Для регионов RU, UA и TR расстояние показывается в километрах, для US — в милях.

На данный момент поддерживаются следующие локали:

  • lang=ru_RU;
  • lang=en_US;
  • lang=en_RU;
  • lang=ru_UA;
  • lang=uk_UA;
  • lang=tr_TR.

Подробней можно прочитать тут.

<!DOCTYPE html>
<html>
    <head>
        <title>Изменение языка карты</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <script src="language.js" type="text/javascript"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            #map {
                widht: 100%;
                height: 90%;
            }

            #language {
                cursor: pointer;
                margin-left: 5px;
                font-size: 100%;
            }
        </style>
    </head>
    <body>
        <select id="language">
            <option value="ru">ru</option>
            <option selected value="en">en</option>
        </select>
        <div id="map"></div>
    </body>
</html>

var myMap;
var script;

function init(ymaps) {
    myMap = new ymaps.Map(
        "map",
        {
            center: [55.9238145091058, 37.897131347654376],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );
}

window.onload = function () {
    // Получим ссылки на элементы с тегом 'head' и id 'language'.
    var head = document.getElementsByTagName("head")[0];
    var select = document.getElementById("language");
    select.createMap = function () {
        // Получим значение выбранного языка.
        var language = this.value;
        // Если карта уже была создана, то удалим её.
        if (myMap) {
            myMap.destroy();
        }
        // Создадим элемент 'script'.
        script = document.createElement("script");
        script.type = "text/javascript";
        script.charset = "utf-8";
        // Запишем ссылку на JS API Яндекс.Карт с выбранным языком в атрибут 'src'.
        script.src =
            "https://api-maps.yandex.ru/2.1/?onload=init_" +
            language +
            "&lang=" +
            language +
            "_RU&ns=ymaps_" +
            language;
        // Добавим элемент 'script' на страницу.
        head.appendChild(script);
        // Использование пространства имен позволяет избежать пересечения названий функций
        // и прочих программных компонентов.
        window["init_" + language] = function () {
            init(window["ymaps_" + language]);
        };
    };
    // Назначим обработчик для события выбора языка из списка.
    document
        .getElementById("language")
        .addEventListener("change", select.createMap);
    // Создадим карту и зададим для нее язык, который был выбран по умолчанию.
    select.createMap();
};