Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google Maps
Webdesign

ब्रांडेड ब्रांच लोकेशंस Google मानचित्र में कैसे जोड़ें

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

योजना

इस ट्यूटोरियल में हम एक काल्पनिक ग्राहक के लिए एक ब्रांडेड Google मानचित्र बनाने की प्रक्रिया के माध्यम से चलेंगे। हमारे मानचित्र में तीन मुख्य विशेषताएं शामिल होंगी:

  1. ग्राहक के प्रत्येक शाखा स्थानों पर कस्टम मार्कर
  2. नक्शे पर एक निश्चित स्थिति में ग्राहक का लोगो
  3. नक्शा मानचित्रण जो क्लाइंट के ब्रांडिंग की प्रशंसा करता है

इस मामले में, हमारा काल्पनिक ग्राहक मेलबर्न, ऑस्ट्रेलिया के आसपास "The Hobby Shoppe", ठीक बोर्ड गेम के पैरोकार और अन्य शौक सामग्री के रूप में होने जा रहा है।

आधार नक्शा बनाना

मेलबर्न शहर पर केन्द्रित एक मूल नक्शा बनाने के द्वारा हम गेंद को रोलिंग करेंगे। हम अपने ब्रांच मार्करों को जोड़ने के बाद हम नक्शे के केंद्र की स्थिति को परिष्कृत करेंगे, लेकिन अब हम पूरे शहर को दिखाने के लिए सही अक्षांश और देशांतर को ढूंढकर शुरू करेंगे।

प्रारंभिक अक्षांश और देशांतर

ऐसा करने के लिए Google Maps पर जाएं और मेलबर्न की खोज करें, फिर थोड़ा ज़ूम करें ताकि आप अनप्यूप्लेटेड क्षेत्रों को शामिल न करें। जैसा कि आप नक्शे की स्थिति को समायोजित करते हैं, आप अपने नए अक्षांश, देशांतर और ज़ूम स्तर को प्रतिबिंबित करने के लिए URL परिवर्तनों को ध्यान देंगे। जब आप मानचित्र को मानचित्रित करते हैं, जहां आप चाहें, तो बाद में संदर्भ के लिए कहीं URL की प्रतिलिपि बनाएँ, उदा:

https: //www.google.com/maps/place/Melbourne+VIC/@-37.804627...

URL में @ प्रतीक के बाद आपको अक्षांश, देशांतर और ज़ूम स्तर के लिए अल्पविराम से अलग किए गए मान दिखाई देंगे: -37.8046274,144.972156,12z

पहला मान -37.8046274 अक्षांश है, दूसरा मान 144.972156 देशांतर है, और 12z मान का मतलब है कि ज़ूम स्तर 12 पर सेट है। अब हम इन मानों को मूल नक्शे में प्लग करने जा रहे हैं।

मूल मार्कअप

रिक्त HTML दस्तावेज़ बनाएं और निम्न कोड जोड़ें:

इस मार्कअप के साथ हमने id map-canvas के साथ एक div सहित एक HTML दस्तावेज़ बनाया है जो हमारे नक्शे को बनाएगा। हमने कुछ बुनियादी सीएसएस को आकार में भी जोड़ दिया है और map-canvas div का स्थान दिया है।

अंत में, हमने Google मानचित्र API से आवश्यक स्क्रिप्ट को लोड किया है:

और हमने नक्शे के मूल विकल्पों को सेट करने के लिए एक JavaScript फंक्शन बनाया है और इसे हमारे खाली डिवेल में लोड किया है।

ध्यान दें: देखें कि Google मानचित्र URL से हमने जो वैल्यूज लिया था, वे पहले centerPos में उपयोग किए गए हैं और zoomLevel वैरिएबल, जो कि मैप में उपयोग किए जाते हैं mapOptions सरणी centerPos वैरिएबल -37.8046274,144.972156 के अल्पविराम से अलग अक्षांश और रेखांश मूल्यों का उपयोग करता है, और zoomLevel वेरिएबल 12 के वैल्यू का उपयोग करता है।

अपनी HTML फ़ाइल को सहेजें और उसे किसी भी ब्राउज़र में खोलें। आपका बेस मैप इस तरह थोड़ा सा दिखना चाहिए:

शाखा स्थान चिह्नक जोड़ना

अगले वेरिएबलण के लिए ग्राहक के प्रत्येक शाखा स्थानों के लिए अक्षांश और देशांतर ढूंढना है, इसलिए हम उन स्थितियों पर उनके लिए मार्कर बना सकते हैं। ऐसा करने का सबसे आसान तरीका Google मानचित्र खोज के माध्यम से प्रत्येक शाखा का पता लगाने और वहां से अक्षांश और देशांतर को प्राप्त करना है।

प्रत्येक शाखा का अक्षांश और देशांतर खोजें

वापस Google मानचित्र पर वापस जाएं और प्रत्येक शाखा स्थान के लिए एक खोज चलाएं। मान लें कि ग्राहक ने आपको प्रत्येक स्थान के पते दिए हैं, आप बस उस पते की खोज कर सकते हैं और एक मार्कर नक्शे पर दिखाई देगा। उस मार्कर को ठीक क्लिक करें और what's here चुनें? संदर्भ मेनू से।

नक्शे के ऊपरी बाईं ओर एक छोटा पॉपअप दिखाई देगा, जिसमें इस मार्कर के लिए अक्षांश और देशांतर सहित विवरण प्रदर्शित होगा:

शुरुआती फ़ंक्शन में स्थान जोड़ें

प्रत्येक शाखा स्थानों के लिए अक्षांश और देशांतर का ध्यान दें, जिन्हें आप अपने मानचित्र में जोड़ना चाहते हैं। "शौक की दुकान" के मामले में हमारे पास सात शाखाएं हैं और हम प्रत्येक मानचित्र के लिए, अगले नक्शे को अपने नक्शा के initialize() फ़ंक्शन के अंत से पहले, map = new google.maps.Map के बाद जोड़कर जोड़ देंगे। .. लाइन:

इस कोड में हम सबसे पहले शाखा स्थानों की एक सरणी बनाते हैं, जिनमें प्रत्येक के नाम, अक्षांश और देशांतर होते हैं। फिर हम प्रत्येक स्थान को मानचित्र में एक मार्कर के रूप में जोड़ने के लिए उस सरणी के माध्यम से दोहरा रहे हैं, शीर्षक के साथ टूल टिप के रूप में प्रदर्शित होने के साथ, अगर मार्कर को ऊपर रखा गया हो।

आपके नक्शे में अब मार्करों को इतनी पसंद किया जाना चाहिए:

लेकिन रुको, इस तस्वीर में कुछ गलत है हमने सात स्थानों को जोड़ा, और अभी तक केवल छह मार्कर दिखाई देते हैं। क्यूं?

यह सिर्फ इसलिए है क्योंकि हमारे सातवें मार्कर को मानचित्र के प्रारंभिक अक्षांश और देशांतर के आधार पर देखने के बाहर ही है, इसलिए हमें उस केंद्र की स्थिति को परिष्कृत करने की आवश्यकता है।

मानचित्र केंद्र स्थिति को समायोजित करना

अब जब हम हमारे सभी मार्करों को जगह देते हैं, तो हम यह सुनिश्चित करने के लिए नक्शे की प्रारंभिक स्थिति को परिष्कृत कर सकते हैं कि वे लोड पर सभी दिखाई दे रहे हैं। ऐसा करने के लिए हम एक बटन जोड़ देंगे जो हमें एकदम सही नक्शा शुरू करने की स्थिति के बाद हमें नए समन्वयन के लिए क्लिक कर सकते हैं।

body अनुभाग में कहीं भी, अपने पृष्ठ में इस बटन कोड को जोड़ें:

अब जब आप सही स्थान पाते हैं, तो आप अपने मानचित्र को चारों ओर ले जा सकते हैं और फिर नए Get Map Co-ords बटन पर क्लिक कर सकते हैं।

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

नए अक्षांश और देशांतर के साथ-साथ zoom विकल्प के साथ अपने मानचित्र के center विकल्प को अपडेट करें, यदि यह भी बदल गया है:

अपना नक्शा सहेजें और रिफ्रेश करें और अब सभी सात नक्शा मार्कर दिखाई देनी चाहिए। जब आप परिशोधित केंद्र की स्थिति से खुश हैं, तो आप Get Map Co-ords बटन कोड को निकाल सकते हैं।

कस्टम मार्कर इमेजेज जोड़ना

अब जब हमारे पास सभी मार्कर हैं और शाखा के स्थानों के लिए दृश्यमान हैं, तो हम उन्हें कस्टम इमेज में बदलने के लिए जा रहे हैं, जो क्लाइंट ब्रांडिंग और नक्शे की स्टाइल के साथ जाता है। नक्शा मार्कर के रूप में उपयोग के लिए बनाई गई कोई भी इमेज पारदर्शी बैकग्राउंड होना चाहिए, उदा।

अपने कस्टम मार्कर को "images" फ़ोल्डर में रखें, फ़ोल्डर के आधार पर आपके बेस मैप में है, फिर निम्नलिखित वेरिएबल सीधे सीधे आपके द्वारा बनाए गए locations के अंतर्गत जोड़ें:

फिर एक अतिरिक्त विकल्प जोड़ें icon: image के लिए for लूप को हम पहले बना चुके हैं, उसे नक्शा मार्करों के स्थान पर लगाया गया। नक्शा मार्कर पीढ़ी के विकल्पों में इस वेरिएबल को पास करते हुए निर्दिष्ट करता है कि आप अपनी कस्टम इमेज से मार्कर आइकन बदलना चाहते हैं:

अपने नक्शे पर एक और नज़र डालें और अब आपको सात शाखा स्थानों में से प्रत्येक में छोटे घर देखना चाहिए:

क्लाइंट का लोगो जोड़ना

अब हम क्लाइंट के लोगो को ऐसे तरीके से जोड़ना चाहते हैं कि यह एक ही आकार और उसी स्थिति में रहेगा चाहे मैप को ज़ूम या ज़ूम किए जाने के लिए किया गया हो।

Google मैप का एकमात्र तत्व जो पॅनिंग और ज़ूमिंग से नहीं बढ़ता है, नियंत्रण UI एलिमेंट हैं, जो आम तौर पर स्ट्रीट व्यू को आकर्षित करने या मानचित्र प्रकारों को स्विच करने जैसी चीजों के लिए उपयोग किया जाता है। हालांकि, हम कस्टम नियंत्रण API को स्क्रीन पर एक लोगो रखने के लिए उतना ही अच्छी तरह से इस्तेमाल कर सकते हैं। हम भी हमारे नए कस्टम नियंत्रण को क्लिक करते समय नक्शे के ज़ूम और केंद्र की स्थिति को रीसेट करते हैं, साथ ही साथ लोगो को प्रदर्शित करते हुए यह एक उपयोगी UI फ़ंक्शन का प्रदर्शन करता है।

अपने ग्राहक की लोगो इमेज को उसी "images" फ़ोल्डर में जोड़कर प्रारंभ करें, जिस पर आपने अपनी कस्टम मार्कर इमेज रखी थी। फिर अपने मौजूदा initialize() फ़ंक्शन के ठीक पहले निम्नलिखित JavaScript फ़ंक्शन जोड़ें:

जब निष्पादित किया जाता है, तो यह फ़ंक्शन एक नियंत्रण UI एलिमेंट 600px से 116px आकार में, बैकग्राउंड इमेज के रूप में लोगो इमेज का उपयोग करेगा। यह एक श्रोता भी बना देगा जो लोगो को क्लिक करेगा और नक्शे के ज़ूम को रीसेट कर देगा।

उसके बाद, अपने initialize() फ़ंक्शन के अंत में, निम्न कोड डालें:

जब प्रारंभ किया जाता है initialize() फ़ंक्शन चलाता है, तो अब वह LogoControl() फ़ंक्शन को कॉल करेगा जिसे हमने अभी बनाया है और इसके आउटपुट को मानचित्र नियंत्रण में जोड़ता है।

आपका नक्शा अब इस प्रकार दिखना चाहिए:

नक्शा रंग

अपने नक्शे के रंगों को सेटअप करने के लिए आप लगभग निश्चित रूप से Google's Styled Map Wizard का उपयोग करना चाहते हैं ताकि आपकी पसंद पर तीव्र दृश्य प्रतिक्रिया प्राप्त हो सके।

विज़ार्ड में Feature type मेनू आपको स्टाइल के लिए उपलब्ध नक्शा घटकों को प्रदान करता है। वे सबसे सामान्य से, सबसे विशिष्ट से नीचे का आयोजन कर रहे हैं। सबसे सामान्य स्तर पर आप मानचित्र पर हर चीज को समान रूप से प्रभावित करने के लिए, All feature type में रंग विकल्प लागू कर सकते हैं। स्पेक्ट्रम के दूसरे छोर पर आप विशेष रूप से All > Transit > Station > Bus उदाहरण के लिए नीचे ड्रिल कर सकते हैं।

चयनित Feature type के साथ आप Element type मेनू से चयन भी कर सकते हैं ताकि आप यह निर्धारित कर सकें कि क्या आप चाहते हैं कि आपका रंग विकल्प फीवेरिएबल की ज्यामिति या उसके लेबल (जैसे छोटे टेक्स्ट लेबल्स को आप मैप के आसपास फ़्लोटिंग देखते हैं) को प्रभावित कर सकें। इसके अलावा, आप फिर भी संशोधित करने के लिए या तो भरने या स्ट्रोक का रंग चुन सकते हैं।

जब रंग चुनने की बात आती है, तो दो मुख्य क्षेत्र हैं जिनके साथ आप काम करना चाहते हैं; Colour पैनल और Hue पैनल। Colour पैनल आपके द्वारा चुने गए सुविधाओं और एलिमेंट्स को स्पष्ट रूप से एक रंग हेक्सकोड लागू करेगा, जबकि Hue पैनल आपके चयन को प्रत्येक एलिमेंट के मूल रंग से प्रभावित लाइटिंग और अंधेरे की एक सीमा के साथ दिखाएगा।

एक सामान्य नियम के रूप में आपको अपने नक्शे के सबसे सामान्य स्तरों पर Hue को लागू करने से शुरू करना चाहिए ताकि आप अपनी रंग योजना में कुछ एकरूपता बना सकें - आप इसकी तुलना एक बेस कोट रंग से कर सकते हैं। वहां से आप अधिक विशिष्ट विशेषताओं और एलिमेंट्स के लिए फ्लैट Colour सेटिंग्स के साथ शीर्ष पर "paint" को नीचे ड्रिल कर सकते हैं।

हमारा नक्शा

"Melbourne" के लिए विज़ार्ड में खोज कर प्रारंभ करें और उसके बाद आप लगभग उसी क्षेत्र को दिखाने के लिए पूर्वावलोकन नक्शा पोजिशन कर सकते हैं जो आप अपने स्वयं के मानचित्र को दिखाने के लिए सेट करते हैं।

विज़ार्ड में Feature type मेनू के तहत All का चयन करें, और Element type मेनू के तहत Geometry का चयन करें। फिर Hue बॉक्स की जांच करें और रंग बार पर क्लिक करें जब तक कि आप #ffa200 के आसपास का कोई वैल्यू न मिले। किसी कारण से आप सीधे इस फ़ील्ड में कोई मूल्य दर्ज नहीं कर सकते हैं, इसलिए इसे क्लिक करके आप जितना करीब कर सकते हैं। फिर Invert lightness बॉक्स की जांच करें, Saturation सेटिंग को सक्रिय करें और इसे 35 पर खींचें, Lightness सेटिंग को सक्रिय करें और इसे 50 पर रखें, और Gamma सेटिंग को सक्रिय करें और जितना करीब आप इसे 1.3 कर सकते हैं उतना करीब लें।

ये सेटिंग्स आपके पूरे नक्शे को इस तरह से दिखाना चाहिए था:

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

Toning चीजें नीचे

अब जब आपने अपनी पहली स्टाइल लागू की है, तो Map style पैनल के शीर्ष दाएं कोने में Add बटन पर क्लिक करें (मैप विज़ार्ड के दाईं ओर स्थित)। इस बटन पर क्लिक करने से "Style 1" नाम की दूसरी स्टाइल बनाई जाती है जिसके तहत आप विभिन्न एलिमेंट्स का चयन कर सकते हैं और नई स्टाइल लागू कर सकते हैं।

"Style 1" को Map style पैनल में चुना गया और Feature type के अंतर्गत अभी भी चयनित सभी Element type मेनू की दूसरी सूची में Labels विकल्प पर क्लिक करें। Hue बॉक्स की जांच करें और उसे #ffa200 के मान पर फिर से सेट करें ताकि आपके लेबल सभी ऊपर चमकीले नीले या हरे होने के बजाय रंगा हुआ हो, जैसा कि आप ऊपर की इमेज में देखते हैं।

एक और नई स्टाइल बनाने के लिए Map Style पैनल पर Add बटन पर क्लिक करें, फिर Feature type मेनू की दूसरी सूची में Water क्लिक करें। Element type मेनू के तहत Geometry का चयन करें Color बॉक्स को चेक करें और #8F9B98 का रंग हेक्सकोड दर्ज करें।

शेष स्टाइल्स

Feature type और Element type मेनू आइटम का चयन करके आपको अब नई स्टाइल बनाने के बारे में पता होना चाहिए। आगे बढ़ो और इन स्टाइल्स को एक बार स्टाइल मानचित्र विज़ार्ड में जोड़ दें:

  • Feature type: All
  • Element type: All > Labels > Text > Fill
  • Color: #f8ead0
  • Feature type: All
  • Element type: All > Labels > Text > Stroke
  • Color: #6a5035
  • Feature type: All > Landscape > Man made
  • Element type: All > Geometry
  • Color: #9f8053
  • Feature type: All > Landscape > Natural
  • Element type: All > Geometry
  • Color: #9c9743
  • Feature type: All > Point of interest
  • Element type: All > Geometry
  • Color: #ACA74C
  • Feature type: All > Road
  • Element type: All > Geometry > Fill
  • Color: #d3b681
  • Feature type: All > Road
  • Element type: All > Geometry > Stroke
  • Color: #644F34
  • Feature type: All > Road > Arterial
  • Element type: All > Geometry > Fill
  • Color: #c6a15e
  • Feature type: All > Road > Local
  • Element type: All > Geometry > Fill
  • Color: #b09061
  • Feature type: All
  • Element type: All > Labels > Text > Stroke
  • Color: #483521
  • Feature type: All > Transit > Line
  • Element type: All > Geometry
  • Color: #876b48
  • Feature type: All > Transit > Station
  • Element type: All > Geometry
  • Color: #a58557

मानचित्र स्टाइल्स निर्यात करना

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

खोलने [ और समापन ] के बीच उस विंडो से सभी टेक्स्ट की कॉपी बनाएं, अर्थात मुख्य शीर्षक पर सब कुछ।

अपनी initialize() फ़ंक्शन की शुरुआत में इस नई रेखा को जोड़ें:

पहले अपने कर्सर की स्थिति ; फिर स्टाइल नक्शे विज़ार्ड से कॉपी किए गए कोड में पेस्ट करें आपको इसके साथ समाप्त होना चाहिए:

फिर initialize() फ़ंक्शन के बहुत अंत में इन तीन पंक्तियां जोड़ें:

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

the live demo की जांच करें ताकि आप अपने उचित आकार के नक्शे को देख सकें और यहां ज़ूमिंग और पॅनिंग के साथ खेल सकें।

समेटते हुए

एक अंतिम स्पर्श के रूप में आप स्टाइल को आगे बधाई देने के लिए अपने मैप के आसपास फ़्रेम असर भी जोड़ना चाहेंगे। अपनी फ़ाइल में मौजूदा #map-canvas { ... } CSS को प्रतिस्थापित करें:

जैसा कि आप देख सकते हैं, काफी बुनियादी एंबेडिंग के अलावा आप Google मानचित्र से बहुत कुछ कर सकते हैं। इस ट्यूटोरियल में हमने अभी भी केवल Google मानचित्र API के कुछ पहलुओं का पता लगाया है - आप Google Map help docs में API द्वारा दिए गए अन्य सभी कार्यों के बारे में अधिक पढ़ सकते हैं।

यदि आप इस ट्यूटोरियल को आगे भी लेना चाहते हैं तो आप अपने स्वयं के कस्टम स्टाइल ज़ूम और पैन नियंत्रण (custom control docs) को जोड़ने का प्रयास कर सकते हैं, और जानकारी विंडो बना सकते हैं, जो मार्कर क्लिक करते समय पॉप अप करते हैं। ये पॉपअप फ़ोन नंबर और सड़क पता (info windows docs) जैसी जानकारी रख सकते हैं।

इन तकनीकों को अगली बार आज़माएं कि ग्राहक आपको अपनी साइट पर Google मानचित्र को शामिल करने के लिए कहता है। आपको बस बोनस मिल सकता है!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.