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

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

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

क्लाउड पर मैप की स्टाइलिंग की सुविधाओं की मदद से, Google Cloud 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	मैप आईडी पब्लिश करना	ध्यान दें कि पब्लिश करने के बाद, आपकी कस्टम स्टाइल में किए गए बदलाव, आपके ऐप्लिकेशन में अपने-आप शामिल हो जाते हैं.

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

ध्यान दें: फ़िलहाल, क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करके बनाए गए 3D मैप की झलक देखने की सुविधा उपलब्ध नहीं है. 3D स्टाइल बनाते समय, Google Cloud Console में "2D हाइब्रिड" विकल्प चुनें.

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

मैप को इंस्टैंशिएट करने के बाद, 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 के साथ, क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल करते समय, कुछ सीमाओं के बारे में पता होना चाहिए:

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