मैं वेबसाइट के लिए रिस्पॉन्सिव मानचित्र कैसे बनाऊं?

चूँकि आपने अपनी क्वेरी को HTML और जावास्क्रिप्ट के रूप में टैग किया है, जैसा कि माइक ने सुझाव दिया था, मेरे लिए पहला लिंक यह है: अपनी वेबसाइट पर रिस्पॉन्सिव गूगल मैप्स जोड़ने के 5 तरीके[^]

सरल Google मानचित्र के लिए, यहां सबसे आसान तरीका दिया गया है यहां एक और संदर्भ[^]:

1. गूगल मैप्स वेबसाइट पर जाएं।
2. वह स्थान खोजें जिसे आप अपने एम्बेडेड मानचित्र में प्रदर्शित करना चाहते हैं।
3. शेयर पर क्लिक करें.
4. एंबेड का पूर्वावलोकन देखने के लिए एंबेड मैप पर क्लिक करें। यहां, आप मानचित्र क्षेत्र, ज़ूम, प्रकार (सड़क मानचित्र या उपग्रह मानचित्र), और आकार (यदि आप चाहें तो कस्टम आकार सहित) को टॉगल कर सकते हैं।
5. एम्बेड करने के लिए तैयार होने पर, HTML कॉपी करें पर क्लिक करें।
6. अपनी HTML फ़ाइल में, एंबेड कोड पेस्ट करें जहाँ आप चाहते हैं कि मानचित्र पृष्ठ पर दिखाई दे। कोड कुछ इस तरह दिखेगा (यह आपके मानचित्र के लिए चुने गए आकार के आधार पर भिन्न दिख सकता है:
7. मानचित्र को क्रियाशील रूप में देखने के लिए HTML फ़ाइल को सहेजें और वेब ब्राउज़र में फ़ाइल खोलें।
8. हमारे एम्बेडेड मानचित्र को कुछ अतिरिक्त HTML और CSS के साथ उत्तरदायी बनाएं
कोड:
1. अपना मौजूदा एम्बेड कोड लें और इसे अपने HTML दस्तावेज़ में रखें। फिर, लपेटें <iframe> एक कंटेनर में तत्व (जो मानचित्र का प्रतिनिधित्व करता है)। <div> क्लास गूगल-मैप के साथ।

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. इसके बाद, अपने सीएसएस में, निम्नलिखित कोड जोड़ें:

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

किसी वेबसाइट पर स्क्रीन आकार के अनुसार समायोजित होने वाला मानचित्र बनाने के लिए आप Google मैप्स जावास्क्रिप्ट एपीआई या किसी अन्य मैपिंग लाइब्रेरी का उपयोग कर सकते हैं। बस मैप कोड को एक कंटेनर डिव के अंदर रखें।

<div id="map-container"></div>

सीएसएस का उपयोग करके डिज़ाइन सिद्धांत लागू करें, जैसे प्रतिशत आधारित चौड़ाई का उपयोग करना। विभिन्न स्क्रीन आकारों पर नियंत्रण के लिए आप नीचे दी गई मीडिया क्वेरीज़ का उपयोग करने पर विचार कर सकते हैं:

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}