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

प्लैटफ़ॉर्म चुनें: 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> के अंदर हैं. मैप <iframe> के अंदर रखा गया है या नहीं, इस आधार पर डिफ़ॉल्ट gestureHandling वैल्यू auto और greedy और cooperative के बीच स्विच होती है.

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

जेस्चर हैंडलिंग: 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