एचटीएमएल का इस्तेमाल करके मार्कर के साथ Google मैप जोड़ें

शुरुआती जानकारी

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

शुरू करें

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

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

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

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

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

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&loading=async&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>
index.html

पिछला कोड दो मार्कर जोड़ता है और gmp-map पर zoom और center पैरामीटर में बदलाव करता है, ताकि उन मार्कर को बेहतर तरीके से दिखाया जा सके. बेहतर मार्कर का इस्तेमाल करने के लिए मैप आईडी ज़रूरी है (DEMO_MAP_ID इस्तेमाल करना ठीक है).

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

  • आप मैप को अपनी पसंद के मुताबिक स्टाइल से पसंद के मुताबिक बना सकते हैं.
  • अपने कोड की जांच करने और उसे चलाने, गड़बड़ी की रिपोर्ट पढ़ने, और कोड से जुड़ी समस्याएं हल करने के लिए, अपने वेब ब्राउज़र में Developer Tools Console का इस्तेमाल करें.
  • 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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