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

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

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

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

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

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