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();

खास जानकारी

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

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