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

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

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

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

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

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

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

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'
});

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

यह पता लगाने के लिए कि किस तरह की रेंडरिंग का इस्तेमाल किया गया है, मैप ऑब्जेक्ट पर 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()}`);
  });```