Как локализовать карту

Вы можете настроить язык и регион, используемые на карте, изменив настройки языка по умолчанию и код региона карты. Это может повлиять на поведение карты в зависимости от указанной страны или территории.

Сведения о доступности 3D-карт вы найдете в таблице покрытия в Maps JavaScript.

Языковая локализация

По умолчанию Maps JavaScript API определяет язык карты на основе настроек браузера пользователя. Однако вы можете изменить это и задать определенный язык, установив параметр language при создании 3D-карты. Язык и регион можно изменить после инициализации карты.

Параметр language влияет на язык элементов управления, подсказок и уведомлений об авторских правах. Он также влияет на перевод политических объектов, дескрипторов и природных объектов, например "Geneva" на "Genève" или "lake" на "lac", а также на направление письма.

3D-карты в Maps JavaScript ищут настройки локализации в следующем порядке. Если на первом шаге настройки не заданы, то поиск продолжается в указанном порядке. Если инструкции по локализации противоречат друг другу, они выполняются в следующем порядке:

  1. Определение Map3DElement. Это первое место, где 3D Maps ищет настройки локализации.
  2. Загрузчик Maps JavaScript API. Используется язык, указанный при загрузке Maps JavaScript API.
  3. Настройки браузера и домен. Язык определяется по настройкам браузера, а регион – по домену, из которого загружен Maps JavaScript API.

В следующем примере показана карта на китайском с установкой региона "Китай":

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 49.75371685807847,
            lng: -123.13227141171181,
            altitude: 30,
        },
        tilt: 50.64793990040634,
        heading: 44.480020261589154,
        range: 51618.36056532338,
        language: 'ZH',
        region: 'CN',
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 49.75371685807847,
            lng: -123.13227141171181,
            altitude: 30,
        },
        tilt: 50.64793990040634,
        heading: 44.480020261589154,
        range: 51618.36056532338,
        language: 'ZH',
        region: 'CN',
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#gmp-map-3d {
    height: 100%;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>3d localization</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body></body>
</html>

Локализация для региона

Параметр region позволяет показывать разные фрагменты карты или настраивать приложение так, чтобы оно выдавало результаты, более подходящие для определенного региона. Кроме того, тег региона обеспечивает соответствие приложения местному законодательству, поскольку в нем применяется правильная региональная локализация для страны, в которой размещено приложение.