खास जानकारी
किसी वेब पेज पर मैप का इस्तेमाल करने के लिए, कुछ खास विकल्पों की ज़रूरत पड़ सकती है. इनसे यह कंट्रोल किया जा सकता है कि उपयोगकर्ता, ज़ूम और पैन करने के लिए मैप के साथ कैसे इंटरैक्ट करें. ये विकल्प, 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 |
| no | 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, }, }, });