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

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

मैप कवरेज टेबल में, 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',
        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();

सीएसएस

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

सैंपल आज़माएं

इलाके के हिसाब से स्थानीय भाषा में लिखना

region पैरामीटर, अलग-अलग मैप टाइल दिखा सकता है. इसके अलावा, यह ऐप्लिकेशन को ऐसे नतीजे दिखाने के लिए भी प्रेरित कर सकता है जो इलाके के हिसाब से ज़्यादा सही हों. इसके अलावा, क्षेत्र का टैग सेट करने से यह पक्का किया जा सकता है कि ऐप्लिकेशन स्थानीय कानूनों का पालन करता है. ऐसा इसलिए, क्योंकि इससे यह पक्का किया जा सकता है कि ऐप्लिकेशन को उस देश के हिसाब से सही तरीके से स्थानीय भाषा में बनाया गया हो जहाँ इसे होस्ट किया गया है.