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

प्लैटफ़ॉर्म चुनें: 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

सैंपल देखें

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

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

मैप <iframe> में शामिल है व्यवहार
हाँ cooperative
no greedy

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

नीचे greedy पर सेट किए गए gestureHandling वाला मैप दिया गया है. 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