रेंडरिंग टाइप (रास्टर और वेक्टर)

Maps JavaScript API, मैप को दो अलग-अलग तरीकों से लागू करने की सुविधा देता है: रास्टर और वेक्टर. रास्टर मैप, मैप को पिक्सल पर आधारित रास्टर इमेज टाइल के ग्रिड के तौर पर लोड करता है. ये टाइल, Google Maps Platform के सर्वर-साइड से जनरेट होती हैं. इसके बाद, इन्हें आपके वेब ऐप्लिकेशन पर दिखाया जाता है. वेक्टर मैप, वेक्टर पर आधारित टाइल से बना होता है. इन्हें WebGL का इस्तेमाल करके, क्लाइंट-साइड पर लोड होने के समय बनाया जाता है. WebGL एक वेब टेक्नोलॉजी है, जो ब्राउज़र को उपयोगकर्ता के डिवाइस पर जीपीयू को ऐक्सेस करने की अनुमति देती है, ताकि 2D और 3D ग्राफ़िक रेंडर किए जा सकें.

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

डिफ़ॉल्ट रेंडरिंग टाइप

मैप का डिफ़ॉल्ट रेंडरिंग टाइप, आपके लागू करने के तरीके के हिसाब से अलग-अलग होता है.

  • <gmp-map> एलिमेंट का इस्तेमाल करने वाले मैप, डिफ़ॉल्ट रूप से वेक्टर रेंडरिंग टाइप पर सेट होते हैं.

  • <div> एलिमेंट का इस्तेमाल करने वाले मैप, डिफ़ॉल्ट रूप से google.maps.Map रास्टर रेंडरिंग टाइप का इस्तेमाल करते हैं.

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

renderingType का विकल्प बताएं

अपने मैप के लिए, रास्टर या वेक्टर रेंडरिंग टाइप तय करने के लिए, renderingType विकल्प का इस्तेमाल करें. इसके लिए, मैप आईडी की ज़रूरत नहीं है. div एलिमेंट और JavaScript का इस्तेमाल करके लोड किए गए मैप के लिए, रेंडरिंग का डिफ़ॉल्ट टाइप google.maps.RenderingType.RASTER होता है. renderingType विकल्प सेट करने के लिए, यह तरीका अपनाएं:

  1. RenderingType लाइब्रेरी लोड करें. Maps लाइब्रेरी लोड करते समय ऐसा किया जा सकता है:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. मैप को शुरू करते समय, renderingType विकल्प का इस्तेमाल करके RenderingType.VECTOR या RenderingType.RASTER में से कोई एक चुनें:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

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

  • मैप को झुकाने की सुविधा चालू करने के लिए, tiltInteractionEnabled मैप विकल्प को true पर सेट करें या map.setTiltInteractionEnabled(true) को कॉल करें.
  • पैन करने की सुविधा चालू करने के लिए, headingInteractionEnabled मैप विकल्प को true पर सेट करें या map.setHeadingInteractionEnabled(true) को कॉल करें.

<gmp-map> एलिमेंट का इस्तेमाल करके लोड किए गए मैप के लिए, रेंडरिंग का डिफ़ॉल्ट टाइप google.maps.RenderingType.VECTOR है. इसमें झुकाने और हेडिंग कंट्रोल की सुविधा चालू होती है. <gmp-map> एलिमेंट का इस्तेमाल करके रेंडरिंग टाइप सेट करने के लिए, rendering-type एट्रिब्यूट का इस्तेमाल करें.

रेंडरिंग टाइप सेट करने के लिए, मैप आईडी का इस्तेमाल करना

मैप आईडी का इस्तेमाल करके भी रेंडरिंग टाइप तय किया जा सकता है. क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करना - मैप आईडी पाना में दिया गया तरीका अपनाकर, मैप आईडी बनाएं. मैप टाइप को JavaScript पर सेट करना न भूलें. साथ ही, कोई विकल्प (वेक्टर या रास्टर) चुनें. मैप को झुकाने और घुमाने की सुविधा चालू करने के लिए, झुकाएं और घुमाएं को चुनें. ऐसा करने से, प्रोग्राम के हिसाब से इन वैल्यू में बदलाव किया जा सकेगा. साथ ही, उपयोगकर्ता सीधे मैप पर टिल्ट और हेडिंग में बदलाव कर सकेंगे. अगर झुकाव या हेडिंग का इस्तेमाल करने से आपके ऐप्लिकेशन पर बुरा असर पड़ता है, तो झुकाव और घुमाव से सही का निशान हटा दें. इससे उपयोगकर्ता, झुकाव और घुमाव को अडजस्ट नहीं कर पाएंगे.

वेक्टर मैप आईडी बनाना

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

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

यह पता लगाना कि किस तरह की रेंडरिंग का इस्तेमाल किया जा रहा है

रेंडरिंग के किस टाइप का इस्तेमाल किया जा रहा है, इसका पता लगाने के लिए मैप ऑब्जेक्ट पर getRenderingType() को कॉल करें. इसके बारे में यहां दिए गए उदाहरण में बताया गया है:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```