Localizar o mapa

Para personalizar as configurações de idioma e região usadas no seu mapa, mude as configurações de idioma padrão e o código de região do mapa, o que pode afetar o comportamento do mapa com base no país ou território especificado.

Consulte a cobertura dos mapas 3D no Maps JavaScript na tabela de cobertura do Maps.

Localização de idioma

Por padrão, a API Maps JavaScript usa as configurações de idioma que o usuário especifica no navegador para determinar qual tradução do mapa usar. No entanto, é possível mudar isso e definir um idioma específico definindo o parâmetro language ao criar um mapa 3D. O idioma e a região podem ser atualizados após a inicialização do mapa.

Definir o parâmetro language afeta o idioma em que os controles, as dicas e as notificações de direitos autorais são exibidos. Isso também afeta a tradução de características políticas, descritores e características naturais, como mudar "Genebra" para "Genève" ou "lago" para "lac", ou mudar a direção em que o idioma é renderizado.

Os mapas 3D na API Maps JavaScript procuram preferências de localização na seguinte ordem. Se as preferências não forem definidas na primeira etapa, ele continuará procurando na ordem especificada. As instruções de localização conflitantes são resolvidas com base na precedência definida abaixo:

  1. Definição de Map3DElement. Esse é o primeiro lugar em que o 3D Maps procura as preferências de localização.
  2. Carregador da API Maps JavaScript. O idioma especificado ao carregar a API Maps JavaScript é usado.
  3. Configuração do navegador e domínio. A configuração do navegador é usada para o idioma, e o domínio de onde a API Maps JavaScript foi carregada é usado para a região.

O exemplo a seguir é de um mapa em chinês e a região definida como 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',
    });

    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>

Localização de regiões

O parâmetro region pode exibir blocos de mapas diferentes ou direcionar o aplicativo para resultados mais adequados à região. Além disso, definir a tag de região garante que o aplicativo obedeça às leis locais, aplicando a localização regional correta ao país em que o aplicativo está hospedado.