एचटीएमएल का इस्तेमाल करके, मार्कर वाला 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>

मैप लोड करने के लिए, आपको 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 पर, पूरा किया गया उदाहरण आज़माएं.

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

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

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

इससे यह मैप बनता है:

आपने जो मैप बनाया है वह सैन जोस मेट्रोपॉलिटन एरिया के बीच में है.

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

मैप में मार्कर जोड़ने के लिए, 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>
index.html

ऊपर दिया गया कोड, दो मार्कर जोड़ता है. साथ ही, उन मार्कर को बेहतर तरीके से दिखाने के लिए, gmp-map पर zoom और center पैरामीटर बदलता है. ऐडवांस मार्कर का इस्तेमाल करने के लिए, मैप आईडी ज़रूरी है. 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>
  </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>
index.html