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

Google Maps API के साथ क्रिएटिव बनना

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called The Google Maps API For Designers.
The Google Maps API and Custom Overlays

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

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

दूसरी तरफ Google मानचित्र API, आपको पूरी तरह से अनुकूलित मानचित्र बनाने की आजादी देता है, जो सभी प्रकार की कूल चीज़ें कर सकता है। Portsmouth का इतिहास मानचित्र एक ऐसी साइट है जिसे मैं हाल ही में इस API का उपयोग कर बनाया था।

Map I created using the Google maps API
Portsmouth का इतिहास मानचित्र एक ऐसी साइट है जिसे मैं हाल ही में इस API का उपयोग कर बनाया था।

ट्यूटोरियल की यह श्रृंखला आपको बताएगी कि Google map API का उपयोग करके अनुकूलित मानचित्र कैसे बनाएं। इसमें थोड़े से जावास्क्रिप्ट के साथ अपने हाथों को डर्टी होना शामिल है, लेकिन यह इसके लायक होगा।

ट्यूटोरियल सभी प्रकार की चीजों को कवर करेगा। कुछ नाम हैं: कस्टम मानचित्र रंग, मेनू और मार्कर; ज़ूम करने योग्य Google मानचित्र पर इसे ओवरले करके जीवंत नक्शा डिज़ाइन (जैसे एक हस्त निर्मित मानचित्र) बनाना; Flickr API तक लिंक करना; इमेज ऑप्टिमाइजेशन; प्रभावी डिजाइन; कोड ऑप्टिमाइजेशन और वेलिडेशन। या, दूसरे शब्दों में, जब तक आप कर लेते हैं, तब तक न केवल आप सुंदर मानचित्र बना पाएंगे, आप किसी भी वेबसाइट के निर्माण के लिए कई चीजें भी देख पाएंगे।

सिनेरियो

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

नोट: इस उदाहरण में केवल Glastonbury मार्कर 'एक्टिव' है।

शुरू करने से पहले, आप इस ट्यूटोरियल से संबंधित फाइल डाउनलोड करना चाहेंगे। मैंने प्रत्येक गतिविधि के लिए एक अलग HTML फ़ाइल शामिल की है।


API क्या है?

एक API या एप्लिकेशन प्रोग्रामिंग इंटरफेस, एक कंपनी (जैसे Facebook, Twitter, YouTube, Google) कमांड्स का एक समूह (जैसे फ़ंक्शन) प्रकाशित करने का एक शानदार तरीका है। विचार यह है कि आप इन कमांड्स का उपयोग उनकी सामग्री को अत्यधिक अनुकूलित संस्करण बनाने के लिए कर सकते हैं। उदाहरण के लिए, Google मानचित्र API के मामले में 'सामग्री' नक्शे है, जबकि Flickr API के मामले में 'सामग्री' फ़ोटो है।

जब लोग 'मैश-अप' के बारे में बात करते हैं, तो उनका मतलब है कि उन्होंने दो या दो से अधिक कंपनियों के API का इस्तेमाल सामग्री को जोड़ने के लिए किया है, उदाहरण के लिए Flickr से तस्वीरें Google मानचित्र पर प्रदर्शित होती हैं। वहाँ सचमुच इन API के आसपास हजारों रहे हैं; अधिक जानकारी के लिए प्रोग्राम वेब पर एक नज़र डालें।

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


Google मानचित्र के साथ आरंभ करना

स्पष्ट रूप से इंगित करने के जोखिम पर, आरंभ करने के लिए आपको एक Google खाता की आवश्यकता होती है। यदि आपके पास वर्तमान में एक नहीं है, तो Google पर जाएं और साइनअप करें।

अपने Google खाते के साथ आर्म्ड, अब आप Google मैप्स API पेजेज में वेंचर कर सकते हैं। इस पेज को बुकमार्क करें; आप इसके साथ बहुत परिचित होंगे। मुख्य क्षेत्र हैं: -

  • डेवलपर की गाइड: कोड स्निपेट्स जो आपको कुछ काम करने के लिए API कार्यों का उपयोग करने का तरीका दिखाते हैं।
  • API रिफरेन्स: API के सभी functions की पूरी रिफरेन्स सूची। इस API का उपयोग करके आप क्या कर सकते हैं, इसका एक 'शॉपिंग लिस्ट' के रूप में प्रयोग करें। (लेकिन ध्यान रखें कि अतिरिक्त लाइब्रेरी होती हैं जो आपको और भी अधिक करने देती हैं। हम बाद में इन्हें प्राप्त करेंगे)।

इससे पहले कि आप आगे जाएं, आपको API key (अक्षरों और संख्याओं का एक लंबा अनुक्रम, जो आपके लिए अद्वितीय है) की आवश्यकता होती है। अपनी API key को यहां से प्राप्त करें।

google-maps-api-key

अपना पहला नक्शा बनाना

ठीक है, आप बिल्डिंग शुरू करने के लिए तैयार हैं।

google-maps-api-activity3
सोर्स फाइल डाउनलोड करें या हमारे लाइव वर्जन को चेक करें

प्रदान किये गए मैप का काम करने के लिए, अपनी स्वयं की API key के साथ इसे 'YOUR_API_KEY_GOES_HERE' से बदलें। आपका नक्शा ऊपर दिखाए गए नक्शे के अनुरूप होना चाहिए।

कोड का मूल सिद्धांत यह है कि यह एक div बनाता है (जिसे festival-map कहा जाता है) जिसमें जावास्क्रिप्ट मैप को लोड करता है। मैंने यह काम करने के लिए कोड में कमैंट्स जोड़ दिए हैं, लेकिन मुख्य बिट्स को उजागर करने के लिए इसके लायक है।

कोड पहले आपके ऐप्लिकेशन को Doctype घोषणा <!DOCTYPE html> का उपयोग करके HTML5 के रूप में घोषित करता है।

यह फिर नक्शे के लिए स्टाइल सेट करता है; <style type="text/css"> और </style> टैग के बीच के बिट्स। आप #festival-map id पर स्टाइल को अनुकूलित कर सकते हैं, इस पर निर्भर करता है कि आप अपना नक्शा कहाँ रखना चाहते हैं। यदि आप 'पूर्ण स्क्रीन' मानचित्र चाहते हैं, तो चौड़ाई और ऊंचाई को 100 प्रतिशत तक सेट करें और मार्जिन को हटा दें।

फिर, एक पल के लिए जावास्क्रिप्ट को स्किप करें, बॉडी टैग्स के बीच का कोड एक खाली HTML ऑब्जेक्ट सेट करता है, अर्थात नक्शे को रखने के लिए एक div (festival-map)। यह एक 'स्थान धारक' के रूप में कार्य करता है, जिसमें जावास्क्रिप्ट मैप को लोड करता है।

ठीक है - अब जावास्क्रिप्ट को देखें - कोड पहले आपके गूगल मैप्स API key को जोड़ता है।

यह तब जावास्क्रिप्ट में लॉन्च करता है जो नक्शा बनाता है। त्वरित रिमाइंडर: जावास्क्रिप्ट फ़ंक्शंस (जैसे loadFestivalMap) उन कमांड्स का एक सेट है जो केवल किसी दूसरे कोड द्वारा कॉल किए जाने पर चलते हैं। यह जटिल लग सकता है, लेकिन यह वास्तव में केवल कुछ चीजें कर रहा है -

  • मानचित्र के कॉन्फ़िगरेशन विकल्प (festivalMapOptions) (जैसे latitude और longitude, zoom levels आदि) सेट किए जाते हैं, और एक खाली जावास्क्रिप्ट वेरिएबल (festivalMap) बनाया जाता है जो मैप को शीघ्र ही सौंप दिया जाएगा। (सुझाव: किसी भी स्थान के अक्षांश और देशांतर निर्देशांक को देखने के लिए itouchmap एक आसान साइट है।)
  • तब loadFestivalMap फ़ंक्शन को इस लाइन द्वारा चलाने के लिए ट्रिगर किया गया है: google.maps.event.addDomListener (window, 'load', loadFestivalMap);
  • यह फ़ंक्शन मानचित्र बनाता है, इसे जावास्क्रिप्ट वेरिएबल के लिए निर्दिष्ट करता है (यानी festivalMap)। ऐसा करते समय, यह कॉन्फ़िगरेशन विकल्पों पर भी लागू होता है और इसे पकड़ने के लिए बनाए गए festival-map div में नक्शे को लोड करता है।
  • अंत में, loadMapMarkers फ़ंक्शन loadFestivalMap फ़ंक्शन की अंतिम लाइन से चलने में शुरू हो रहा है।

यदि इसका कोई मतलब नहीं निकलता है, तो कोड के पूर्ण वर्जन के भीतर कमैंट्स के माध्यम से पढ़ लें क्योंकि वे इसे आगे बताते हैं।


Map मार्कर के रूप में चित्र

अब तक आपका नक्शा up and running होना चाहिए, और किसी भी किस्मत के साथ आप जावास्क्रिप्ट से भी परेशान नहीं हुए होंगे! हम सभी को अच्छी तरह से मानते हैं, हम नक्शे को थोड़ा और अधिक दिलचस्प दिखाना शुरू कर सकते हैं।

google-maps-api-activity4

नक्शा मार्कर के रूप में अपनी स्वयं की इमेजेज का उपयोग करना आसान है। मानचित्र के लिए प्रॉपर्टीज ऑप्शंस कैसे सेट करें (जैसे center, zoom इत्यादि जैसा हमने ऊपर किया था), उसी तरह आप नक्शा मार्करों की प्रॉपर्टीज को भी बदल सकते हैं। नक्शा मार्कर के रूप में एक अलग इमेज का उपयोग करने के लिए, आपको बस अपने मानचित्र मार्करों की icon प्रॉपर्टी सेट करना होगा। (यदि आप रुचि रखते हैं, तो google map API - मार्कर अनुभाग सभी मानचित्र मार्कर प्रॉपर्टीज, मेथड्स और ईवेंट का उपयोग करता है जिन्हें आप उपयोग कर सकते हैं)।

आम तौर पर मानचित्र मार्कर हैं .png क्योंकि वे आपको एक पारदर्शी बैकग्राउंड के साथ अनियमित आकार की अनुमति देते हैं।

हमें प्रत्येक मार्कर के लिए 'clickable' क्षेत्र को सेट करने की आवश्यकता है ताकि यह सुनिश्चित हो सके कि .png के 'इमेज' बिट क्लिक करने योग्य है और पारदर्शी बिट नहीं है। यह वास्तव में महत्वपूर्ण है अगर मार्कर ओवरलैप हो।

आप पहले मैप आइकन इमेज बनाते हैं (markerIconGlastonbury), और उसके बाद मानचित्र आइकन आकृति बनाएं (markerShapeGlastonbury), और अंत में आप फिर से इन दोनों को अपने मानचित्र मार्कर (markerGlastonbury) से लिंक कर सकते हैं।

आप इस पेज के ऊपर से पूर्ण HTML फाइल डाउनलोड कर सकते हैं, या लाइव संस्करण को देख सकते हैं। फिलहाल, मैंने सिर्फ एक नक्शा मार्कर जोड़ा है ... जाहिर है मैं और अधिक शीघ्र ही जोड़ूंगा!

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

Z-indexes के बारे में एक त्वरित नोट

एलिमेंट, जैसे नक्शा मार्कर, दोनों x, y और z निर्देशांक के हो सकते हैं। z-index गहराई है। यह निर्धारित करता है कि एलिमेंट कैसे एक दूसरे के शीर्ष पर 'स्टैक्ड' होते हैं, और इसलिए वे कैसे ओवरलैप करते हैं।

यदि किसी एलिमेंट के x और y निर्देशांक एक समान हैं, तो उच्च z-index वाले एलिमेंट निम्न z-index वाले एलिमेंट्स के शीर्ष पर प्रदर्शित होते हैं। (z-index केवल position एलिमेंट्स पर काम करता है, जैसे relative, fixed या absolute)।

अब तक नक्शा ठीक दिखता है क्योंकि डिफ़ॉल्ट रूप से Google मानचित्र API एलिमेंट्स को स्क्रीन के नीचे एक उच्च z-index दिखाती है, इसलिए वे वस्तुओं के शीर्ष पर स्क्रीन पर थोड़ा आगे बढ़ते हैं। जैसे आइल ऑफ विट आइकन ग्लासटनबरी और रीडिंग फेस्टिवल आइकॉन के शीर्ष पर है (नीचे चित्र देखें)।

बाद में इस ट्यूटोरियल में हम देखेंगे कि कैसे नक्शा मार्कर प्रदर्शित होते हैं। मैनिपुलेट करने के लिए z-index को बदल सकते हैं।


रंग और डिटेल का स्तर बदलना

हालांकि नक्शा आकार लेना शुरू कर रहा है, डिफ़ॉल्ट नक्शा वास्तव में समग्र प्रभाव के साथ फिट नहीं है जो मैं हासिल करना चाहता हूं। सौभाग्य से, यह API 'स्टाइल' ऑप्शंस का उपयोग करने के लिए मानचित्र के दिखने के लिए वास्तव में आसान है।

मुझे इस बिंदु पर यह भी कहना चाहिए कि मैंने इस उदाहरण को स्पष्ट करने के लिए कुछ संगीत समारोहों को लिया। यह कुछ हद तक रैंडम था, और मेरी पसंद मेरी राय को प्रतिबिंबित नहीं करती - किसी त्यौहार के साथ या खिलाफ!

google-maps-api-activity6

स्टेप 1

JSON विज़ार्ड का उपयोग करने के लिए वर्कआउट कैसे अपना मानचित्र देखना चाहते हैं। आप सभी चीजों के रंगों को बदल सकते हैं, डिटेल को ऐड या रिमूव कर सकते हैं, कलर फिल और ज्योमेट्री को स्वतंत्र रूप से सेट कर सकते हैं। यह थोड़ा समय व्यतीत करना है कि यह कैसे काम करता है। (यदि आप सोच रहे हैं कि, JSON जानकारी फ़ॉर्मेट करने का सिर्फ एक तरीका है, तो एक कंप्यूटर इसे पढ़ सकता है।)

स्टेप 2

जब आप JSON विज़ार्ड प्रीव्यू में दिखाए गए स्टाइल से खुश हैं, तो Show JSON बटन पर क्लिक करें और कोड को कॉपी करें।

स्टेप 3

अपने html डॉक्यूमेंट पर वापस जाएं, इस जानकारी को पकड़ने के लिए शुरुआती जावास्क्रिप्ट टैग के बाद एक वैरिएबल जोड़ें, फिर कोड में पेस्ट करें।

स्टेप 4

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

स्टेप 5

अंत में, आपको स्टाइल को एक्टिव करने के लिए अपने मानचित्र को अपने नए स्टाइल को आवंटित करना होगा।

कृपया इस ट्यूटोरियल की शुरूआत में लिंक का उपयोग मानचित्र के लिए कोड की एक कॉपी डाउनलोड करें या ट्यूटोरियल के इस भाग के लिए लाइव डेमो पर नज़र डालें। मैंने वास्तव में दो स्टाइल्स को जोड़ा है। एक सीधे एक्टिव हो जाता है, और दूसरे को तब एक्टिव किया जाएगा जब नक्शा विस्तार के अधिक लेवल देने के लिए ज़ूम हो जाएंगे। (इसे आगे नीचे समझाया गया है।)

मैं भी इस बिंदु पर एक बैकग्राउंड जोड़ने का विरोध नहीं कर रहा :) body CSS सिलेक्टर पर एक नज़र डालें यह देखने के लिए कि मैंने यह कैसे किया।


पॉप अप बॉक्स और डायनामिक ज़ूम

google-maps-api-activity7

ठीक है, अब नक्शा वास्तव में कुछ करने का समय है! आप बिल्ट-इन इन्फो विंडो ओवरले का उपयोग कर सकते हैं, लेकिन वे शानदार नहीं दिखते हैं और वे आसानी से अनुकूलित नहीं किए जा सकते हैं। इसलिए, इसके बजाय, हम इन्फोबॉक्स लाइब्रेरी का उपयोग करने जा रहे हैं।

स्टेप 1

इन्फोबॉक्स लाइब्रेरी की एक कॉपी डाउनलोड करें। इसे अनज़िप करें, और इसे अपने मैप के पास एक फ़ोल्डर में संग्रहीत करें। उसके बाद इस लाइन को अपनी html फ़ाइल के शीर्ष के पास जोड़ें।

स्टेप 2

प्रत्येक मानचित्र मार्कर के लिए z-index जोड़ें ताकि स्क्रीन के निचले हिस्से के निकट वाले लोगों को ऊपरी हिस्से के शीर्ष पर दिखाई दे। (यानी स्क्रीन के निचले भाग के निकट एक मार्कर है, इसकी z-index अधिक होना चाहिए।) बाद में पता चलेगा कि आप यह क्यों कर रहे हैं! उदाहरण के लिए –

स्टेप 3

प्रत्येक मानचित्र मार्कर के बाद निम्न कोड जोड़ें। कृपया कोड के भीतर कमेंट के माध्यम से यह देखने के लिए पढ़ें कि यह क्या कर रहा है।

स्टेप 4

ऊपर दिए गए कोड में, आपने फ़ंक्शन setZoomWhenMarkerClicked किया है। जब एक व्यक्ति किसी मार्कर पर क्लिक करता है तो यह मानचित्र को ज़ूम कर देगा। लेकिन जब तक आप यह फ़ंक्शन नहीं बनाते, तब तक भयानक कुछ नहीं होगा! यह वह फ़ंक्शन है जिसे आपको बनाने की आवश्यकता है –

स्टेप 5

जैसा कि नक्शा ज़ूम होता है, संभावना है कि आप अपने नक्शे पर अधिक विवरण दिखाना चाहते हैं। यह एक ईवेंट लिस्टनर को जोड़कर और ज़ूम को परिवर्तित करने के लिए getZoom मेथड का उपयोग करके किया जाता है। यदि इसे बढ़ाया गया है (स्तर 6 से ऊपर), तो setMapTypeId मेथड का प्रयोग ऊपर परिभाषित दूसरे (अधिक विस्तृत) स्टाइल को सेट करने के लिए किया जाता है।

स्टेप 6

अपने इन्फोबॉक्स को css का इस्तेमाल करके इसे सुंदर बनाते हैं।

स्टेप 7

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

स्टेप 1 में आप प्रत्येक मार्कर के लिए z-index निर्धारित करते हैं। आप इस समस्या को ठीक करने के लिए अब इसका उपयोग कर सकते हैं। आपको एक फ़ंक्शन बनाने की आवश्यकता है (अर्थात resetZindexes) जो कि z-indexes को अपने मूल वैल्यूज पर रीसेट करता है, और फिर इस फ़ंक्शन पर कॉल जोड़ता है (यानी resetZindexes();) Infobox.js को फ़ंक्शन को ट्रिगर करने के लिए जब इन्फोबॉक्स विंडो बंद है।

साइट के लिए कोड की कॉपी के लिए इस पेज के शीर्ष पर दिए गए लिंक पर जाएं, या अब इसे कैसे दिखना चाहिए इसके लाइव संस्करण को देखें। मैंने केवल Glastonbury के लिए पॉप-अप जोड़ा है। अपने आप दूसरों को जोड़ने के लिए बेझिझक रहे!


कस्टमाइज्ड बैनर और नेविगेशन

google-maps-api-activity8

हम मानचित्र के लुक को कस्टमाइज करने के लगभग हैं, लेकिन हम इसे कॉल करने से पहले हमें कुछ नेविगेशन नियंत्रण जोड़ना चाहिए।

Google नक्शे में 12 एरियाज हैं जहां आप मैप कंट्रोल्स, बैनर आदि जोड़ सकते हैं। आप पूरी तरह से इन क्षेत्रों को अनुकूलित कर सकते हैं, जो कुछ भी html आदि जोड़ना चाहते हैं।

हम मानचित्र के दाहिने हाथ पर कस्टम बैनर और नेविगेशन जोड़ना चाहते हैं।

स्टेप 1

आरंभ करने के लिए, मेनू को बनाने के लिए पहले फ़ंक्शन परिभाषित करें। यह कोड निकालने के लिए बहुत लंबा है...

स्टाइल्स के बारे में त्वरित नोट: ऊपर दिए गए कोड JavaScript के उपयोग से अपने स्टाइल्स को परिभाषित करने के लिए एक एलिमेंट के style प्रॉपर्टी का उपयोग करता है। CSS प्रॉपर्टीज को अपने जावास्क्रिप्ट नोटेशन में परिवर्तित करने के लिए, आपको याद रखना चाहिए कि प्रॉपर्टी जो एक हाइफ़न नहीं है, वही रहना है, जबकि हाइफ़न वाले लोग camelCase में बदल जाते हैं, उदाहरण के लिए background-image backgroundImage हो जाता है। अपवाद float है, जो cssFloat हो जाता है।

स्टेप 2

उसके बाद, मेनू को पकड़ने के लिए एक div बनाएं, और इस फ़ंक्शन को आपने 1 स्टेप में बनाए गए फ़ंक्शन को कॉल करके इस div में मेनू जोड़ें।

स्टेप 3

फिर रिलेवेंट लोकेशन में मेनू को जोड़ने के लिए अपने मैप के controls प्रॉपर्टी को सेट करें, इस मामले में RIGHT_TOP

स्टेप 4

अब तक आपके पास कुछ ऐसा होना चाहिए जो आपके मानचित्र के दाएं हाथ की ओर दिखाए जाने वाले कस्टम मेनू की तरह दिखाई दे। इसलिए जो कुछ भी करना बाकी है वह अपने मेन्यू को कुछ करना है...

अगले ट्यूटोरियल्स के दौरान हम स्मॉलर इवेंट्स बटन को Flickr से तस्वीरें रिवील करने के लिए, और अम्ब्रेला बटन को sketched rainfall मैप ओवरले दिखाने के लिए मिलेंगे। (एक क्लिच मुझे पता है, लेकिन हम यहाँ गर्मियों के महीनों के दौरान बारिश का एक अच्छा सा मिलते हैं!)

तो इस ट्यूटोरियल में कुछ काम करने के लिए, मैंने RIGHT_BOTTOM क्षेत्र में रीसेट बटन जोड़ने के लिए उपरोक्त कदम दोहराए हैं। इसमें रीसेट बटन के चारों ओर रैपिंग कोड शामिल होता है जिससे कि handelRequests फ़ंक्शन को कॉल किया जा सकता है।

स्टेप 5

handelRequests फ़ंक्शन कुछ चीज़ें करता है - कोड में कमैंट्स पर एक नज़र डालें।

आप इस पेज के ऊपर से ट्यूटोरियल के इस भाग के लिए html फ़ाइल की एक पूरी प्रति प्राप्त कर सकते हैं, या लाइव उदाहरण पर नज़र रख सकते हैं। केवल Glastonbury मैप मार्कर इस उदाहरण में एक्टिव है।


इसके बाद क्या?

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

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


इमेज क्रेडिट्स

इस ट्यूटोरियल के भीतर इस्तेमाल की गई तस्वीरों को सभी क्रिएटिव कॉमन्स लाइसेंस के तहत जारी किया गया है।

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.