सुविधा के बारे में जानकारी
इस ट्यूटोरियल में आपको वेब पेज पर मार्कर वाला आसान Google मैप जोड़ने का तरीका बताया गया है. यह उन लोगों के लिए अनुकूल होता है जिन्हें एचटीएमएल और सीएसएस की शुरुआत या बीच की जानकारी होती है. साथ ही, उन्हें JavaScript की थोड़ी जानकारी भी होती है. मैप बनाने की बेहतर गाइड के लिए, डेवलपर की गाइड पढ़ें.
नीचे एक मैप दिया गया है, जिसे आप इस ट्यूटोरियल का इस्तेमाल करके बनाएंगे. यह मार्कर, उलुरु-काटा जूटा नैशनल पार्क में उलुरु (जिसे अयेर्स रॉक भी कहते हैं) पर रखा है.
नीचे दिया गया सेक्शन उस पूरे कोड को दिखाता है जिसकी ज़रूरत आपको इस ट्यूटोरियल में मैप बनाने के लिए होती है.
TypeScript
// Initialize and add the map
function initMap(): void {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: uluru,
}
);
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
window.initMap = initMap;
सीएसएस
/* 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 */
}
एचटीएमएल
<html>
<head>
<title>Add Map</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>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!--
The `defer` attribute causes the callback 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
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
शुरू करना
अपने वेब पेज पर मार्कर से Google मैप बनाने के तीन चरण हैं:
आपके पास वेब ब्राउज़र होना ज़रूरी है. अपने प्लैटफ़ॉर्म पर आधारित Google Chrome (सुझाया गया), Firefox, Safari या Edge जैसा कोई मशहूर ब्राउज़र चुनें. यह काम करने वाले ब्राउज़र की सूची में आपके प्लैटफ़ॉर्म के हिसाब से होता है.
पहला चरण: एचटीएमएल पेज बनाना
यहां मूल HTML वेब पेज का कोड दिया गया है:
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Add Map</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>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!--
The `defer` attribute causes the callback 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
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
ध्यान दें कि यह एक बहुत ही सामान्य पेज है, जिसके शीर्षक लेवल तीन (h3) और एक div एलिमेंट मौजूद है. अपनी पसंद का कोई भी कॉन्टेंट, वेब पेज पर जोड़ा जा सकता है.
कोड को समझना
नीचे दिया गया कोड एक एचटीएमएल पेज बनाता है जिसमें हेड और बॉडी शामिल होती हैं.
<html> <head> </head> <body> </body> </html>
आप नीचे दिए गए कोड का इस्तेमाल करके, मैप के ऊपर हेडिंग लेवल तीन जोड़ सकते हैं.
<h3>My Google Maps Demo</h3>
नीचे दिया गया कोड आपके Google मैप के लिए पेज का एक हिस्सा बताता है.
<!--The div element for the map --> <div id="map"></div>
ट्यूटोरियल के इस चरण में, div सिर्फ़ स्लेटी रंग के ब्लॉक के तौर पर दिखता है, क्योंकि आपने अभी तक मैप नहीं जोड़ा है. नीचे दिया गया कोड उस सीएसएस के बारे में बताता है जो div का
साइज़ और रंग सेट करता है.
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* 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% की चौड़ाई पर सेट किया गया है.
दूसरा चरण: मार्कर से मैप जोड़ना
इस सेक्शन में, आपको अपने वेब पेज में Maps JavaScript API लोड करने और एपीआई की मदद से अपनी JavaScript लिखने का तरीका पता चलेगा.
TypeScript
// Initialize and add the map
function initMap(): void {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: uluru,
}
);
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
window.initMap = initMap;
सीएसएस
/* 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 */
}
एचटीएमएल
<html>
<head>
<title>Add Map</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>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!--
The `defer` attribute causes the callback 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
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
कोड को समझना
नीचे दिए गए कोड में, script को बताए गए यूआरएल से एपीआई लोड करें.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
ऊपर दिए गए कोड में, एपीआई लोड होने के बाद, callback पैरामीटर initMap फ़ंक्शन को लागू करता है. async एट्रिब्यूट की मदद से, एपीआई लोड होने के दौरान ब्राउज़र आपके पेज के बाकी हिस्से को पार्स कर सकता है. लोड होने के बाद, ब्राउज़र रुक जाएगा और स्क्रिप्ट को तुरंत लागू कर देगा. keyपैरामीटर
में आपकी एपीआई कुंजी होती है.
बाद में अपनी एपीआई कुंजी पाने के निर्देशों के लिए चरण 3: API कुंजी पाएं देखें.
नीचे दिए गए कोड में initMap फ़ंक्शन है, जो वेब पेज लोड होने पर मैप को शुरू करता है और जोड़ता है. अपनी JavaScript शामिल करने के लिए, script टैग का इस्तेमाल करें. इसमें initMap फ़ंक्शन शामिल होता है.
function initMap() {}
वेब पेज पर मैप div ढूंढने के लिए, document.getElementById() फ़ंक्शन जोड़ें.
नीचे दिया गया कोड एक नया Google Maps ऑब्जेक्ट बनाता है और मैप में प्रॉपर्टी जोड़ता है. इन प्रॉपर्टी में केंद्र और ज़ूम लेवल शामिल हैं. दूसरी प्रॉपर्टी के विकल्पों के लिए दस्तावेज़ देखें.
TypeScript
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 4,
center: uluru,
}
);
JavaScript
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
ऊपर दिए गए कोड में, new google.maps.Map() एक नया Google Maps ऑब्जेक्ट बनाता है. center प्रॉपर्टी, एपीआई को बताती है कि मैप को कहां दिखाना है.
अक्षांश/देशांतर निर्देशांक पाने या पते को भौगोलिक निर्देशांक में बदलने के बारे में ज़्यादा जानें.
zoom प्रॉपर्टी, मैप के ज़ूम लेवल के बारे में बताती है. ज़ूम: 0 सबसे कम ज़ूम है, और पूरी पृथ्वी को दिखाता है. ज़्यादा रिज़ॉल्यूशन वाली चीज़ों पर ज़ूम इन करने के लिए, ज़ूम वैल्यू को ऊपर सेट करें.
नीचे दिया गया कोड मैप पर एक मार्कर लगाता है. position प्रॉपर्टी, मार्कर की
जगह सेट करती है.
TypeScript
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
JavaScript
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
मार्कर के बारे में ज़्यादा जानें:
तीसरा चरण: एपीआई कुंजी पाना
इस सेक्शन में यह बताया गया है कि अपनी एपीआई कुंजी का इस्तेमाल करके, Maps JavaScript API में ऐप्लिकेशन की पुष्टि कैसे की जा सकती है.
एपीआई कुंजी पाने के लिए, यह तरीका अपनाएं:
Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और इससे जुड़ी सभी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर, एपीआई कुंजी पाएं (और एपीआई कुंजी से जुड़ी पाबंदियां सेट करें). ध्यान दें: अगर आपके पास कोई मौजूदा बिना पाबंदी वाली एपीआई कुंजी है या ब्राउज़र की पाबंदियों वाली कुंजी है, तो आप उस बटन का इस्तेमाल कर सकते हैं.
कोटा की चोरी से बचने और अपनी एपीआई कुंजी को सुरक्षित रखने के लिए, एपीआई कुंजियों का इस्तेमाल करना देखें.
बिलिंग चालू करें. ज़्यादा जानकारी के लिए इस्तेमाल और बिलिंग देखें.
इस पेज का पूरा कोड, अपने टेक्स्ट एडिटर में कॉपी करें.
यूआरएल में मौजूद
keyपैरामीटर की वैल्यू को अपनी एपीआई कुंजी से बदलें. यह, अभी-अभी मिली एपीआई कुंजी है.<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>इस फ़ाइल को
.htmlके साथ खत्म होने वाले नाम के साथ सेव करें. जैसे,index.html.एचटीएमएल फ़ाइल को वेब ब्राउज़र में, डेस्कटॉप से खींचकर ब्राउज़र पर छोड़ें. वैकल्पिक रूप से, फ़ाइल पर दो बार क्लिक करने से वह ज़्यादातर ऑपरेटिंग सिस्टम पर काम करता है.
सलाह और समस्या हल करना
- मैप को पसंद के मुताबिक बनाने के लिए, स्टाइल और प्रॉपर्टी जैसे विकल्पों में बदलाव किया जा सकता है. मैप को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानकारी के लिए स्टाइल को मैप करने और मैप पर ड्रॉइंग बनाने के दिशा-निर्देश पढ़ें.
- अपने कोड की जांच करने और उसे चलाने के लिए, अपने वेब ब्राउज़र में डेवलपर टूल कंसोल का इस्तेमाल करें और अपने कोड से जुड़ी समस्याओं को हल करें.
- Chrome में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
Command+Option+J (Mac पर) या Control+Shift+J (Windows पर). Google Maps पर किसी जगह के अक्षांश और देशांतर निर्देशांक पाने के लिए नीचे दिया गया तरीका अपनाएं.
- ब्राउज़र में Google Maps खोलें.
- मैप पर उस जगह पर दायां क्लिक करें जिसके लिए आपको निर्देशांक की ज़रूरत है.
- दिखाई देने वाले संदर्भ मेन्यू से यहां क्या है चुनें. मैप में, स्क्रीन पर सबसे नीचे एक कार्ड दिखता है. कार्ड की अंतिम पंक्ति में अक्षांश और देशांतर निर्देशांक ढूंढें.
आप जियोकोडिंग सेवा का इस्तेमाल करके किसी पते को अक्षांश और देशांतर निर्देशांक में बदल सकते हैं. डेवलपर गाइड में, जियोकोडिंग सेवा के साथ शुरुआत करने के बारे में ज़्यादा जानकारी दी गई है.