खास जानकारी
किसी वेब पेज पर मैप का इस्तेमाल करने के लिए, कुछ खास विकल्पों की ज़रूरत पड़ सकती है. इनकी मदद से, उपयोगकर्ता मैप को ज़ूम और पैन कर सकते हैं. ये विकल्प, MapOptions इंटरफ़ेस में तय किए जाते हैं. जैसे, gestureHandling, minZoom, maxZoom, और restriction.
डिफ़ॉल्ट सेटिंग
यहां दिया गया मैप, मैप के साथ इंटरैक्शन के लिए डिफ़ॉल्ट सेटिंग दिखाता है. इस मैप को सिर्फ़ zoom और center विकल्प तय करके इंस्टैंशिएट किया गया है.
इस मैप का कोड यहां दिया गया है.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
जेस्चर हैंडलिंग को कंट्रोल करना
जब कोई उपयोगकर्ता, मैप वाले पेज को स्क्रोल करता है, तो स्क्रोल करने की वजह से मैप अनजाने में ज़ूम हो सकता है. gestureHandling मैप विकल्प का इस्तेमाल करके, इस सेटिंग को कंट्रोल किया जा सकता है.
gestureHandling: cooperative
यहां दिए गए मैप में, gestureHandling विकल्प को
cooperative पर सेट किया गया है. इससे उपयोगकर्ता, मैप को ज़ूम
या पैन किए बिना, पेज को सामान्य तरीके से स्क्रोल कर सकता है. उपयोगकर्ता, ज़ूम कंट्रोल पर क्लिक करके मैप को ज़ूम कर सकते हैं. टचस्क्रीन वाले डिवाइसों के लिए, वे मैप पर दो उंगलियों से मूवमेंट करके भी ज़ूम और पैन कर सकते हैं.
इस मैप का कोड यहां दिया गया है.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
यहां दिए गए मैप में, ऊपर दिए गए कोड में 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, }, }, });
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, }, }, });