परिचय
इस ट्यूटोरियल में आपको एचटीएमएल का इस्तेमाल करके, किसी वेब पेज पर मार्कर के साथ Google मैप जोड़ने का तरीका बताया गया है. यहां वह मैप दिया गया है जिसे इस ट्यूटोरियल की मदद से बनाया जाएगा. दो मार्कर, एक माउंटेन व्यू, कैलिफ़ोर्निया और दूसरा सिएटल, वाशिंगटन में हैं.
अपनी प्रोफ़ाइल बनाना शुरू करें
एचटीएमएल का इस्तेमाल करके मार्कर वाला Google मैप बनाने के लिए हम इन चरणों को बताएंगे:
आपके पास वेब ब्राउज़र होना चाहिए. इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची में से, अपने प्लैटफ़ॉर्म के हिसाब से, Google Chrome (सुझाया गया), Firefox, Safari या Edge जैसा कोई लोकप्रिय ऐप्लिकेशन चुनें.
पहला चरण: एपीआई पासकोड पाना
इस सेक्शन में, अपनी एपीआई पासकोड का इस्तेमाल करके, Maps JavaScript API के लिए अपने ऐप्लिकेशन की पुष्टि करने का तरीका बताया गया है.
एपीआई पासकोड पाने के लिए, यह तरीका अपनाएं:
Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और उससे जुड़ी किसी भी सेवा को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर, एपीआई पासकोड पाएं और एपीआई पासकोड की पाबंदियां सेट करें. ध्यान दें: अगर आपके पास बिना पाबंदी वाली कोई मौजूदा एपीआई कुंजी है या ब्राउज़र से जुड़ी पाबंदियों वाली कोई कुंजी है, तो उसका इस्तेमाल किया जा सकता है.
कोटा चोरी होने से बचाने और अपनी एपीआई कुंजी को सुरक्षित करने के लिए, एपीआई पासकोड का इस्तेमाल करना देखें.
बिलिंग चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.
अब आप एपीआई पासकोड का इस्तेमाल करने के लिए तैयार हैं.
दूसरा चरण: एचटीएमएल, सीएसएस, और JS बनाना
यहां एक बुनियादी एचटीएमएल वेब पेज का कोड दिया गया है:
<html> <head> <title>Add a Map with Markers using HTML</title> <!-- TODO: Add bootstrap script tag. --> </head> <body> <!-- TODO: Add a map with markers. --> </body> </html>
मैप लोड करने के लिए, आपको Maps JavaScript API के लिए बूटस्ट्रैप लोडर वाला script
टैग जोड़ना होगा. जैसा कि यहां दिए गए स्निपेट में दिखाया गया है, अपनी एपीआई पासकोड जोड़ें:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta" defer ></script>
स्पॉइलर अलर्ट: JSFiddle पर दिया गया उदाहरण आज़माएं.
चरण 3: मैप जोड़ें
पेज में Google मैप जोड़ने के लिए, gmp-map
एचटीएमएल एलिमेंट को कॉपी करें और उसे एचटीएमएल पेज के body
में चिपकाएं:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
इससे यह मैप बनता है:
आपने अभी जो मैप बनाया है वह सैन होज़े महानगरीय क्षेत्र पर आधारित है.
चरण 4: मार्कर जोड़ना
मैप में मार्कर जोड़ने के लिए, gmp-advanced-marker
एचटीएमएल एलिमेंट का इस्तेमाल करें.
नीचे दिया गया स्निपेट कॉपी करें और उसे पिछले चरण में जोड़े गए पूरे gmp-map
पर चिपकाएं.
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
ऊपर दिया गया कोड, दो मार्कर जोड़ता है. साथ ही, उन मार्कर को बेहतर तरीके से दिखाने के लिए, gmp-map
पर zoom
और center
पैरामीटर बदलता है. ऐडवांस मार्कर का इस्तेमाल करने के लिए, मैप आईडी ज़रूरी है. DEMO_MAP_ID
का इस्तेमाल किया जा सकता है.
सलाह और समस्या का हल
- मैप को अपनी पसंद के मुताबिक स्टाइल में बनाया जा सकता है.
- अपने कोड की जांच करने और उसे चलाने, गड़बड़ी की रिपोर्ट पढ़ने, और कोड से जुड़ी समस्याएं हल करने के लिए, अपने वेब ब्राउज़र में Developer Tools Console का इस्तेमाल करें.
- Chrome में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
Mac पर Command+Option+J या Windows पर Control+Shift+J. Google Maps पर किसी जगह के अक्षांश और देशांतर निर्देशांक देखने के लिए, नीचे दिया गया तरीका अपनाएं.
- किसी ब्राउज़र में Google Maps खोलें.
- मैप पर उस सटीक जगह पर राइट क्लिक करें जिसके लिए आपको निर्देशांकों की ज़रूरत है.
- इसके बाद दिखने वाले 'संदर्भ मेन्यू' से यहां क्या है चुनें. मैप में स्क्रीन पर सबसे नीचे एक कार्ड दिखता है. कार्ड की आखिरी पंक्ति में अक्षांश और देशांतर निर्देशांक देखें.
जियोकोडिंग सेवा का इस्तेमाल करके, किसी पते को अक्षांश और देशांतर के निर्देशांक में बदला जा सकता है. डेवलपर गाइड जियोकोडिंग सेवा का इस्तेमाल शुरू करने के बारे में ज़्यादा जानकारी देती हैं.
पूरे उदाहरण का कोड
यहां आखिरी मैप दिया गया है और इस ट्यूटोरियल के लिए इस्तेमाल किया गया पूरा उदाहरण कोड है.
<html> <head> <title>Add a Map with Markers using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta" defer ></script> </body> </html>