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

परिचय

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

शुरू करें

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

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

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

पहला चरण: एपीआई पासकोड पाना

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

एपीआई पासकोड पाने के लिए, यह तरीका अपनाएं:

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

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

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

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

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

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

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

दूसरा चरण: एचटीएमएल, सीएसएस, और JavaScript बनाना

यहां एक सामान्य एचटीएमएल वेब पेज का कोड दिया गया है:

<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>

एचटीएमएल पेज को स्टैंडअलोन होना चाहिए. इसलिए, सीएसएस कोड को सीधे पेज में जोड़ें:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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

पेज में 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>

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

पूरा हो चुका उदाहरण, JSFiddle पर आज़माएं.

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

  • कस्टम स्टाइलिंग की मदद से, मैप को अपनी पसंद के मुताबिक बनाया जा सकता है.
  • अपने कोड की जांच करने और उसे चलाने, गड़बड़ी की रिपोर्ट पढ़ने, और अपने कोड से जुड़ी समस्याओं को हल करने के लिए, अपने वेब ब्राउज़र में डेवलपर टूल कंसोल का इस्तेमाल करें.
  • 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>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            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>