3D Maps के लिए सबसे सही तरीके

इस गाइड में, 3D Maps के वेब कॉम्पोनेंट के बारे में ज़्यादा जानकारी दी गई है. साथ ही, अपने ऐप्लिकेशन के साथ इंटिग्रेट करते समय ध्यान रखने वाली बातों के बारे में बताया गया है.

जगह खोजने और रास्ता ढूंढने का उदाहरण.

परफ़ॉर्मेंस से जुड़ी ज़रूरी बातें

इंटरैक्टिविटी और विज़ुअल एलिमेंट के लिए, बेहतर और रिस्पॉन्सिव अनुभव देने के लिए, इन तरीकों को अपनाएं.

मैप लोड करना

3D मैप के शुरुआती लोड और रेंडरिंग सेटअप में, ब्राउज़र कॉन्फ़िगरेशन की तकनीकें और यूज़र इंटरफ़ेस (यूआई) के सबसे सही तरीके शामिल होते हैं. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है.

• एपीआई लोड: पेज लोड होने पर, Maps JavaScript API को लोड करने के लिए, 3D Maps की एसिंक्रोनस डाइनैमिक लोडिंग का इस्तेमाल करें.
• लाइब्रेरी: ज़रूरत के हिसाब से लाइब्रेरी को प्रोग्राम के हिसाब से लोड करें. जैसे, google.maps.importLibrary("maps3d"). इसके अलावा, अगर डायरेक्ट स्क्रिप्ट लोडिंग की मदद से, सीधे अपने एचटीएमएल पेज में <gmp-map-3d> जैसे वेब कॉम्पोनेंट का इस्तेमाल किया जाता है, तो लाइब्रेरी सही समय पर अपने-आप लोड हो जाएंगी
• बुनियादी मैप की सुविधाएं मैनेज करना: कस्टम mapId का इस्तेमाल करके, बुनियादी मैप की लोकप्रिय जगहों (हाइब्रिड मोड) को फ़िल्टर करें और उनकी डेंसिटी को कंट्रोल करें. खास तौर पर, तब जब ऐप्लिकेशन में कस्टम एलिमेंट का अपना सेट हो, जैसे कि मार्कर या पॉलीलाइन. इससे विज़ुअल क्लटर और ओवरलैप होने की संभावना कम हो जाती है. इसके अलावा, बुनियादी मैप की वेक्टर टाइल की सुविधाओं को बंद किया जा सकता है. जैसे, लोकप्रिय जगहें, सड़क की पॉलीलाइन, सड़क के नाम, और गली के नाम (सैटलाइट मोड).
• इवेंट: gmp-steadystate या gmp-error इवेंट सुनें, ताकि बाद में लॉजिक बनाया जा सके. जैसे, मार्कर लोड करना, कैमरे को ऐनिमेट करना.

बैकग्राउंड कैनवस > छोटी की गई टाइल > इलाके का मेश > सतह का मेश (जैसे: इमारतें) > दिलचस्प जगहें और सड़क के लेबल, कस्टम एलिमेंट एक साथ लोड हो रहे हैं (मार्कर, 3D मॉडल वगैरह)

• उपयोगकर्ता इंटरैक्शन: मैप के कॉन्टेंट में बदलाव करने से पहले, gmp-steadystate इवेंट का इंतज़ार करें. अगर कोई उपयोगकर्ता शुरुआती gmp-steadystate इवेंट से पहले, मैप के साथ इंटरैक्ट (पैन, ज़ूम) करना शुरू करता है, तो इवेंट सिर्फ़ तब ट्रिगर होगा, जब उपयोगकर्ता इंटरैक्ट करना बंद कर देगा. जब उपयोगकर्ता मैप को पैन या ज़ूम कर रहा हो, तब ओवरले कॉन्टेंट (जैसे, मार्कर या पॉलीगॉन) दिखाने या अपडेट करने से बचें. साथ ही, gmp-centerchange, gmp-headingchange, gmp-rangechange, gmp-rollchange, और gmp-tiltchange को सुनकर, ओवरले कॉन्टेंट (जैसे, मार्कर या पॉलीगॉन) दिखाने या अपडेट करने से बचें.

• लगातार अपडेट के लिए, requestAnimationFrame() (rAF) का इस्तेमाल करें. साथ ही, ड्रॉ करने के लिए कॉल से, ज़्यादा कैलकुलेशन को अलग रखें.

  • rAF का इस्तेमाल करें: यह ब्राउज़र के डिसप्ले रेट के साथ अपडेट को सिंक करता है, ताकि 60FPS ऐनिमेशन आसानी से दिखे और बिजली की खपत कम हो.
  • ज़्यादा ड्रॉ वर्क से बचें: फ़ाइनल अपडेट के दौरान, ड्रॉइंग से जुड़े ऐसे काम न करें जिनमें ज़्यादा समय लगता है.
  • अलग लॉजिक: rAF लूप में कम से कम वेब कॉम्पोनेंट अपडेट कॉल से पहले, सभी इंटेंसिव लॉजिक को लागू करें.

• शुरुआती सीन की सेटिंग: <gmp-map-3d> कैमरे की सेटिंग, जैसे कि टिल्ट से लोड होने की स्पीड पर असर पड़ेगा. सीन को जितना ज़्यादा ज़ूम या टिल्ट किया जाएगा, उतने ही ज़्यादा पॉलीगॉन दिखेंगे. साथ ही, उन्हें लोड होने में ज़्यादा समय लगेगा. जानकारी का लेवल, जगह पर भी निर्भर करेगा. जैसे, कई इमारतों वाले शहर और सिर्फ़ प्राकृतिक सुविधाओं वाले ग्रामीण इलाके.

  • कम ज़ूम-इन (ज़्यादा ऊंचाई), कम या बिना झुकाव वाले व्यू को प्राथमिकता दें.
  • मैप में बाउंड (सैंपल) जोड़ें, ताकि उपयोगकर्ता किसी खास इलाके पर फ़ोकस कर सकें और टाइल पूरी तरह से लोड हो सकें.

• प्रीलोडर विज़ुअल: <gmp-map-3d> बहुत तेज़ी से लोड होता है. हालांकि, कम जीपीयू वाले डिवाइसों या कम बैंडविड्थ (धीमे 4G) वाले उपयोगकर्ताओं के लिए, इसे फ़ुल रिज़ॉल्यूशन में दिखने में कुछ समय लग सकता है. ऐसे में, इमेज, ऐनिमेशन या टेक्स्ट के साथ प्रीलोडर बनाया जा सकता है. इसमें बैकग्राउंड में 3D सीन लोड होता है. इस्तेमाल करने के लिए मुख्य इवेंट देखें:

प्रीलोडर का उदाहरण

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

• 2D मैप:
  • इन उपयोगकर्ताओं को एक वैकल्पिक 2D मैप (SATELLITE) डिलीवर किया जा सकता है. इसमें मार्कर जैसा आपका जियो डेटा भी शामिल होता है.

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

ध्यान दें: फ़िलहाल, हर 2D और 3D मैप लोड के लिए अलग-अलग बिल जनरेट किया जाता है. इसलिए, दूसरा मैप सिर्फ़ तब रेंडर करें, जब उपयोगकर्ताओं को उससे इंटरैक्ट करना हो.

विज़ुअल एलिमेंट की परफ़ॉर्मेंस और मैनेजमेंट

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

मार्कर

उदाहरण: 41 अलग-अलग एसवीजी मार्कर ग्लिफ़ वाले 300 मार्कर लोड करने में 150 से 300 मिलीसेकंड लगते हैं (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• पसंद के मुताबिक बनाने का सबसे सही विकल्प:
  • PinElement: मार्कर में बुनियादी बदलाव (रंग, स्केल, बॉर्डर, टेक्स्ट ग्लिफ़) करने के लिए, <gmp-pin> एलिमेंट या PinElement क्लास का इस्तेमाल करें. यह कस्टमाइज़ेशन का सबसे बेहतर तरीका है.
  • HTMLImageElement या SVGElement मार्कर का इस्तेमाल कम से कम करें: इनका इस्तेमाल ज़्यादा कस्टमाइज़ेशन के लिए करें. जैसे, पारदर्शिता जोड़ना या SVGElement में आइकॉन जैसी इमेज इंजेक्ट करना. इसके लिए, base64 एन्कोडिंग की ज़रूरत होती है. इन्हें लोड होने पर रास्टराइज़ किया जाएगा. साथ ही, इनमें परफ़ॉर्मेंस ओवरहेड शामिल होगा. Marker3DElement के डिफ़ॉल्ट स्लॉट में असाइन करने से पहले, HTMLImageElement और SVGElement को <template> एलिमेंट में रैप करना ज़रूरी है.
  • फ़िलहाल, सादा एचटीएमएल या सीएसएस जोड़ने की सुविधा उपलब्ध नहीं है.
• एक से ज़्यादा मार्कर कंट्रोल करने से जुड़ी सेटिंग मैनेज करना: मार्कर की collisionBehavior प्रॉपर्टी का फ़ायदा लें. ऐसे ज़रूरी मार्कर जो हमेशा दिखने चाहिए उनके लिए, ज़रूरत के हिसाब से व्यवहार सेट करें. कम ज़रूरी मार्कर को छिपाने की अनुमति दें, ताकि मैप पर ज़्यादा भीड़ न दिखे और वह साफ़-सुथरा लगे. खास तौर पर, ज़ूम करने के ज़्यादा लेवल पर.
• सिर्फ़ ज़रूरी लोकप्रिय जगहों के लिए: drawsWhenOccluded का इस्तेमाल सिर्फ़ उन मार्कर के लिए करें जिन्हें इमारतों या इलाके के पीछे से देखना ज़रूरी है.जैसे, बचाव का टारगेट, ज़मीन के नीचे दबी हुई कोई यूटिलिटी लाइन या उपयोगकर्ता का अवतार. इसके अलावा, प्रोग्राम के हिसाब से प्रॉपर्टी सेट करें.
• ऑक्लूज़न की जांच करना: मैप 3D होने की वजह से, मार्कर इमारतों या इलाके की बनावट से छिप सकते हैं. अलग-अलग कैमरा ऐंगल और मार्कर की ऊंचाई को टेस्ट करें, ताकि यह पक्का किया जा सके कि अहम लोकप्रिय जगहें दिखती रहें. इसके अलावा, लोकप्रिय जगहों के छिप जाने पर, उनकी विज़िबिलिटी और ऊंचाई को अडजस्ट करने के लिए लॉजिक लागू करें.
• ऊंचाई का फ़ायदा लें: 3D मैप में, मार्कर को ऊंचाई की वैल्यू के साथ पोज़िशन का इस्तेमाल करना चाहिए. इलाके या इमारतों से जुड़े मार्कर के लिए, altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' या मिलती-जुलती सेटिंग का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि मैप को झुकाने या घुमाने पर, मार्कर सही तरीके से ऐंकर हो.

पॉलीगॉन और पॉलीलाइन

उदाहरण के लिए: 1,000 पॉलीगॉन लोड करने में 100 से 150 मिलीसेकंड लगते हैं (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• ज्यामिति को आसान बनाएं: रेंडर करने से पहले, अपने पाथ डेटा पर आसान बनाने वाला एल्गोरिदम लागू करें. इससे सामान्य आकार को बनाए रखते हुए, वर्टेक्स की संख्या कम हो जाती है. इससे रेंडरिंग की स्पीड काफ़ी बढ़ जाती है. खास तौर पर, जटिल सीमाओं या रास्तों के लिए.
• ज़ूम करने के लेवल के हिसाब से डेटा कम करना: बहुत बड़े डेटासेट के लिए, ज़्यादा जानकारी वाली ज्यामिति सिर्फ़ तब लोड करें, जब उपयोगकर्ता ने उस इलाके को ज़ूम इन किया हो. ज़ूम करने के कम लेवल पर, पॉलीलाइन या पॉलीगॉन का सिर्फ़ एक आसान वर्शन ज़रूरी होता है.
• एक्सट्रूडेड पॉलीगॉन के लिए पहले से कैलकुलेट करना: अगर आपके पॉलीगॉन एक्सट्रूडेड (extruded: true) हैं, तो पाथ डेटा 3D वॉल्यूम (मेश) को तय करता है. ज़्यादा वर्टेक्स वाले जटिल पॉलीगॉन को प्रोसेस करने में, कंप्यूटेशनल पावर का ज़्यादा इस्तेमाल होता है. पक्का करें कि आपके पॉलीगॉन का सोर्स डेटा ज़्यादा से ज़्यादा आसान हो.
• पॉलीलाइन और पॉलीगॉन की परफ़ॉर्मेंस की जांच करें: कई या जटिल पॉलीलाइन/पॉलीगॉन जोड़ते समय, खास तौर पर 3D के लिए एक्सट्रूड करते समय, पक्का करें कि इनसे फ़्रेम रेट में गिरावट न आए. वर्टेक्स की संख्या को सीमित करें या ज़रूरत पड़ने पर, सिंपलिफ़िकेशन एल्गोरिदम का इस्तेमाल करें.
• किसी आकार को अपडेट करते समय, अलग-अलग एलिमेंट को लूप करने और उनमें बदलाव करने के बजाय, एक ही कार्रवाई में पूरे पाथ कलेक्शन में बदलाव करें. एक ही असाइनमेंट ऑपरेशन (जैसे, polyline.path = newPathArray;) बार-बार होने वाले कई अपडेट की तुलना में ज़्यादा असरदार होता है.
• जहां तक हो सके, एक्सट्रूडेड पॉलीलाइन का इस्तेमाल करने से बचें: पॉलीलाइन को 3D स्पेस में दिखाने के लिए, ऊंचाई की वैल्यू का इस्तेमाल किया जा सकता है. हालांकि, पॉलीलाइन को एक्सट्रूड करने (जैसे, उसे स्ट्रोक-विड्थ और ऊंचाई की बड़ी रेंज देना) से ग्राफ़िक पर ज़्यादा असर पड़ सकता है. बेहतर परफ़ॉर्मेंस के लिए, जब भी संभव हो, ज़मीन पर 2D पॉलीलाइन (RELATIVE_TO_GROUND) या कम से कम स्ट्रोक-विड्थ का इस्तेमाल करें.
• सिर्फ़ ज़रूरी रूटिंग एलिमेंट के लिए, drawsOccludedSegments का इस्तेमाल करें. बैकग्राउंड या कॉन्टेक्स्ट के हिसाब से इस्तेमाल किए जाने वाले शेप के लिए, उन्हें मैप की 3D ज्यामिति से नैचुरल तरीके से छिपाने की अनुमति दें. छिपी हुई ऐसी ज्यामिति को दिखाने से रेंडरिंग की प्रोसेस मुश्किल हो जाती है जो ज़रूरी नहीं है.

3D मॉडल

<gmp-map-3d> में, 3D मॉडल .glb रेंडरिंग और इंटरैक्टिविटी, जैसे कि gmp-click इवेंट पर क्लिक करना बहुत तेज़ी से काम करते हैं.

उदाहरण: किसी पाथ पर मूव करने वाले हल्के 3D मॉडल (200 केबी) को 1,000 बार दिखाने में करीब दो सेकंड लगते हैं. (मॉडर्न लैपटॉप: macOS M3 Pro, Chrome)

• फ़ाइल को कंप्रेस करके उसका साइज़ कम करना: फ़ाइलें तेज़ी से लोड हों, इसके लिए .glb फ़ॉर्मैट वाली जटिल मॉडल फ़ाइलों का साइज़ 5 एमबी से कम रखें. खास तौर पर, मोबाइल नेटवर्क पर ऐसा करना ज़रूरी है. इसके लिए, अपनी .glb फ़ाइलों में मौजूद मेश डेटा पर Draco कंप्रेशन लागू करें. इससे फ़ाइल का साइज़ काफ़ी कम हो सकता है. अक्सर यह 50% से ज़्यादा कम हो जाता है. हालांकि, इससे विज़ुअल क्वालिटी पर बहुत कम असर पड़ता है.
• मॉडल के ऑरिजिन को सेंटर में रखें: पक्का करें कि 3D मॉडलिंग सॉफ़्टवेयर, मॉडल को उसके ऑरिजिन (0, 0, 0 पॉइंट) के साथ एक्सपोर्ट करे. यह ऑरिजिन, मॉडल के बेस के सेंटर में होना चाहिए. इससे मैप पर मॉडल को सही जगह पर सेट करना और उसे घुमाना आसान हो जाता है. साथ ही, यह पक्का किया जा सकता है कि मॉडल, अक्षांश और देशांतर के निर्देशांकों के हिसाब से सही जगह पर सेट हो.
• सीओआरएस मैनेज करना: अगर आपकी मॉडल फ़ाइलें, आपके वेब ऐप्लिकेशन के बजाय किसी दूसरे डोमेन या सीडीएन पर होस्ट की गई हैं, तो आपको होस्टिंग सर्वर को कॉन्फ़िगर करना होगा. इससे, ज़रूरी क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) हेडर (उदाहरण के लिए, Access-Control-Allow-Origin: *) शामिल किए जा सकेंगे. ऐसा न करने पर, मैप पर मॉडल लोड नहीं होगा.