वेक्टर मैप

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

वेक्टर मैप वही 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');
  }
});