एचटीएमएल का इस्तेमाल करके, मार्कर वाला Google Maps जोड़ना

परिचय

इस ट्यूटोरियल में, कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके, वेब पेज में मार्कर के साथ Google मैप जोड़ने का तरीका बताया गया है. इस ट्यूटोरियल का इस्तेमाल करके, आपको यह मैप बनाना होगा. मार्कर को आयोवा के ओटमवा में रखा गया है.

अपनी प्रोफ़ाइल बनाना शुरू करें

एचटीएमएल का इस्तेमाल करके, मार्कर वाला Google मैप बनाने के लिए, हम यह तरीका अपनाएंगे:

  1. एपीआई पासकोड पाना
  2. एचटीएमएल, सीएसएस, और JS बनाना
  3. मैप जोड़ना
  4. मार्कर जोड़ना

इसके लिए, आपको वेब ब्राउज़र की ज़रूरत होगी. अपने प्लैटफ़ॉर्म के हिसाब से, Google Earth के साथ काम करने वाले ब्राउज़र की सूची में से कोई लोकप्रिय ब्राउज़र चुनें. जैसे, Google Chrome (सुझाया गया), Firefox, Safari या Edge.

पहला चरण: एपीआई कुंजी पाना

इस सेक्शन में, अपने एपीआई पासकोड का इस्तेमाल करके, Maps JavaScript API के लिए अपने ऐप्लिकेशन की पुष्टि करने का तरीका बताया गया है.

एपीआई कुंजी पाने के लिए, यह तरीका अपनाएं:

  1. Google Cloud Console पर जाएं.

  2. कोई प्रोजेक्ट बनाएं या चुनें.

  3. एपीआई और उससे जुड़ी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.

  4. क्रेडेंशियल पेज पर जाकर, एपीआई पासकोड पाएं. साथ ही, एपीआई पासकोड से जुड़ी पाबंदियां सेट करें. ध्यान दें: अगर आपके पास बिना किसी पाबंदी वाली मौजूदा एपीआई कुंजी है या ब्राउज़र से जुड़ी पाबंदियों वाली कुंजी है, तो उसका इस्तेमाल किया जा सकता है.

  5. कोटा चुराने से रोकने और अपने एपीआई पासकोड को सुरक्षित रखने के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें.

  6. बिलिंग की सुविधा चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.

  7. अब आपकी एपीआई कुंजी इस्तेमाल के लिए तैयार है.

दूसरा चरण: एचटीएमएल, सीएसएस, और 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>

मैप लोड करने के लिए, आपको script टैग जोड़ना होगा. इसमें Maps JavaScript API के लिए बूटस्ट्रैप लोडर शामिल होता है. इसे यहां दिए गए स्निपेट में दिखाया गया है. इसमें अपना एपीआई पासकोड जोड़ें:

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

स्पॉइलर अलर्ट: JSFiddle पर, पूरा उदाहरण आज़माएं.

तीसरा चरण: मैप जोड़ना

पेज में Google मैप जोड़ने के लिए, gmp-map एचटीएमएल एलिमेंट को कॉपी करें और उसे एचटीएमएल पेज के body में चिपकाएं:

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

इससे आयोवा के ओटमवा शहर के हिसाब से मैप बन जाता है. हालांकि, इसमें अभी तक कोई मार्कर नहीं है.

चौथा चरण: मार्कर जोड़ना

मैप में मार्कर जोड़ने के लिए, gmp-advanced-marker एचटीएमएल एलिमेंट का इस्तेमाल करें. यहां दिए गए स्निपेट को कॉपी करें और पिछले चरण में जोड़े गए पूरे gmp-map पर चिपकाएं.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID"
>
  <gmp-advanced-marker
    position="41.027748173921374, -92.41852445367961"
    title="Ottumwa, IA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

ऊपर दिया गया कोड, मैप में एक मार्कर जोड़ता है. ऐडवांस मार्कर का इस्तेमाल करने के लिए, मैप आईडी की ज़रूरत होती है. DEMO_MAP_ID का इस्तेमाल किया जा सकता है.

सलाह और समस्या हल करना

  • कस्टम स्टाइलिंग का इस्तेमाल करके, मैप को अपनी पसंद के मुताबिक बनाया जा सकता है.
  • अपने वेब ब्राउज़र में डेवलपर टूल कंसोल का इस्तेमाल करके, अपने कोड की जांच करें और उसे चलाएं. साथ ही, गड़बड़ी की रिपोर्ट पढ़ें और अपने कोड से जुड़ी समस्याओं को हल करें.
  • Chrome में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
    Mac पर Command+Option+J या Windows पर Control+Shift+J.

  • Google Maps पर किसी जगह के अक्षांश और देशांतर के निर्देशांक पाने के लिए, नीचे दिया गया तरीका अपनाएं.

    1. किसी ब्राउज़र में Google Maps खोलें.
    2. मैप पर उस जगह पर राइट क्लिक करें जिसके लिए आपको निर्देशांक चाहिए.
    3. दिखने वाले संदर्भ मेन्यू में, यहां क्या है चुनें. मैप, स्क्रीन पर सबसे नीचे एक कार्ड दिखाता है. कार्ड की आखिरी लाइन में, अक्षांश और देशांतर के निर्देशांक ढूंढें.

  • जियोकोडिंग सेवा का इस्तेमाल करके, किसी पते को अक्षांश और देशांतर निर्देशांकों में बदला जा सकता है. डेवलपर गाइड में, जियोकोडिंग सेवा का इस्तेमाल शुरू करने के बारे में पूरी जानकारी दी गई है.

पूरे कोड का उदाहरण

यहां इस ट्यूटोरियल में इस्तेमाल किया गया फ़ाइनल मैप और पूरा उदाहरण कोड दिया गया है.

<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>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <gmp-map
      center="41.027748173921374, -92.41852445367961"
      zoom="13"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"
      ></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>
index.html