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