ज़ूम और पैन कंट्रोल करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

खास जानकारी

वेब पेज पर मैप का इस्तेमाल करने के लिए, उपयोगकर्ताओं को मैप पर ज़ूम इन और पैन करने के तरीके को कंट्रोल करने के लिए, खास विकल्पों की ज़रूरत पड़ सकती है. gestureHandling, minZoom, maxZoom, और restriction जैसे विकल्प, MapOptions इंटरफ़ेस में तय किए जाते हैं.

डिफ़ॉल्ट सेटिंग

नीचे दिए गए मैप में, मैप इंटरैक्शन के लिए डिफ़ॉल्ट व्यवहार दिखाया गया है. यह मैप, सिर्फ़ zoom और center विकल्पों के साथ इंस्टैंशिएट किया गया है.

इस मैप का कोड नीचे दिया गया है.

TypeScriptJavaScript
new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts
 
new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

जेस्चर को कंट्रोल करना

जब कोई उपयोगकर्ता ऐसे पेज को स्क्रोल करता है जिसमें कोई मैप मौजूद होता है, तो स्क्रोल करने की कार्रवाई से मैप अनजाने में ज़ूम हो सकता है. इस व्यवहार को कंट्रोल करने के लिए, मैप के gestureHandling विकल्प का इस्तेमाल किया जा सकता है.

gestureHandling: cooperative

यहां दिया गया मैप, cooperative पर सेट किए गए gestureHandling विकल्प का इस्तेमाल करता है. इससे उपयोगकर्ता, मैप को ज़ूम किए बिना या पैन किए बिना, पेज को सामान्य तरीके से स्क्रोल कर सकता है. उपयोगकर्ता, ज़ूम कंट्रोल पर क्लिक करके मैप को ज़ूम कर सकते हैं. टचस्क्रीन डिवाइसों पर, मैप पर दो उंगलियों से ज़ूम और पैन भी किया जा सकता है.

इस मैप का कोड नीचे दिया गया है.

TypeScriptJavaScript
new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts
 
new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

सैंपल देखें

gestureHandling: auto

पेज पर सबसे ऊपर मौजूद, gestureHandling विकल्प के बिना मैप की परफ़ॉर्मेंस, gestureHandling को cooperative पर सेट किए गए पिछले मैप की तरह ही होती है. इसकी वजह यह है कि इस पेज पर मौजूद सभी मैप, <iframe> में मौजूद हैं. gestureHandling की डिफ़ॉल्ट वैल्यू auto, greedy और cooperative के बीच स्विच करती है. यह इस बात पर निर्भर करता है कि मैप, <iframe> में शामिल है या नहीं.

<iframe> में मौजूद मैप व्यवहार
हां cooperative
नहीं greedy

gestureHandling: greedy

gestureHandling को greedy पर सेट किया गया मैप यहां दिया गया है. यह मैप, cooperative की तरह सभी टच जेस्चर और स्क्रोल इवेंट पर प्रतिक्रिया देता है.

gestureHandling: none

मैप पर जेस्चर बंद करने के लिए, gestureHandling विकल्प को none पर भी सेट किया जा सकता है.

पैन और ज़ूम करने की सुविधा बंद करना

मैप को पैन और ज़ूम करने की सुविधा को पूरी तरह से बंद करने के लिए, दो विकल्प, gestureHandling और zoomControl शामिल करने होंगे.

TypeScriptJavaScript
new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts
 
new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

नीचे दिए गए मैप में, ऊपर दिए गए कोड में gestureHandling और zoomControl के कॉम्बिनेशन को दिखाया गया है.

मैप के दायरे और ज़ूम पर पाबंदी लगाना

हो सकता है कि आपको जेस्चर और ज़ूम कंट्रोल की अनुमति देनी हो, लेकिन मैप को किसी खास सीमा या कम से कम और ज़्यादा से ज़्यादा ज़ूम पर सीमित करना हो. ऐसा करने के लिए, पाबंदी, minZoom, और maxZoom विकल्प सेट करें. नीचे दिए गए कोड और मैप में, इन विकल्पों के बारे में बताया गया है.

TypeScriptJavaScript
new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts
 
new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js