खास जानकारी

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

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

शुरू करें

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

उदाहरण

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