Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

JavaScript का इस्तेमाल करके, मार्कर के साथ Google Maps जोड़ना

परिचय

इस ट्यूटोरियल में, HTML, CSS, और JavaScript का इस्तेमाल करके, वेब पेज में मार्कर के साथ Google Maps जोड़ने का तरीका बताया गया है. इसमें, मैप के विकल्प सेट करने और मैप में लेबल जोड़ने के लिए, कंट्रोल स्लॉटिंग का इस्तेमाल करने का तरीका भी बताया गया है.

इस ट्यूटोरियल की मदद से, यहां दिखाया गया मैप बनाया जा सकता है. मार्कर, उलुरू-काता तजुता राष्ट्रीय पार्क में मौजूद उलुरू (इसे अयेर्स रॉक के नाम से भी जाना जाता है) पर मौजूद है.

शुरू करना

अपने वेब पेज पर मार्कर के साथ Google Maps बनाने के लिए, ये तीन चरण पूरे करें:

एपीआई पासकोड पाना
एचटीएमएल पेज बनाना
मार्कर के साथ मैप जोड़ना

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

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

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

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

Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और उससे जुड़ी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर, एपीआई पासकोड पाएं. साथ ही, एपीआई पासकोड पर पाबंदियां सेट करें. ध्यान दें: अगर आपके पास पहले से कोई ऐसा एपीआई पासकोड है जिस पर कोई पाबंदी नहीं है या ऐसा पासकोड है जिस पर ब्राउज़र से जुड़ी पाबंदियां लगी हैं, तो उस पासकोड का इस्तेमाल किया जा सकता है.
कोटा चुराने से रोकने और अपने एपीआई पासकोड को सुरक्षित रखने के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें.
बिलिंग की सुविधा चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग लेख पढ़ें.

एपीआई पासकोड पाने के बाद, "YOUR_API_KEY" पर क्लिक करके, उसे यहां दिए गए स्निपेट में जोड़ें. बूटलोडर स्क्रिप्ट टैग को कॉपी करें और अपने वेब पेज पर चिपकाएं.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

दूसरा चरण: एचटीएमएल पेज बनाना

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>Add a Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

यह एक सामान्य एचटीएमएल पेज है. इसमें पेज पर मैप दिखाने के लिए, a gmp-map element का इस्तेमाल किया गया है. मैप खाली दिखेगा, क्योंकि हमने अब तक कोई JavaScript कोड नहीं जोड़ा है.

कोड को समझना

उदाहरण के इस चरण में, हमारे पास ये चीज़ें हैं:

!DOCTYPE html एलान का इस्तेमाल करके, ऐप्लिकेशन को HTML5 के तौर पर एलान किया गया है.
बूटस्ट्रैप लोडर का इस्तेमाल करके, Maps JavaScript API लोड किया गया है.
मैप को होल्ड करने के लिए, gmp-map एलिमेंट बनाया गया है.

अपने ऐप्लिकेशन को HTML5 के तौर पर एलान करना

हमारा सुझाव है कि अपने वेब ऐप्लिकेशन में, सही DOCTYPE एलान करें. यहां दिए गए उदाहरणों में, हमने अपने ऐप्लिकेशन को HTML5 के तौर पर एलान किया है. इसके लिए, नीचे दिखाए गए HTML5 DOCTYPE का इस्तेमाल किया गया है:

<!DOCTYPE html>

मौजूदा समय के ज़्यादातर ब्राउज़र, इस DOCTYPE के साथ एलान किए गए कॉन्टेंट को "स्टैंडर्ड मोड" में रेंडर करेंगे. इसका मतलब है कि आपका ऐप्लिकेशन, अलग-अलग ब्राउज़र पर बेहतर तरीके से काम करेगा. DOCTYPE को इस तरह से डिज़ाइन किया गया है कि यह ब्राउज़र के साथ बेहतर तरीके से काम करे. जो ब्राउज़र इसे नहीं समझते वे इसे अनदेखा कर देंगे और कॉन्टेंट दिखाने के लिए "क्वर्क्स मोड" का इस्तेमाल करेंगे.

ध्यान दें कि क्वर्क्स मोड में काम करने वाला कुछ सीएसएस, स्टैंडर्ड मोड में मान्य नहीं होता. खास तौर पर, प्रतिशत के आधार पर तय किए गए सभी साइज़, पैरंट ब्लॉक एलिमेंट से इनहेरिट होने चाहिए. अगर इनमें से कोई भी पूर्वज साइज़ तय नहीं करता है, तो मान लिया जाता है कि उनका साइज़ 0 x 0 पिक्सल है. इसलिए, हम यहां दिया गया style एलान शामिल करते हैं:

<style>
  gmp-map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Maps JavaScript API लोड करना

बूटस्ट्रैप लोडर, Maps JavaScript API को लोड करने के लिए तैयार करता है. importLibrary() को कॉल किए जाने तक, कोई लाइब्रेरी लोड नहीं की जाती.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

अपना एपीआई पासकोड पाने के निर्देशों के लिए, तीसरा चरण: एपीआई पासकोड पाना देखें.

ट्यूटोरियल के इस चरण में, एक खाली विंडो दिखती है. इसमें सिर्फ़ फ़ॉर्मैट नहीं किया गया लेबल टेक्स्ट दिखता है. ऐसा इसलिए है, क्योंकि हमने अब तक कोई JavaScript कोड नहीं जोड़ा है.

`gmp-map` एलिमेंट बनाना

किसी वेब पेज पर मैप दिखाने के लिए, हमें उसके लिए जगह रिज़र्व करनी होगी. आम तौर पर, हम gmp-map एलिमेंट बनाकर और ब्राउज़र के दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) में इस एलिमेंट का रेफ़रंस पाकर ऐसा करते हैं. इसके लिए, a div एलिमेंट का भी इस्तेमाल किया जा सकता है (ज़्यादा जानें). हालांकि, हमारा सुझाव है कि gmp-map एलिमेंट का इस्तेमाल करें.

यहां दिए गए कोड में, gmp-map एलिमेंट की परिभाषा दी गई है. साथ ही, center, zoom, और map-id पैरामीटर सेट किए गए हैं.

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

center और zoom विकल्प हमेशा ज़रूरी होते हैं. ऊपर दिए गए कोड में, center प्रॉपर्टी, एपीआई को बताती है कि मैप को कहां पर सेंटर करना है. वहीं, zoom प्रॉपर्टी, मैप के लिए ज़ूम लेवल तय करती है. ज़ूम: 0 सबसे कम ज़ूम लेवल है. इससे पूरी पृथ्वी दिखती है. ज़्यादा रिज़ॉल्यूशन पर पृथ्वी को ज़ूम इन करने के लिए, ज़ूम की वैल्यू ज़्यादा सेट करें.

ज़ूम करने के लेवल

पूरी पृथ्वी का मैप, एक इमेज के तौर पर दिखाने के लिए, या तो बहुत बड़ा मैप चाहिए होगा या बहुत कम रिज़ॉल्यूशन वाला छोटा मैप. इसलिए, Google Maps और Maps JavaScript API में मौजूद मैप की इमेज को, मैप "टाइल" और "ज़ूम लेवल" में बांटा जाता है. कम ज़ूम लेवल पर, मैप टाइल का एक छोटा सेट, बड़े इलाके को कवर करता है. वहीं, ज़्यादा ज़ूम लेवल पर, टाइल का रिज़ॉल्यूशन ज़्यादा होता है और वे छोटे इलाके को कवर करती हैं. यहां दी गई सूची में, ज़ूम के हर लेवल पर दिखने वाली जानकारी के अनुमानित लेवल के बारे में बताया गया है:

1: दुनिया
5: भूखंड या महाद्वीप
10: शहर
15: सड़कें
20: बिल्डिंग

यहां दी गई तीन इमेज में, टोक्यो की एक ही जगह को ज़ूम लेवल 0, 7, और 18 पर दिखाया गया है.

यहां दिए गए कोड में, gmp-map एलिमेंट का साइज़ सेट करने वाले सीएसएस के बारे में बताया गया है.

/* Set the size of the gmp-map element that contains the map */
gmp-map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

ऊपर दिए गए कोड में, style एलिमेंट, gmp-map का साइज़ सेट करता है. मैप को दिखाने के लिए, चौड़ाई और ऊंचाई को 0 पिक्सल से ज़्यादा पर सेट करें. इस मामले में, gmp-map की ऊंचाई 400 पिक्सल और चौड़ाई 100% पर सेट की गई है, ताकि यह वेब पेज की पूरी चौड़ाई में दिखे. हमारा सुझाव है कि ऊंचाई और चौड़ाई की स्टाइल को हमेशा साफ़ तौर पर सेट करें.

कंट्रोल स्लॉटिंग

मैप में एचटीएमएल फ़ॉर्म कंट्रोल जोड़ने के लिए, कंट्रोल स्लॉटिंग का इस्तेमाल किया जा सकता है. स्लॉट, मैप पर पहले से तय की गई जगह होती है. किसी एलिमेंट के लिए ज़रूरी जगह सेट करने के लिए, slot एट्रिब्यूट का इस्तेमाल करें. साथ ही, gmp-map एलिमेंट में एलिमेंट नेस्ट करें. यहां दिए गए स्निपेट में, मैप के ऊपरी-बाएं कोने में एचटीएमएल लेबल जोड़ने का तरीका दिखाया गया है.