지도 현지화

기본 언어 설정과 지도의 지역 코드를 변경하여 지도에 사용되는 언어 및 지역 설정을 맞춤설정할 수 있습니다. 이렇게 하면 지정된 국가 또는 지역에 따라 지도의 동작이 달라질 수 있습니다.

지도 범위 표에서 지도 JavaScript의 3D 지도 범위를 검토합니다.

언어 현지화

기본적으로 Maps JavaScript API는 사용자가 브라우저에 지정한 언어 설정을 사용하여 사용할 지도의 번역을 결정합니다. 하지만 3D 지도를 만들 때 language 매개변수를 설정하여 이 설정을 변경하고 사용할 특정 언어를 설정할 수 있습니다. 지도가 초기화된 후 언어 및 리전을 업데이트할 수 있습니다.

language 매개변수를 설정하면 컨트롤, 도움말, 저작권 고지가 표시되는 언어에 영향을 미칩니다. 또한 정치적 지형지물, 설명어, 자연 지형지물의 번역에도 영향을 미칩니다. 예를 들어 'Geneva'를 'Genève'로, 'lake'를 'lac'으로 변경하거나 언어가 렌더링되는 방향을 변경할 수 있습니다.

Maps JavaScript의 3D 지도는 다음 순서로 현지화 환경설정을 찾습니다. 첫 번째 단계에서 환경설정이 정의되지 않으면 지정된 순서대로 계속 찾습니다. 충돌하는 현지화 안내는 아래에 정의된 우선순위에 따라 해결됩니다.

  1. Map3DElement 정의 3D 지도에서 현지화 환경설정을 찾는 첫 번째 위치입니다.
  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 매개변수는 다른 지도 타일을 제공하거나 애플리케이션을 지역에 더 적합한 결과로 편향시킬 수 있습니다. 또한 지역 태그를 설정하면 애플리케이션이 호스팅되는 국가에 올바른 지역 현지화가 적용되므로 애플리케이션이 현지 법률을 준수할 수 있습니다.