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