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

प्लैटफ़ॉर्म चुनें: 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 विकल्प का इस्तेमाल किया जा सकता है.

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

gestureHandling: 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