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