खास जानकारी
किसी वेब पेज पर मैप का इस्तेमाल करने के लिए, कुछ खास विकल्पों की ज़रूरत पड़ सकती है. इनकी मदद से, यह कंट्रोल किया जा सकता है कि उपयोगकर्ता मैप को ज़ूम और पैन करने के लिए, किस तरह से इंटरैक्ट करें. gestureHandling, minZoom, maxZoom, और restriction जैसे विकल्पों को MapOptions इंटरफ़ेस में तय किया जाता है.
डिफ़ॉल्ट ऐक्शन और सेटिंग
यहां दिए गए मैप में, मैप इंटरैक्शन के लिए डिफ़ॉल्ट ऐक्शन और सेटिंग के बारे में बताया गया है. इसमें सिर्फ़ 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, }, }, });