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

परिचय

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

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

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

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

आपको एक वेब ब्राउज़र की ज़रूरत होगी. इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची में से, अपने प्लैटफ़ॉर्म के हिसाब से कोई लोकप्रिय ब्राउज़र चुनें. जैसे, 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
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></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
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></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 में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
    Command+Option+J (Mac पर) या Control+Shift+J (Windows पर).

  • 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
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></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>