지도 현지화

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

지도 범위 표에서 지도 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',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

자바스크립트

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',
        gestureHandling: 'COOPERATIVE',
    });

    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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body></body>
</html>

샘플 사용해 보기

지역 현지화

region 매개변수는 다른 지도 타일을 제공하거나 애플리케이션을 더 지역에 적합한 결과로 편중할 수 있습니다. 또한 리전 태그를 설정하면 애플리케이션이 호스팅되는 국가에 올바른 지역 현지화가 적용되어 애플리케이션이 현지 법률을 준수할 수 있습니다.