खास जानकारी
किसी वेब पेज पर मैप का इस्तेमाल करने के लिए, खास विकल्पों की ज़रूरत पड़ सकती है. इसकी मदद से, ज़ूम और पैन करने के लिए मैप के साथ उपयोगकर्ताओं का इंटरैक्शन किया जा सकता है. ये विकल्प, जैसे कि 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
नीचे दिए गए मैप में, 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", });
जेस्चर हैंडलिंग: auto
पेज के ऊपर मौजूद मैप में gestureHandling
विकल्प नहीं है
gestureHandling के साथ पिछले मैप की तरह व्यवहार
cooperative
पर सेट किया गया, क्योंकि इस पेज पर मौजूद सभी मैप
<iframe>
. gestureHandling की डिफ़ॉल्ट वैल्यू
auto
इस आधार पर greedy
और cooperative
के बीच स्विच करता है कि मैप
<iframe>
में शामिल था.
मैप <iframe> में शामिल है |
व्यवहार |
---|---|
हां | cooperative |
नहीं | greedy |
जेस्चर हैंडलिंग: greedy
greedy
पर सेट gestureHandling वाला मैप
देखें. यह मैप, हाथ के सभी जेस्चर और स्क्रोल इवेंट पर प्रतिक्रिया देता है
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, }, }, });