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

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

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

इस मैप का कोड यहां दिया गया है.

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 के कॉम्बिनेशन को दिखाया गया है.

मैप के दायरे और ज़ूम करने की सुविधा को सीमित करना

ऐसा हो सकता है कि आपको जेस्चर और ज़ूम कंट्रोल की अनुमति देनी हो, लेकिन मैप को किसी खास सीमा या कम से कम और ज़्यादा से ज़्यादा ज़ूम तक सीमित रखना हो. इसके लिए, restriction, 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