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

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

Maps JavaScript में 3D Maps की उपलब्धता के बारे में जानने के लिए, 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();

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