Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

खास जानकारी

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

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

शुरू करें

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

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

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

RenderingType लाइब्रेरी लोड करें. इसे Maps लाइब्रेरी लोड करते समय किया जा सकता है:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```
मैप को शुरू करते समय, 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> एलिमेंट का इस्तेमाल करने पर, वेक्टर मैप, झुकाव, और हेडिंग की सुविधाएं डिफ़ॉल्ट रूप से चालू हो जाती हैं. इस एलिमेंट की मदद से, एचटीएमएल का इस्तेमाल करके अपने पेज में मैप जोड़ा जा सकता है. ज़्यादा जानें.

उदाहरण

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