मैप मोड बदलना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

रोडमैप मोड, झलक (प्री-जीए) के तौर पर उपलब्ध है. हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं के लिए, आपको पूरी सहायता न मिले. साथ ही, ऐसा हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA के अन्य वर्शन के साथ काम न करें. Pre-GA ऑफ़र पर, Google Maps Platform की सेवा से जुड़ी खास शर्तें लागू होती हैं. ज़्यादा जानकारी के लिए, लॉन्च के चरणों की जानकारी देखें.

Maps JavaScript में 3D Maps के लिए, ये 3D मैप मोड उपलब्ध हैं:

• ROADMAP से, बुनियादी मैप के लेबल के साथ डिफ़ॉल्ट रोडमैप व्यू दिखता है.
• SATELLITE, प्लेन से ली गई तस्वीरों के आधार पर, फ़ोटो जैसा मैप दिखाता है.
• HYBRID में, बुनियादी मैप के लेबल के साथ सैटलाइट मैप व्यू दिखता है.

यहां ROADMAP मोड में 3D मैप का एक उदाहरण दिया गया है:

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });

    document.body.append(map);

    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');

    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';

    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });

    selector.addEventListener('change', function () {
        map.mode = this.value as google.maps.maps3d.MapModeString;
    });

    controls.appendChild(selector);
    document.body.appendChild(controls);
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });

    document.body.append(map);

    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');

    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';

    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });

    selector.addEventListener('change', function () {
        map.mode = this.value;
    });

    controls.appendChild(selector);
    document.body.appendChild(controls);
}

void init();
index.js

सीएसएस

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
    height: 100%;
    width: 100%;
}

.map-mode-control {
    position: fixed;
    bottom: 125px;
    right: 0px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.map-mode-control select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background-color: white;
    color: #3c4043;
    cursor: pointer;
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.map-mode-control select:hover {
    border-color: #1a73e8;
}

.map-mode-control select:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}
style.css

एचटीएमएल

<html>
    <head>
        <title>3d-map-roadmap</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",
                v: "beta" 
            });
        </script>
    </head>

    <body></body>
</html>
index.html

उपयोग के उदाहरण

• रोडमैप: यह उन ऐप्लिकेशन के लिए सबसे सही है जिनमें नेविगेशन की सुविधा का ज़्यादा इस्तेमाल होता है. इनमें, आसानी से पढ़ा जा सकने वाला डेटा और सड़क के लेवल का डेटा सबसे अहम होता है.
• सैटलाइट और हाइब्रिड: यह रीयल एस्टेट, पर्यावरण की निगरानी या पर्यटन से जुड़े ऐप्लिकेशन के लिए सबसे सही है. इन ऐप्लिकेशन में, विज़ुअल फ़िडेलिटी और इलाके की जानकारी ज़रूरी होती है.