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

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

खास जानकारी

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

डिफ़ॉल्ट व्यवहार

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

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

TypeScript

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

JavaScript

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

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

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

जेस्चर हैंडलिंग: cooperative

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

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

TypeScript

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

JavaScript

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 की तरह सभी टच जेस्चर और स्क्रोल इवेंट पर प्रतिक्रिया देता है.

जेस्चर हैंडलिंग: none

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

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

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

TypeScript

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

JavaScript

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

नीचे दिया गया मैप इन विज्ञापनों को दिखाता है gestureHandling और ऊपर दिए गए कोड में zoomControl का इस्तेमाल कर सकते हैं.

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

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

TypeScript

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

JavaScript

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