Localize the map

You can customize the language and region settings used in your map by changing the default language settings and the map's region code, which can affect the behavior of the map based on the specified country or territory.

Review the coverage for 3D Maps in Maps JavaScript in the Maps coverage table.

Language localization

By default, the Maps JavaScript API uses the language settings that the user specifies in their browser to determine which translation of the map to use. However, you can change this, and set a specific language to be used by setting the language parameter when creating a 3D map. Language and region can be updated after the map is initialized.

Setting the language parameter affects the language that controls, tooltips, and copyright notices are displayed in. It also affects the translation of political features, descriptors, and natural features; such as changing "Geneva" to "Genève" or "lake" to "lac", or changing the direction that the language is rendered.

The 3D Maps in Maps JavaScript looks for localization preferences in the following order. If preferences aren't defined at the first step, then it continues looking in the specified order. Any conflicting localization instructions are resolved based on precedence defined below:

  1. Map3DElement definition. This is the first place that 3D Maps looks for localization preferences.
  2. Maps JavaScript API loader. The language specified when loading the Maps JavaScript API is used.
  3. Browser setting and domain. The browser setting is used for language, and the domain the Maps JavaScript API was loaded from is used for the region.

The following example displays a map in Chinese and sets the region to China:

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();

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',
        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>

Try Sample

Region localization

The region parameter can serve different map tiles or bias the application towards more regionally-appropriate results. Additionally, setting the region tag ensures that the application complies with local laws by ensuring that the correct regional localization is applied to the country where the application is hosted.