परिचय
इस ट्यूटोरियल में, वेब पर मार्कर की मदद से Google Maps जोड़ने का तरीका बताया गया है पेज. यह उन लोगों के लिए सही है जिन्हें एचटीएमएल और सीएसएस की शुरुआती या इंटरमीडिएट जानकारी है. और JavaScript की थोड़ी-बहुत जानकारी है.
नीचे वह मैप दिया गया है जिसे इस ट्यूटोरियल का इस्तेमाल करके बनाया जाएगा. मार्कर इस पर स्थित है उलरू (जिसे अयेर्स रॉक भी कहा जाता है) उलुरू-काता जुता नैशनल पार्क
शुरू करना
आपके वेब पेज पर मार्कर के साथ Google मैप बनाने के तीन चरण हैं:
आपको वेब ब्राउज़र की ज़रूरत होगी. Google Chrome जैसा कोई लोकप्रिय टैग चुनें (सुझाया गया), Firefox, Safari या Edge पर सेट किया गया है. इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची देखें.
पहला चरण: एपीआई पासकोड पाना
इस सेक्शन में बताया गया है कि Maps JavaScript API को सेट अप करने के लिए, एपीआई पासकोड का इस्तेमाल करें.
API कुंजी प्राप्त करने के लिए इन चरणों का पालन करें:
YouTube Studio के 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 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 के तौर पर एलान किया गया था.- "map" नाम का एक div तत्व बनाया गया मैप को होल्ड करने के लिए.
- बूटस्ट्रैप लोडर का इस्तेमाल करके Maps JavaScript API को लोड किया गया.
अपने ऐप्लिकेशन को HTML5 के रूप में घोषित करें
हमारा सुझाव है कि आप अपने वेब ऐप्लिकेशन में सही DOCTYPE
के बारे में जानकारी दें.
यहां दिए गए उदाहरणों में, हमने
सामान्य HTML5 DOCTYPE
, जैसा कि नीचे दिखाया गया है:
<!DOCTYPE html>
ज़्यादातर मौजूदा ब्राउज़र इस DOCTYPE
के साथ बताए गए कॉन्टेंट को रेंडर करेंगे
"स्टैंडर्ड मोड" में इसका मतलब है कि आपका ऐप्लिकेशन
क्रॉस-ब्राउज़र का अनुपालन करता है. DOCTYPE
को ग्रेसफ़ुल तरीके से डिग्रेड करने के लिए भी डिज़ाइन किया गया है;
ब्राउज़र जो उसे नहीं समझते, उसे अनदेखा कर देंगे और "क्वर्क्स मोड" का उपयोग करेंगे से
कॉन्टेंट दिखाने के लिए करते हैं.
ध्यान दें कि क्वर्क मोड (पुराने वर्शन पर काम करने की सुविधा) में काम करने वाले कुछ सीएसएस इन कोड में मान्य नहीं हैं
के लिए स्टैंडर्ड मोड का इस्तेमाल करें. खास तौर पर, प्रतिशत पर आधारित सभी साइज़, इनहेरिट किए जाने चाहिए
और अगर उनमें से कोई भी ऐवरेज एलिमेंट
कोई साइज़ तय करते हैं, तो उन्हें 0 x 0 पिक्सल का माना जाता है. इसके लिए
इसलिए, हम style
से जुड़ा यह एलान शामिल करते हैं:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
div तत्व बनाएं
किसी वेब पेज पर मैप दिखे, इसके लिए हमें एक जगह बुक करनी होगी. आम तौर पर,
हम ऐसा नाम div
एलिमेंट बनाकर और इसका रेफ़रंस लेकर करते हैं
तत्व है.
नीचे दिया गया कोड आपके 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
की चौड़ाई और ऊंचाई 0 पिक्सल से ज़्यादा होनी चाहिए. इसमें
केस में, div
की ऊंचाई 400 पिक्सल और डिसप्ले के लिए 100% पर सेट है
पूरे वेब पेज की चौड़ाई में. ध्यान दें कि divs आमतौर पर अपनी चौड़ाई चुनते हैं
और खाली divs की ऊंचाई आमतौर पर 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();
ऊपर दिए गए कोड में, Map
और AdvancedMarkerView
लाइब्रेरी तब लोड होती हैं, जब
initMap()
फ़ंक्शन को कॉल किया जाता है.
कोड को समझें
ट्यूटोरियल के इस पड़ाव पर, हमने:
- यह एक 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.
पूरी पृथ्वी का मैप एक ही इमेज के रूप में दिखाने के लिए, बहुत बड़ा मैप या बहुत कम रिज़ॉल्यूशन वाला छोटा मैप. नतीजे के तौर पर, मैप इमेज और 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 में कंसोल खोलने के लिए, यहां दिए गए कीबोर्ड शॉर्टकट का इस्तेमाल करें:
Command+Option+J (Mac पर) या Control+Shift+J (Windows पर). अक्षांश पाने के लिए नीचे दिए गए चरणों का पालन करें और Google Maps पर किसी जगह के देशांतर निर्देशांक.
- किसी ब्राउज़र में Google Maps खोलें.
- मैप पर उस जगह पर राइट क्लिक करें जिसकी आपको ज़रूरत है निर्देशांक.
- इसके बाद दिखने वाले 'संदर्भ मेन्यू' से यहां क्या है को चुनें. मैप में स्क्रीन पर सबसे नीचे एक कार्ड दिखता है. अक्षांश ढूंढें कार्ड की आखिरी पंक्ति में और देशांतर निर्देशांक.
आप किसी पते को अक्षांश और देशांतर निर्देशांकों में बदल सकते हैं. जियोकोडिंग सेवा. डेवलपर गाइड इन चीज़ों के बारे में ज़्यादा जानकारी देते हैं जियोकोडिंग की सेवा का इस्तेमाल शुरू करना.