यह संपर्क फ़ॉर्म का एक डेमो है जो पृष्ठभूमि में एक Google मानचित्र एम्बेड करता है। यह पृष्ठभूमि में Google मानचित्र की एक स्थिर स्क्रीनशॉट छवि का उपयोग नहीं कर रहा है, लेकिन नक्शा एक इंटरेक्टिव है - आप ज़ूम इन और आउट कर सकते हैं, पेगमैन को सड़क दृश्य चालू करने या सैटेलाइट व्यू और मैप्स व्यू के बीच टॉगल करने के लिए खींचें।
पृष्ठ पर मूल रूप से दो परतें हैं - एक नक्शा है और दूसरा फॉर्म है - और हम स्टैक ऑर्डर को परिभाषित करने के लिए सीएसएस की जेड-इंडेक्स प्रॉपर्टी का उपयोग कर रहे हैं। इस फ़ॉर्म में Google मानचित्र की तुलना में उच्च जेड-इंडेक्स है और इस प्रकार बाद में पृष्ठभूमि में दिखाई देता है। आइए अब वास्तविक कोड देखें।
एचटीएमएल - दो डीआईवी तत्व हैं - नक्शा आईडी #googlemaps के साथ तत्व के अंदर प्रस्तुत करेगा जबकि आपके द्वारा #contactform के अंदर जो कुछ भी जोड़ा जाएगा, वह आपके फॉर्म में दिखाई देगा। आप यहां एक Google फॉर्म भी एम्बेड कर सकते हैं।
सीएसएस - #googlemaps तत्व पृष्ठ की पूरी ऊंचाई और चौड़ाई पर कब्जा करता है जबकि #contactform की निश्चित चौड़ाई होती है। आप अपने फॉर्म को थोड़ा पारदर्शी बनाने के लिए #contactform के अस्पष्टता स्तर को भी बदल सकते हैं।
जावास्क्रिप्ट - अपनी जगह के अक्षांश और देशांतर को ढूंढें और सह-समन्वय को लाइन # 7 में बदलें। फिर आप संशोधित जावास्क्रिप्ट कोड को अपने एचटीएमएल पेज के पाद लेख में कॉपी-पेस्ट कर सकते हैं।
आप एक पूर्ण उदाहरण के लिए इस संपर्क फ़ॉर्म के HTML स्रोत का उल्लेख कर सकते हैं।