विषयसूची:

वेबसाइट पर गूगल मैप्स कैसे एम्बेड करें: 4 कदम
वेबसाइट पर गूगल मैप्स कैसे एम्बेड करें: 4 कदम

वीडियो: वेबसाइट पर गूगल मैप्स कैसे एम्बेड करें: 4 कदम

वीडियो: वेबसाइट पर गूगल मैप्स कैसे एम्बेड करें: 4 कदम
वीडियो: How to Add Google Maps in WordPress | Embed Location Map On WordPress Website 2024, नवंबर
Anonim
वेबसाइट पर Google मानचित्र कैसे एम्बेड करें
वेबसाइट पर Google मानचित्र कैसे एम्बेड करें

मैप चैलेंज में मेरे लिए वोट करें!

हाल ही में, मैंने एक वेबसाइट बनाई है जो Google मानचित्र का उपयोग करती है। मेरी वेबसाइट पर Google मानचित्र एम्बेड करना काफी आसान था और ऐसा करना कठिन नहीं था। इस निर्देश में, मैं आपको दिखाऊंगा कि Google मानचित्र को अपनी वेबसाइट पर एम्बेड करना कितना आसान है।

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

अब मुझे कहना होगा, Google मानचित्र को अपनी वेबसाइट पर एम्बेड करने के लिए आपको HTML और CSS के बारे में एक या दो बातें पता होनी चाहिए। यदि आप HTML या CSS के बारे में कुछ नहीं जानते हैं, तो https://www.w3schools.com/ पर जाकर देखें।

नोट: मैं किसी भी आकार या रूप में W3Schools से संबद्ध नहीं हूं। यह सिर्फ एक वेबसाइट है जिसे मैंने HTML और CSS सीखते समय मददगार पाया है।

आपूर्ति

  • टेक्स्ट एडिटर (आपकी वेबसाइट को अनुकूलित करने और आपकी वेबसाइट पर सामग्री प्रदान करने के लिए उपयोग किया जाएगा)।
  • Google मानचित्र (आपकी वेबसाइट पर क्या एम्बेड किया जाएगा)।
  • HTML और CSS की बुनियादी समझ (ये निम्नलिखित प्रोग्रामिंग भाषाएं हैं जिनका उपयोग आपकी वेबसाइट को अनुकूलित करते समय और आपकी वेबसाइट पर सामग्री प्रदान करते समय किया जाएगा)।

चरण 1: अपनी वेबसाइट पर सामग्री प्रदान करें

अपनी वेबसाइट पर सामग्री प्रदान करें
अपनी वेबसाइट पर सामग्री प्रदान करें
अपनी वेबसाइट पर सामग्री प्रदान करें
अपनी वेबसाइट पर सामग्री प्रदान करें

अपने कंप्यूटर पर अपने टेक्स्ट एडिटर सॉफ्टवेयर पर जाएं। उदाहरण के लिए, चूंकि मेरे पास विंडोज़ है, इसलिए मुझे नोटपैड पर जाना चाहिए। नोटपैड पर जाने के बाद निम्न में टाइप करें:

गूगल मानचित्र

गूगल मानचित्र

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

यहां आपके लिए Google मानचित्र पर जाने का लिंक दिया गया है:

चरण 2: अपनी वेबसाइट पर Google मानचित्र एम्बेड करें

अपनी वेबसाइट पर Google मानचित्र एम्बेड करें
अपनी वेबसाइट पर Google मानचित्र एम्बेड करें
अपनी वेबसाइट पर Google मानचित्र एम्बेड करें
अपनी वेबसाइट पर Google मानचित्र एम्बेड करें
अपनी वेबसाइट पर Google मानचित्र एम्बेड करें
अपनी वेबसाइट पर Google मानचित्र एम्बेड करें

एक बार जब आप Google मानचित्र पर हों, तो "मेनू" बटन पर क्लिक करें और फिर "मानचित्र साझा करें या एम्बेड करें" देखें। एक बार जब आप "नक्शा साझा करें या एम्बेड करें" देखें, तो उस पर क्लिक करें। एक बार जब आप उस पर क्लिक कर लेते हैं, तो आपको "एक लिंक भेजें" और "एक नक्शा एम्बेड करें" देखना चाहिए। अब "एम्बेड ए मैप" पर क्लिक करें, एक बार जब आप "एम्बेड ए मैप" पर क्लिक कर लेते हैं, तो अब आपको एक टेक्स्ट बॉक्स के बाईं ओर एक डाउन एरो देखना चाहिए, जिसका उपयोग यह चुनने के लिए किया जाएगा कि आप मैप को कितना बड़ा या छोटा बनाना चाहते हैं। बॉक्स में टेक्स्ट कॉपी करें। और टेक्स्ट को अपनी वेबसाइट के HTML में पेस्ट करें।

चरण 3: अपनी वेबसाइट को अनुकूलित करें

अपनी वेबसाइट अनुकूलित करें
अपनी वेबसाइट अनुकूलित करें
अपनी वेबसाइट अनुकूलित करें
अपनी वेबसाइट अनुकूलित करें

अपने कंप्यूटर पर अपने टेक्स्ट एडिटर सॉफ्टवेयर पर वापस जाएं और निम्नलिखित टाइप करें:

Google मानचित्र का मुख्य भाग {पृष्ठभूमि-रंग: आरजीबी (129, 207, 224, 1);}

गूगल मानचित्र

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

एक बार जब आप कर लें, तो अपनी फ़ाइल को "Google Maps.html" के रूप में सहेजें। html भाग को न भूलें क्योंकि यदि आप इस भाग को शामिल नहीं करते हैं, तो आप एक वेबसाइट नहीं बना सकते हैं।

चरण 4: अपने अंतिम उत्पाद को देखें

अपना अंतिम उत्पाद देखें
अपना अंतिम उत्पाद देखें

एक बार जब आप इस निर्देश के सभी चरणों का पालन कर लेते हैं, तो अपने अंतिम उत्पाद पर एक अच्छी नज़र डालें। यदि आप अपने अंतिम उत्पाद से खुश हैं, तो यह बहुत अच्छा है। लेकिन, यदि आप अपने अंतिम उत्पाद से खुश नहीं हैं, तो अपने नोटपैड में वापस जाएं और अपने अंतिम उत्पाद को ठीक करने का प्रयास करें ताकि अगली बार जब आप अपने अंतिम उत्पाद पर एक अच्छी नज़र डालें, तो आपने जो बनाया है उससे आप खुश होंगे आपके हाथ।

यदि आप मेरा सोर्स कोड देखना चाहते हैं, तो यह इस इंस्ट्रक्शंस के नीचे पाया जा सकता है। मेरे इंस्ट्रक्शंस और हैप्पी कोडिंग देखने के लिए धन्यवाद!

एक अनुस्मारक के रूप में, कृपया मुझे मानचित्र चुनौती में वोट करें!

सिफारिश की: