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 हाइब्रिड" चुनना होगा और "लाइट मोड" का इस्तेमाल करना होगा.
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 Maps के साथ क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करते समय, कुछ बातों का ध्यान रखना ज़रूरी है:

• गहरे रंग वाला मोड काम नहीं करता.
• मैप आईडी की सुविधा के साथ काम करने वाली सुविधाएं, जैसे कि डेटा के हिसाब से स्टाइल तय करना काम नहीं करती हैं.