मैप को स्थानीय भाषा में दिखाना

मैप में इस्तेमाल की जाने वाली भाषा और इलाके की सेटिंग को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, डिफ़ॉल्ट भाषा की सेटिंग और मैप के इलाके का कोड बदलें. इससे, चुने गए देश या इलाके के हिसाब से मैप के काम करने के तरीके पर असर पड़ सकता है.

Maps कवरेज टेबल में, Maps JavaScript में 3D Maps के कवरेज की समीक्षा करें.

लैंग्वेज लोकलाइज़ेशन

Maps JavaScript API, डिफ़ॉल्ट रूप से भाषा की उन सेटिंग का इस्तेमाल करता है जिन्हें उपयोगकर्ता अपने ब्राउज़र में तय करता है. इससे यह तय किया जाता है कि मैप के किस अनुवाद का इस्तेमाल करना है. हालांकि, इसे बदला जा सकता है. इसके लिए, 3D मैप बनाते समय language पैरामीटर सेट करके, इस्तेमाल की जाने वाली भाषा सेट करें. मैप शुरू होने के बाद, भाषा और इलाके को अपडेट किया जा सकता है.

language पैरामीटर सेट करने से, उस भाषा पर असर पड़ता है जिसमें कंट्रोल, टूलटिप, और कॉपीराइट नोटिस दिखाए जाते हैं. इससे राजनैतिक सुविधाओं, जानकारी देने वाले शब्दों, और प्राकृतिक सुविधाओं के अनुवाद पर भी असर पड़ता है. जैसे, "Geneva" को "Genève" या "lake" को "lac" में बदलना या भाषा को रेंडर करने की दिशा बदलना.

Maps JavaScript में 3D Maps, स्थानीय भाषा की सेटिंग को इस क्रम में ढूंढता है. अगर पहले चरण में प्राथमिकताएं तय नहीं की गई हैं, तो यह तय किए गए क्रम में देखना जारी रखता है. स्थानीय भाषा में अनुवाद करने से जुड़े किसी भी निर्देश में टकराव होने पर, उसे यहां दी गई प्राथमिकता के आधार पर हल किया जाता है:

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

सीएसएस

/* 
 * 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>
    <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 पैरामीटर, अलग-अलग मैप टाइल दिखा सकता है या ऐप्लिकेशन को क्षेत्र के हिसाब से ज़्यादा सही नतीजे दिखाने के लिए बायस कर सकता है. इसके अलावा, क्षेत्र टैग सेट करने से यह पक्का होता है कि ऐप्लिकेशन स्थानीय कानूनों का पालन करता है. इसके लिए, यह पक्का किया जाता है कि ऐप्लिकेशन को होस्ट करने वाले देश के लिए, सही क्षेत्रीय स्थानीय भाषा लागू की गई हो.