परिचय
इस ट्यूटोरियल में, किसी वेब पेज पर मार्कर के साथ आसान Google मैप जोड़ने का तरीका बताया गया है. यह उन लोगों के लिए है जिनके पास एचटीएमएल और सीएसएस के बारे में शुरुआती या इंटरमीडिएट लेवल की जानकारी है. साथ ही, जिनके पास JavaScript के बारे में थोड़ी जानकारी है.
यहां वह मैप दिया गया है जिसे इस ट्यूटोरियल की मदद से बनाया जाएगा. मार्कर, उलुरू-काता तजुता नेशनल पार्क में उलुरू (इसे अयेर्स रॉक भी कहा जाता है) पर मौजूद है.
शुरू करना
अपने वेब पेज पर मार्कर वाला Google मैप बनाने के लिए, ये तीन चरण अपनाएं:
आपके पास वेब ब्राउज़र होना चाहिए. काम करने वाले ब्राउज़र की सूची में से, अपने प्लैटफ़ॉर्म के हिसाब से कोई लोकप्रिय ब्राउज़र चुनें. जैसे, Google Chrome (इसका सुझाव दिया जाता है), Firefox, Safari या Edge.
पहला चरण: एपीआई पासकोड पाना
इस सेक्शन में, अपनी एपीआई पासकोड का इस्तेमाल करके, Maps JavaScript API के लिए अपने ऐप्लिकेशन की पुष्टि करने का तरीका बताया गया है.
API कुंजी प्राप्त करने के लिए इन चरणों का पालन करें:
Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और उससे जुड़ी किसी भी सेवा को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर, एपीआई पासकोड पाएं और एपीआई पासकोड से जुड़ी पाबंदियां सेट करें. ध्यान दें: अगर आपके पास बिना पाबंदी वाली कोई मौजूदा एपीआई कुंजी है या ब्राउज़र से जुड़ी पाबंदियों वाली कोई कुंजी है, तो उसका इस्तेमाल किया जा सकता है.
कोटा चोरी होने से बचाने और अपनी एपीआई कुंजी को सुरक्षित करने के लिए, एपीआई पासकोड का इस्तेमाल करना देखें.
बिलिंग चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.
एक API कुंजी मिल जाने के बाद, "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 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
ध्यान दें कि यह एक बहुत ही बुनियादी पेज है, जिसमें हेडिंग लेवल तीन (h3
) और एक div
एलिमेंट है. वेब पेज पर अपनी पसंद का कोई भी कॉन्टेंट जोड़ा जा सकता है.
कोड को समझना
उदाहरण में इस चरण में, हमारे पास ये चीज़ें हैं:
!DOCTYPE html
एलान का इस्तेमाल करके, ऐप्लिकेशन को HTML5 के तौर पर एलान किया गया हो.- मैप को होल्ड करने के लिए, "मैप" नाम का एक div एलिमेंट बनाया गया.
- बूटस्ट्रैप लोडर का इस्तेमाल करके, Maps JavaScript API को लोड किया.
अपने ऐप्लिकेशन को HTML5 के तौर पर एलान करना
हमारा सुझाव है कि आप अपने वेब ऐप्लिकेशन में सही DOCTYPE
का एलान करें.
यहां दिए गए उदाहरणों में, हमने आसान HTML5 DOCTYPE
का इस्तेमाल करके, अपने ऐप्लिकेशन को HTML5 के तौर पर एलान किया है, जैसा कि यहां दिखाया गया है:
<!DOCTYPE html>
ज़्यादातर मौजूदा ब्राउज़र, "स्टैंडर्ड मोड" में इस DOCTYPE
के साथ एलान किए गए कॉन्टेंट को रेंडर करेंगे. इसका मतलब है कि आपका ऐप्लिकेशन, अलग-अलग ब्राउज़र के साथ ज़्यादा काम करना चाहिए. DOCTYPE
को इस तरह से डिज़ाइन किया गया है कि यह ब्राउज़र के हिसाब से काम करे. ऐसे ब्राउज़र जो इसे समझ नहीं पाते वे इसे अनदेखा कर देंगे और अपना कॉन्टेंट दिखाने के लिए "क्विर्क मोड" का इस्तेमाल करेंगे.
ध्यान दें कि quirks मोड में काम करने वाली कुछ सीएसएस, स्टैंडर्ड मोड में काम नहीं करती हैं. खास तौर पर, प्रतिशत पर आधारित सभी साइज़, पैरंट ब्लॉक एलिमेंट से इनहेरिट होने चाहिए. अगर उनमें से कोई भी ऐवरेज कोई साइज़ तय नहीं कर पाता है, तो उसे 0 x 0 पिक्सल माना जाता है. इसी वजह से, हम यह style
एलान शामिल करते हैं:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
div तत्व बनाएं
किसी वेब पेज पर मैप दिखाने के लिए, हमें उसके लिए जगह तय करनी होगी. आम तौर पर, हम ऐसा नाम वाला div
एलिमेंट बनाकर करते हैं और ब्राउज़र के दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में इस एलिमेंट का रेफ़रंस पाते हैं.
यहां दिया गया कोड, आपके Google मैप के लिए पेज के किसी इलाके की जानकारी देता है.
<!--The div element for the map --> <div id="map"></div>
ट्यूटोरियल के इस चरण में, div
सिर्फ़ एक स्लेटी रंग के ब्लॉक के तौर पर दिखता है, क्योंकि आपने अब तक कोई मैप नहीं जोड़ा है. नीचे दिया गया कोड उस सीएसएस के बारे में बताता है जो div
का साइज़ और रंग सेट करता है.
/* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
ऊपर दिए गए कोड में, style
एलिमेंट आपके मैप के लिए div
का साइज़ सेट करता है. मैप दिखने के लिए, div
की चौड़ाई और ऊंचाई को 0px से ज़्यादा पर सेट करें. इस मामले में, div
को आपके वेब पेज की पूरी चौड़ाई दिखाने के लिए 400 पिक्सल की ऊंचाई और 100% चौड़ाई पर सेट किया गया है. ध्यान दें कि आम तौर पर, डिव अपनी चौड़ाई, अपने एलिमेंट से लेते हैं. साथ ही, खाली डिव की ऊंचाई आम तौर पर 0 होती है. इस वजह से, आपको हमेशा div
पर ऊंचाई सेट करनी होगी.
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>
अपनी एपीआई पासकोड पाने के लिए, तीसरा चरण: एपीआई पासकोड पाना देखें.
चरण 3: मार्कर की मदद से मैप जोड़ना
इस सेक्शन में आपको अपने वेब पेज पर Maps JavaScript API को लोड करने का तरीका और मार्कर के साथ मैप जोड़ने के लिए एपीआई का इस्तेमाल करने वाला JavaScript कोड लिखने का तरीका बताया गया है.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
ऊपर दिए गए कोड में, initMap()
फ़ंक्शन को कॉल करने पर Map
और AdvancedMarkerElement
लाइब्रेरी लोड होती हैं.
कोड को समझना
ट्यूटोरियल के इस चरण में, हमारे पास ये चीज़ें हैं:
- यह एक JavaScript फ़ंक्शन तय करता है, जो div में एक मैप बनाता है.
- मैप में मार्कर जोड़ने के लिए,
AdvancedMarkerElement
बनाया.
मैप जोड़ना
नीचे दिया गया कोड, एक नया Google Maps ऑब्जेक्ट बनाता है और मैप में प्रॉपर्टी जोड़ता है. इनमें मैप का केंद्र और ज़ूम लेवल भी शामिल है. प्रॉपर्टी के अन्य विकल्पों के लिए दस्तावेज़ देखें.
TypeScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
हर मैप के लिए दो ज़रूरी विकल्प हैं: center
और zoom
. ऊपर दिए गए कोड में, new Map()
एक नया Google Maps ऑब्जेक्ट बनाता है. center
प्रॉपर्टी से एपीआई को
यह पता चलता है कि मैप को कहां फ़ोकस करना है.
zoom
प्रॉपर्टी से मैप के लिए ज़ूम लेवल की जानकारी मिलती है. ज़ूम: 0 सबसे कम ज़ूम है और इसमें पूरी धरती दिखती है. ज़्यादा रिज़ॉल्यूशन में Earth पर ज़ूम इन करने के लिए, ज़ूम की वैल्यू को ज़्यादा पर सेट करें.
पूरी पृथ्वी का मैप एक इमेज के तौर पर दिखाने के लिए, बहुत बड़ा मैप या बहुत कम रिज़ॉल्यूशन वाला छोटा मैप दिखाना होगा. इस वजह से, Google Maps और Maps JavaScript API में मौजूद मैप इमेज मैप "टाइल" और "ज़ूम लेवल" में बंट जाती हैं. ज़ूम लेवल कम होने पर, मैप टाइल का एक छोटा सेट बड़े इलाके को कवर करता है. ज़ूम लेवल ज़्यादा होने पर, टाइल का रिज़ॉल्यूशन ज़्यादा होता है और ये छोटे इलाके को कवर करती हैं. इस सूची में बताया गया है कि ज़ूम के हर लेवल पर, आपको कितनी जानकारी दिख सकती है:
- 1: दुनिया
- 5: लैंडमास या महाद्वीप
- 10: शहर
- 15: सड़कें
- 20: इमारतें
यहां दी गई तीन इमेज में, ज़ूम लेवल 0, 7, और 18 पर, टोक्यो की एक ही जगह को दिखाया गया है.
कोई मार्कर जोड़ें
नीचे दिया गया कोड, मैप पर मार्कर डालता है. position
प्रॉपर्टी, मार्कर की स्थिति सेट करती है.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
पूरा कोड का उदाहरण
उदाहरण के लिए, यहां पूरा कोड देखें:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
एचटीएमएल
<html> <head> <title>Add Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
सैंपल आज़माएं
मार्कर के बारे में ज़्यादा जानें:
सलाह और समस्या हल करना
- अक्षांश/देशांतर के निर्देशांक पाने या किसी पते को भौगोलिक निर्देशांक में बदलने के बारे में ज़्यादा जानें.
- मैप को पसंद के मुताबिक बनाने के लिए, स्टाइल और प्रॉपर्टी जैसे विकल्पों में बदलाव किया जा सकता है. मैप को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानकारी के लिए, स्टाइल और मैप पर ड्रॉइंग बनाने की गाइड पढ़ें.
- अपने कोड की जांच करने और उसे चलाने, गड़बड़ी की रिपोर्ट पढ़ने, और कोड से जुड़ी समस्याएं हल करने के लिए, अपने वेब ब्राउज़र में Developer Tools Console का इस्तेमाल करें.
- Chrome में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
Mac पर Command+Option+J या Windows पर Control+Shift+J. Google Maps पर किसी जगह के अक्षांश और देशांतर के निर्देशांक पाने के लिए, नीचे दिया गया तरीका अपनाएं.
- किसी ब्राउज़र में Google Maps खोलें.
- मैप पर उस सटीक जगह पर राइट क्लिक करें जिसके लिए आपको निर्देशांकों की ज़रूरत है.
- इसके बाद, दिख रहे संदर्भ मेन्यू से यहां क्या है को चुनें. मैप में स्क्रीन पर सबसे नीचे एक कार्ड दिखता है. कार्ड की आखिरी लाइन में, अक्षांश और देशांतर के निर्देशांक देखें.
जियोकोडिंग सेवा का इस्तेमाल करके, किसी पते को अक्षांश और देशांतर के निर्देशांक में बदला जा सकता है. डेवलपर गाइड जियोकोडिंग सेवा का इस्तेमाल शुरू करने के बारे में ज़्यादा जानकारी देती हैं.