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

परिचय

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

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

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

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

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

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

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

API कुंजी प्राप्त करने के लिए इन चरणों का पालन करें:

  1. YouTube Studio के 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 के लिए बूटस्ट्रैप लोडर, जैसा कि (अपनी 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

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

    <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