खास जानकारी

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.VECTOR या RenderingType.RASTER में से किसी एक को तय करने के लिए, renderingType विकल्प का इस्तेमाल करें:

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

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

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

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

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

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

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

उदाहरण

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