वेक्टर मैप

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

वेक्टर मैप वही Google मैप है जिसका इस्तेमाल आपके उपयोगकर्ता जानते हैं. साथ ही, डिफ़ॉल्ट रास्टर टाइल मैप से कई फ़ायदे मिलते हैं. इनमें वेक्टर आधारित इमेज की शार्पनेस और क्लोज़-ज़ूम के लेवल पर 3D बिल्डिंग शामिल करना शामिल है. वेक्टर मैप में कुछ नई सुविधाएं भी काम करती हैं. जैसे, WebGL ओवरले व्यू की मदद से 3D कॉन्टेंट जोड़ने की सुविधा, प्रोग्राम के हिसाब से झुकाव और दिशा कंट्रोल करने की सुविधा, बेहतर कैमरा कंट्रोल, और आसानी से ज़ूम करने के लिए फ़्रैक्शनल ज़ूम की सुविधा.

वेक्टर मैप का इस्तेमाल शुरू करना

कैमरा कंट्रोल करें

कैमरे की सभी प्रॉपर्टी को एक साथ अपडेट करने के लिए, map.moveCamera() फ़ंक्शन का इस्तेमाल करें. map.moveCamera() एक पैरामीटर स्वीकार करता है, जिसमें अपडेट की जाने वाली सभी कैमरा प्रॉपर्टी होती हैं. यहां दिए गए उदाहरण में, center, zoom, heading, और tilt को एक साथ सेट करने के लिए, map.moveCamera() को कॉल करने का तरीका दिखाया गया है:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

जैसा कि यहां दिखाया गया है, ऐनिमेशन लूप की मदद से map.moveCamera() को कॉल करके, कैमरा प्रॉपर्टी को ऐनिमेट किया जा सकता है:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

आंशिक ज़ूम

वेक्टर मैप में फ़्रैक्शनल ज़ूम की सुविधा काम करती है. इससे आपको पूर्णांक के बजाय फ़्रैक्शनल वैल्यू का इस्तेमाल करके ज़ूम करने की सुविधा मिलती है. रास्टर और वेक्टर, दोनों मैप फ़्रैक्शनल ज़ूम के साथ काम करते हैं, लेकिन वेक्टर मैप के लिए फ़्रैक्शनल ज़ूम डिफ़ॉल्ट रूप से चालू और रास्टर मैप के लिए डिफ़ॉल्ट रूप से बंद होता है. आंशिक ज़ूम की सुविधा को चालू और बंद करने के लिए, isFractionalZoomEnabled मैप विकल्प का इस्तेमाल करें.

यहां दिए गए उदाहरण में, मैप को शुरू करते समय ज़ूम करने की सुविधा चालू करने का तरीका बताया गया है:

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

isFractionalZoomEnabled मैप विकल्प को यहां दिखाए गए तरीके से सेट करके, फ़्रैक्शनल ज़ूम को चालू और बंद भी किया जा सकता है:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

लिसनर को यह पता लगाने के लिए सेट किया जा सकता है कि फ़्रैक्शनल ज़ूम चालू है या नहीं. अगर आपने साफ़ तौर पर isFractionalZoomEnabled को true या false पर सेट नहीं किया है, तो यह सबसे ज़्यादा फ़ायदेमंद है. यहां दिए गए कोड के उदाहरण में, यह जांच की गई है कि फ़्रैक्शनल ज़ूम की सुविधा चालू है या नहीं:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});