एपीआई के साथ वेब पेज पर Google मानचित्र कैसे जोड़ें

यह लेख बताता है कि अपने वेब पेज में स्थान मार्कर के साथ Google मानचित्र कैसे सम्मिलित करें। इस प्रक्रिया में Google से एक विशेष सॉफ़्टवेयर कुंजी प्राप्त करना और फिर प्रासंगिक जावास्क्रिप्ट को पृष्ठ पर जोड़ना शामिल है।

Google मानचित्र API कुंजी प्राप्त करें

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

अपनी एपीआई कुंजी पंजीकृत करने के लिए:

1. के पास जाओ Google क्लाउड प्लेटफ़ॉर्म कंसोल और, अपने Google खाते से लॉग इन करने के बाद, या तो एक नया प्रोजेक्ट बनाएं या किसी मौजूदा को चुनें।

2. क्लिक जारी रखें एपीआई और किसी भी संबंधित सेवाओं को सक्षम करने के लिए।

3. पर साख पृष्ठ, एक प्राप्त करें एपीआई कुंजी. आवश्यकतानुसार, कुंजी पर प्रासंगिक प्रतिबंध सेट करें।

4. उपयोग करके अपनी API कुंजी सुरक्षित करें सर्वोत्तम प्रथाएं Google द्वारा अनुशंसित।

अपने वेब पेज में जावास्क्रिप्ट डालें

HTML दस्तावेज़ के बॉडी सेक्शन में अपने वेब पेज में निम्नलिखित कोड डालें:

// इनिशियलाइज़ करें और मैप फंक्शन को जोड़ें initMap () {
// ध्वज var ध्वज का स्थान = {lat: XXX, lng: YYY};
// नक्शा, ध्वज var map = new google.maps पर केंद्रित है। मानचित्र (दस्तावेज़। getElementById ('नक्शा'), {ज़ूम: 4, केंद्र: ध्वज});
// मार्कर, फ्लैग var मार्कर = new google.maps पर स्थित है। मार्कर ({स्थिति: ध्वज, नक्शा: नक्शा}); } स्रोत = " https://maps.googleapis.com/maps/api/js? key=Your_API_KEY&callback=initMap">

इस कोड में, निम्नलिखित बदलें:

• बदलने के झंडा उस नाम के साथ जो उस स्थान का संदर्भ देता है जिसे आप पिन कर रहे हैं। इसे सरल और छोटा रखें (जैसे घर या कार्यालय या पेरिस या डेट्रॉइट). आप इस कोड को छोड़कर चला सकते हैं झंडा जैसा है, लेकिन नाम बदलने से कई अलग-अलग मानचित्रों को एम्बेड करने के लिए एक ही पृष्ठ पर इस कोड के पुन: उपयोग का समर्थन करता है।
• बदलने के XXX तथा YYY अक्षांश और देशांतर के साथ, दशमलव में, मानचित्र के मार्कर के स्थान का। मानचित्र को ठीक से प्रदर्शित करने के लिए आपको इन मानों को बदलना होगा। अक्षांश और देशांतर खोजने का एक आसान तरीका Google मानचित्र खोलना और उस सटीक स्थान पर राइट-क्लिक करना है जिसे आप फ़्लैग करना चाहते हैं। संदर्भ मेनू में, चुनें यहाँ क्या है? अक्षांश और देशांतर देखने के लिए।
• बदलने के Your_API_KEY Google से प्राप्त API कुंजी के साथ। समान चिह्न और एम्परसेंड के बीच रिक्त स्थान न रखें। कुंजी के बिना, क्वेरी विफल हो जाएगी और नक्शा ठीक से प्रदर्शित नहीं होगा।

इष्टतम अभ्यास

अपने HTML दस्तावेज़ के शीर्ष में, आकार, रंग और पृष्ठ प्लेसमेंट सहित, मानचित्र के लिए CSS बाधाओं को निर्दिष्ट करें।

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

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