3D मैप को पसंद के मुताबिक बनाना

क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करके, 3D बेसमैप के लुक और स्टाइल को अपनी पसंद के मुताबिक बनाया जा सकता है.

क्लाउड पर मैप की स्टाइलिंग की सुविधा की मदद से, उपयोगकर्ताओं को दिखाए जाने वाले मैप के लुक और स्टाइल को कंट्रोल किया जा सकता है. लोकप्रिय जगहों (पीओआई) की डेंसिटी, कुछ पीओआई कैटगरी को हटाने, और सुविधाओं के फ़िल या स्ट्रोक में बदलाव करने जैसी सुविधाओं को कंट्रोल करके, उपयोगकर्ताओं के हिसाब से मैप का अनुभव तैयार किया जा सकता है.

क्लाउड पर मैप की स्टाइलिंग की सुविधा से, Google Cloud Console में बिना कोडिंग के मैप को स्टाइल किया जा सकता है. पसंद के मुताबिक बनाई गई हर स्टाइल, एक मैप आईडी से जुड़ी होती है. Maps Console में स्टाइल में किए गए बदलाव, आपके ऐप्लिकेशन में अपने-आप दिखने लगेंगे.

इस उदाहरण में एक मैप दिखाया गया है. इसमें पसंद के मुताबिक बनाई गई स्टाइल का इस्तेमाल करके, मनोरंजन की सुविधा वाले आइकॉन और टेक्स्ट का रंग बदलकर नारंगी किया गया है:

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

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
index.js

खास जानकारी

क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करके, 3D मैप को पसंद के मुताबिक बनाने की प्रोसेस, 2D मैप को पसंद के मुताबिक बनाने की प्रोसेस जैसी ही है:

1	मैप आईडी बनाना	मैप आईडी बनाएं. मैप आईडी, आपके ऐप्लिकेशन को पास किए जाते हैं, ताकि स्टाइलिंग को मैनेज किया जा सके. अगले चरणों में, इस मैप आईडी के साथ पसंद के मुताबिक बनाई गई स्टाइल को जोड़ा जाएगा.
2	क्लाउड पर मैप की स्टाइल बनाना	इस चरण में, "3D रोडमैप" (हल्के और गहरे रंग वाले मोड के साथ काम करता है) या "3D हाइब्रिड" (हल्के रंग वाले मोड के साथ काम करता है) को चुनें.
3	मैप की स्टाइल को किसी मैप से जोड़ना	अपनी स्टाइल को उस मैप आईडी से लिंक करें जिसे आपने पहले चरण में बनाया था
4	अपने ऐप्लिकेशन में मैप आईडी जोड़ना	map-id पैरामीटर का इस्तेमाल करके, अपने कोड में मैप आईडी की जानकारी दें.
5	मैप आईडी पब्लिश करना	ध्यान दें कि पसंद के मुताबिक बनाई गई स्टाइल में किए गए बदलाव, पब्लिश होने के बाद आपके ऐप्लिकेशन में अपने-आप शामिल हो जाते हैं.

मैप स्टाइल बनाने के बारे में ज़्यादा जानने के लिए, मैप स्टाइल बनाना और उनका इस्तेमाल करना लेख पढ़ें.

मैप आईडी को डाइनैमिक तौर पर अपडेट करना

मैप को इंस्टैंशिएट करने के बाद, mapId प्रॉपर्टी को डाइनैमिक तौर पर अपडेट किया जा सकता है. इससे आपको पूरे Map3DElement इंस्टेंस को फिर से बनाए बिना, क्लाउड पर आधारित मैप की अलग स्टाइल लागू करने की सुविधा मिलती है.

मैप आईडी अपडेट करने के लिए, Map3DElement इंस्टेंस पर mapId प्रॉपर्टी सेट करें:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

mapId प्रॉपर्टी, एचटीएमएल एट्रिब्यूट को दिखाती है. इसलिए, एट्रिब्यूट में बदलाव करके, इसे डाइनैमिक तौर पर भी अपडेट किया जा सकता है:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

सीमाएं

Maps JavaScript में 3D मैप के साथ क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करते समय, कुछ सीमाओं का ध्यान रखना ज़रूरी है:

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