खास जानकारी

Maps JavaScript API के लिए, WebGL की मदद से काम करने वाली सुविधाओं की मदद से, मैप को झुकाया और घुमाया जा सकता है. साथ ही, सीधे मैप पर 3D ऑब्जेक्ट जोड़े जा सकते हैं. इसमें ये सुविधाएं शामिल हैं:

  • WebGL ओवरले व्यू की मदद से, अपने मैप में पसंद के मुताबिक 2D और 3D ग्राफ़िक और ऐनिमेशन वाला कॉन्टेंट जोड़ा जा सकता है.
  • झुकाव और हेडिंग को अब प्रोग्राम के हिसाब से अडजस्ट किया जा सकता है. साथ ही, माउस और कीबोर्ड के जेस्चर का इस्तेमाल करके भी ऐसा किया जा सकता है.
  • map.moveCamera() की मदद से, एक साथ कई कैमरा प्रॉपर्टी बदली जा सकती हैं.
  • Zoom अब फ़्रैक्शनल वैल्यू के साथ काम करता है.

अपनी प्रोफ़ाइल बनाना शुरू करें

WebGL की नई सुविधाओं का इस्तेमाल करने के लिए, आपको वेक्टर मैप का इस्तेमाल करना होगा. इस सेक्शन में, इसका तरीका बताया गया है.

renderingType विकल्प की जानकारी दें

अपने मैप के लिए रेस्टर या वेक्टर रेंडरिंग टाइप तय करने के लिए, renderingType विकल्प का इस्तेमाल करें. इसके लिए, मैप आईडी की ज़रूरत नहीं है:

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

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

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

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

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

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

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

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

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

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

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

<gmp-map> एलिमेंट का इस्तेमाल करना

<gmp-map> एलिमेंट का इस्तेमाल करने पर, वेक्टर मैप, झुकाव, और हेडिंग डिफ़ॉल्ट रूप से चालू होते हैं. इस एलिमेंट की मदद से, एचटीएमएल का इस्तेमाल करके अपने पेज में मैप जोड़ा जा सकता है. ज़्यादा जानें.

उदाहरण

इन सुविधाओं को दिखाने के लिए उदाहरण दिए गए हैं: