मैं अपने Google मानचित्र पेज को पूर्ण स्क्रीन के लिए टॉगल करने के लिए एक पूर्ण स्क्रीन बटन कैसे दिखाऊं?

Question

हाय दोस्तों मेरे पास मेरे पृष्ठ के हिस्से में एक Google मानचित्र एकीकृत है और मैं पूर्ण स्क्रीन और सामान्य आकार के बीच मानचित्र को टॉगल करने के लिए एक टॉगल बटन बनाना चाहता हूं। तो जब आप उस पर क्लिक करते हैं - नक्शा संपूर्ण ब्राउज़र स्क्रीन भरने के लिए विस्तारित होता है और फिर उस पर क्लिक करता है, इसे पृष्ठ पर इसके मूल आकार में बहाल किया जाता है। मैं यह कैसे करूंगा?

Answer 1

यहाँ एक jQuery कार्यान्वयन है।

$("#map_toggler").click(function() { 
    $("#map").toggleClass("fullscreen") 
}); 

सीएसएस में:

#map { 
    width: 400px; 
    height: 200px; 
} 

#map.fullscreen { 
    position: fixed; 
    width:100%; 
    height: 100%; 
} 

untested है, लेकिन यह है कि की तर्ज पर कुछ काम करना चाहिए।

Answer 2

यदि आपके पास अपने पृष्ठ पर कोई नक्शा है तो आपको नक्शा रखने वाले डीआईवी का आकार बदलने के लिए कुछ जावास्क्रिप्ट लिखना है। मैंने एक उदाहरण लागू नहीं किया है जो ब्राउज़र को भरने के लिए डीआईवी का आकार बदलता है, लेकिन here वह है जो जावास्क्रिप्ट से नक्शा div के आकार को टॉगल करता है (मैं तत्व पर style.width सेट करने के लिए mooTools का उपयोग करता हूं, लेकिन आप जो कुछ भी उपयोग कर सकते हैं डीओएम में हेरफेर करना पसंद करते हैं)।

Answer 3

क्लिक आप अपने div आप नक्शे दिखाने जहां आकार बदलने के लिए है पर ..... मुझे लगता है कि इसकी सरल

Answer 4

डोम तैयार पर:

:

• Init मानचित्र और सेट केंद्र
• प्रवेश-फुलस्क्रीन बटन पर क्लिक करने पर नक्शे

युक्त div की वर्तमान सीएसएस आकार जाओ

• सीएसएस (आकार और स्थिति) अद्यतन करें
• ट्रिगर आकार नक्शा विधि
• सेट नक्शा केंद्र

बाहर निकलें-फुलस्क्रीन बटन क्लिक करने पर:

• अद्यतन सीएसएस
• उत्प्रेरक आकार नक्शा विधि (वापस प्रारंभिक आकार और स्थिति के लिए)
• सेट नक्शा केंद्र

आप कोड प्राप्त कर सकते here

Answer 5

अब हमारे पास एक पूर्णस्क्रीन एपीआई https://developer.mozilla.org/en/DOM/Using_full-screen_mode है, आप बस डीओएम तत्व का चयन करें जिसे आप पूर्णस्क्रीन पर सेट करना चाहते हैं और उस पर पूर्णस्क्रीन एपीआई कॉल करें। की तरह कुछ इस

var elem = document.getElementById("myvideo"); 
if (elem.requestFullScreen) { 
    elem.requestFullScreen(); 
} else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen(); 
} else if (elem.webkitRequestFullScreen) { 
    elem.webkitRequestFullScreen(); 
}