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

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

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

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

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

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