भले ही पॉइंट A से पॉइंट B तक ले जाने के लिए बहुत सारे मैपिंग ऐप्स और सेवाएं हैं, मैप्स का निर्विवाद राजा गूगल मैप्स है। मैं इसे अपने कंप्यूटर, टैबलेट और 90% समय अपने स्मार्टफोन पर उपयोग करता हूं। इसमें सबसे अच्छा डेटा, सबसे अधिक नेविगेशन और रूटिंग विकल्प और स्ट्रीट व्यू और पैदल चलने, साइकिल चलाने और मास ट्रांजिट जानकारी जैसी शानदार विशेषताएं हैं।
लेकिन क्या होगा यदि आपको गूगल की वेबसाइट के बाहर मैप या दिशा-निर्देशों का उपयोग करने की आवश्यकता है? मान लीजिए आपकी अपनी शादी की वेबसाइट या एक व्यक्तिगत ब्लॉग है और मेहमान आपकी साइट पर जा सकते हैं, जिस पते से वे आ रहे हैं उसे टाइप कर सकते हैं और स्वचालित रूप से कार्यक्रम स्थल तक दिशा-निर्देश प्राप्त कर सकते हैं!
खैर, इसे पूरा करने के कुछ तरीके हैं। सबसे आसान तरीका है गूगल मैप्स द्वारा उत्पन्न एम्बेड कोड का उपयोग करके मैप को अपने वेबपेज पर एम्बेड करना। दूसरा तरीका थोड़ा अधिक तकनीकी है, लेकिन अधिक अनुकूलन योग्य और डायनामिक है। मैं नीचे दोनों तरीकों का उल्लेख करूंगा।
गूगल मैप एम्बेड करें
यदि आप केवल एक स्थान से दूसरे स्थान तक दिशा-निर्देश प्रदर्शित करना चाहते हैं, तो सबसे आसान काम एम्बेड कोड का उपयोग करके आप जो मैप देख रहे हैं उसे एम्बेड करना है। पहले, आगे बढ़ें और गूगल मैप्स में जो भी दिशा-निर्देश आप चाहते हैं उन्हें सेट करें और फिर पेज के निचले दाएं कोने में गियर आइकन पर क्लिक करें।
शेयर या एम्बेड मैप पर क्लिक करें और फिर एम्बेड मैप टैब पर क्लिक करें। यहां आप अपने मैप के लिए एक आकार चुन सकते हैं और फिर iframe कोड कॉपी करके उसे किसी भी वेबपेज पर डाल सकते हैं जो आप चाहें।
इस विधि का एकमात्र नुकसान यह है कि उपयोगकर्ता केवल एक स्थिर मैप देखता है। नीचे दूसरी विधि में, आप एक फॉर्म बना सकते हैं जहां उपयोगकर्ता कोई भी प्रारंभिक पता टाइप कर सकता है और यह उस पते से आपके द्वारा चुने गए गंतव्य पते तक एक मैप उत्पन्न करेगा।
गूगल मैप्स फॉर्म बनाएं
मेरा मतलब दूसरी विधि से क्या है, इसे स्पष्ट करने के लिए, आगे बढ़ें और नीचे दिए गए बॉक्स में एक यूएस पता टाइप करके अपने स्थान से मेरे घर तक दिशा-निर्देश प्राप्त करें:
कूल है ना? आप इस छोटे फॉर्म को किसी भी वेबसाइट, ब्लॉग, या कहीं भी आसानी से बना सकते हैं जहां आप कुछ HTML कोड डाल सकते हैं! यह छोटी व्यावसायिक वेबसाइटों के लिए भी बहुत अच्छा है क्योंकि आप इसे अपने संपर्क पृष्ठ पर डाल सकते हैं और लोग जल्दी से दिशा-निर्देश प्राप्त कर सकते हैं, बजाय इसके कि उन्हें आपका पता कॉपी करना पड़े, एक नई विंडो खोलनी पड़े, और फिर अपना प्रारंभिक पता टाइप करना पड़े।
तो हम इस संशोधित दिशा-निर्देश बॉक्स को बनाने के बारे में कैसे जाते हैं? खैर पहले, हमें दिशा-निर्देशों के लिए गूगल द्वारा उपयोग किए जाने वाले URL के सही सिंटैक्स को प्राप्त करने की आवश्यकता होगी। सौभाग्य से, हम दो स्थानों के बीच दिशा-निर्देश प्राप्त करके और फिर ब्राउज़र के एड्रेस बार से URL को कॉपी करके इसका पता लगा सकते हैं। आप पेज के सबसे नीचे दाएं कोने में छोटे गियर आइकन पर भी क्लिक कर सकते हैं और शेयर या एम्बेड मैप चुन सकते हैं।
शेयर लिंक टैब में URL होगा, जो आपके ब्राउज़र एड्रेस बार में समान URL है। मैं आपको यह दिखाने के लिए नीचे पूरा URL पेस्ट कर रहा हूं कि यह कैसा दिखता है।
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892
याइक्स! यह बहुत लंबा है! इसमें बहुत सारी चीजें हैं, जिनमें से अधिकांश का कोई मतलब नहीं है! गूगल मैप्स URL पैरामीटर बहुत सीधे और आसान हुआ करते थे, लेकिन नई URL संरचना काफी जटिल है। शुक्र है, आप अभी भी पुराने पैरामीटर्स का उपयोग कर सकते हैं और गूगल उन्हें स्वचालित रूप से नए संस्करण में परिवर्तित कर देगा। मेरा मतलब देखने के लिए, नीचे दिए गए लिंक को देखें।
https://maps.google.com/maps?saddr=start&daddr=end
इसे आजमाएं। प्रारंभिक और अंतिम पते के लिए उद्धरण में एक पता डालें और URL को अपने ब्राउज़र में पेस्ट करें! मैंने प्रारंभ को अपने गृह शहर न्यू ऑरलियन्स और अंत को ह्यूस्टन, TX से बदल दिया, इसलिए यह मेरा गूगल मैप्स दिशा-निर्देश URL दिखता है:
https://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
यह काम करता है! जैसा कि आप देख सकते हैं, हालांकि, गूगल मैप्स लिंक को पूरी तरह से लोड होने पर कहीं अधिक जटिल चीज में परिवर्तित कर देता है। ठीक है, अब हमारे पास एक समझदार URL है जिसे हम गूगल मैप्स में पास कर सकते हैं, हमें दो फ़ील्ड के साथ एक सरल फॉर्म बनाने की आवश्यकता है, एक प्रारंभिक पते के लिए और एक गंतव्य पते के लिए।
यदि आप चाहते हैं कि लोग सिर्फ अपना पता टाइप करें और आपके स्थान तक दिशा-निर्देश प्राप्त करें, तो हम दूसरे फ़ील्ड को छिपा कर रखना चाहेंगे और इसे पहले से ही गंतव्य पते पर सेट कर देंगे।
<form action=”https://maps.google.com/maps” method=”get” target=”_blank”>
अपना प्रारंभिक पता दर्ज करें:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”दिशा-निर्देश प्राप्त करें” />
</form>
ऊपर दिए गए कोड को देखें। पहली लाइन फॉर्म से शुरू होती है और कहती है कि जब सबमिट बटन पर क्लिक किया जाता है, तो डेटा को maps.google.com/maps पर भेजा जाना चाहिए। target=blank का अर्थ है कि हम चाहते हैं कि परिणाम एक नई विंडो में खुले। फिर हमारे पास प्रारंभिक पते के लिए एक टेक्स्ट बॉक्स है, जो खाली है।
दूसरा टेक्स्ट बॉक्स छिपा हुआ है और मान वह गंतव्य पता है जो हम चाहते हैं। अंत में, "दिशा-निर्देश प्राप्त करें" शीर्षक के साथ एक सबमिट बटन है। अब जब कोई अपना पता टाइप करता है, तो उन्हें यह मिलेगा:
आप कुछ अतिरिक्त पैरामीटर्स के साथ दिशा-निर्देशों और मैप को और भी अधिक अनुकूलित कर सकते हैं। उदाहरण के लिए, मान लीजिए आप डिफ़ॉल्ट दृश्य को मैप नहीं बल्कि सैटेलाइट और ट्रैफिक दिखाना चाहते हैं।
https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
layer=t और t=h फ़ील्ड को URL में देखें। layer=t ट्रैफिक लेयर के लिए है और t=h का अर्थ है हाइब्रिड मैप! t को m सामान्य मैप के लिए, k सैटेलाइट के लिए और p टेरेन के लिए भी सेट किया जा सकता है। z ज़ूम स्तर है और आप इसे 1 से 20 तक बदल सकते हैं। उपरोक्त URL में, यह 7 पर सेट है। बस उन्हें अपने अंतिम URL में जोड़ें और अब आपके पास अपनी साइट पर एक अत्यधिक अनुकूलित गूगल मैप्स दिशा-निर्देश फॉर्म है!
इसके साथ कोई समस्या हो, तो एक टिप्पणी पोस्ट करें और मैं मदद करने की कोशिश करूंगा! आनंद लें!
