खास जानकारी

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

Maps JavaScript API, वेब पेजों और मोबाइल डिवाइसों पर दिखाने के लिए, कॉन्टेंट और तस्वीरों को आपकी पसंद के मुताबिक बनाने में मदद करता है. Maps JavaScript एपीआई में चार तरह के बुनियादी मैप (रोडमैप, उपग्रह, हाइब्रिड, और इलाके) होते हैं. इनमें आप लेयर और स्टाइल, कंट्रोल, और इवेंट के साथ-साथ कई सेवाओं और लाइब्रेरी का इस्तेमाल कर सकते हैं.

दर्शक

इस दस्तावेज़ को ऐसे लोगों के लिए डिज़ाइन किया गया है जो JavaScript और प्रोग्रामिंग वाले ऑब्जेक्ट के बारे में जानते हैं. इसके अलावा, आपको उपयोगकर्ता के नज़रिए से भी Google Maps के बारे में जानकारी होनी चाहिए. वेब पर कई JavaScript ट्यूटोरियल उपलब्ध हैं.

इस सिद्धांत वाले दस्तावेज़ को डिज़ाइन किया गया है. इसकी मदद से, Maps JavaScript एपीआई का इस्तेमाल करके, ऐप्लिकेशन तेज़ी से डेवलप किए जा सकते हैं. हम Maps की JavaScript एपीआई के बारे में जानकारी भी पब्लिश करते हैं.

नमस्ते, दुनिया

Maps JavaScript एपीआई के बारे में जानने का सबसे आसान तरीका यह है कि आप एक आसान उदाहरण देखें. नीचे दिए गए उदाहरण में, सिडनी, न्यू साउथ वेल्स, ऑस्ट्रेलिया को ध्यान में रखकर दिखाया गया मैप है.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = 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>Simple 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>
    <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>
उदाहरण देखें

सैंपल आज़माएं

इस आसान उदाहरण में भी, ध्यान देने लायक कुछ बातें हैं:

  1. हम <!DOCTYPE html> एलान का इस्तेमाल करके, ऐप्लिकेशन के HTML5 वर्शन के तौर पर एलान करते हैं.
  2. हम मैप को होल्ड करने के लिए, "मैप" नाम का एक div एलिमेंट बनाते हैं.
  3. हम एक JavaScript फ़ंक्शन तय करते हैं जो div में मैप बनाता है.
  4. हम script JavaScript का इस्तेमाल करके, Maps JavaScript API को लोड करते हैं.

नीचे इन कदमों को समझाया गया है.

अपने ऐप्लिकेशन को HTML5 के रूप में घोषित करना

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

<!DOCTYPE html>

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

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

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

सीएसएस के इस एलान से पता चलता है कि मैप कंटेनर <div> (आईडी map) को एचटीएमएल बॉडी की ऊंचाई का 100% हिस्सा इस्तेमाल करना चाहिए. ध्यान दें कि हमें खास तौर पर <body> और <html> के लिए, इन प्रतिशत की जानकारी देनी होगी.

Maps JavaScript एपीआई लोड किया जा रहा है

Maps JavaScript एपीआई को script टैग का इस्तेमाल करके लोड किया जाता है. इसे आपकी एचटीएमएल फ़ाइल में इनलाइन या एक अलग JavaScript फ़ाइल का इस्तेमाल करके जोड़ा जा सकता है. हमारा सुझाव है कि आप दोनों तरीकों की समीक्षा करें और वह तरीका चुनें जो आपके प्रोजेक्ट के कोड की संरचना के लिए सबसे सही हो.

इनलाइन लोडिंग

Maps JavaScript एपीआई को एचटीएमएल फ़ाइल में इनलाइन लोड करने के लिए, script टैग को नीचे दिखाए गए तरीके से जोड़ें.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

डाइनैमिक लोडिंग

Maps JavaScript API इनलाइन को डाइनैमिक तरीके से एक अलग JavaScript फ़ाइल का इस्तेमाल करके लोड करने के लिए, नीचे दिया गया उदाहरण देखें. इस तरीके से, किसी भी .js फ़ाइल से एपीआई के साथ काम करने के लिए, अपने सभी कोड हैंडल किए जा सकते हैं. यह स्क्रिप्ट टैग को इनलाइन जोड़ने के जैसा ही होता है.

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);
      

डाइनैमिक लोडिंग

@googlemaps/js-api-loader पैकेज ज़्यादा आसानी से डाइनैमिक लोड करने के लिए उपलब्ध है. इसे इन चीज़ों के साथ NPM के ज़रिए इंस्टॉल किया जा सकता है:

npm install @googlemaps/js-api-loader

इस पैकेज को इनके साथ ऐप्लिकेशन में इंपोर्ट किया जा सकता है:

import { Loader } from "@googlemaps/js-api-loader"

लोडिंग में, प्रॉमिस और कॉलबैक इंटरफ़ेस दिखता है. नीचे बताया गया है कि डिफ़ॉल्ट प्रॉमिस तरीका load() इस्तेमाल किया गया है.

TypeScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

JavaScript

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

स्क्रिप्ट टैग विशेषताएं

ऊपर दिए गए उदाहरणों में ध्यान दें कि कई एट्रिब्यूट script टैग पर सेट किए गए हैं, जो सुझाए गए हैं. नीचे हर एट्रिब्यूट की पूरी जानकारी दी गई है.

  • src: जिस यूआरएल से Maps JavaScript API लोड होता है जिसमें वे सभी सिंबल और डेफ़िनिशन शामिल हैं जिनके लिए Maps JavaScript API का इस्तेमाल करना ज़रूरी है. इस उदाहरण में दिए गए यूआरएल में दो पैरामीटर हैं: key, जहां आप अपनी एपीआई कुंजी देते हैं और callback. यहां आप JavaScript JavaScript एपीआई के पूरी तरह लोड होने के बाद, ग्लोबल फ़ंक्शन का नाम बता सकते हैं. यूआरएल पैरामीटर के बारे में ज़्यादा पढ़ें.
  • async, ब्राउज़र को एसिंक्रोनस रूप से स्क्रिप्ट को डाउनलोड और एक्ज़ीक्यूट करने के लिए कहता है. स्क्रिप्ट रन होने पर, यह callback पैरामीटर का इस्तेमाल करके, बताए गए फ़ंक्शन को कॉल करेगा.

लाइब्रेरी

Maps JavaScript API को यूआरएल की मदद से लोड करते समय, libraries यूआरएल पैरामीटर इस्तेमाल करके, अन्य लाइब्रेरी लोड की जा सकती हैं. लाइब्रेरी, कोड के ऐसे मॉड्यूल होते हैं जिनसे मुख्य Maps JavaScript एपीआई को ज़्यादा सुविधाएं मिलती हैं. हालांकि, ये तब तक लोड नहीं होते, जब तक खास तौर पर इनके लिए अनुरोध नहीं किया जाता. ज़्यादा जानकारी के लिए, Maps JavaScript एपीआई में लाइब्रेरी देखें.

एपीआई को सिंक्रोनस रूप से लोड किया जा रहा है

Maps JavaScript एपीआई को लोड करने वाले script टैग में, defer एट्रिब्यूट और callback पैरामीटर को हटाया जा सकता है. ऐसा करने से, एपीआई लोड होने से पहले ही एपीआई लोड हो जाएगा.

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

DOM एलिमेंट मैप करें

<div id="map"></div>

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

ऊपर दिए गए उदाहरण में, हमने सीएसएस का इस्तेमाल करके, मैप div की ऊंचाई को "100%" पर सेट किया था. यह बड़े होकर मोबाइल डिवाइस पर साइज़ के हिसाब से दिखने लगेगा. आपको ब्राउज़र की स्क्रीन के साइज़ और पैडिंग के आधार पर, चौड़ाई और ऊंचाई की वैल्यू में बदलाव करना पड़ सकता है. ध्यान दें कि आम तौर पर, div की जानकारी उसमें शामिल एलिमेंट से ली जाती है. खाली div की ऊंचाई आम तौर पर शून्य होती है. इस वजह से, आपको हमेशा <div> पर साफ़ तौर पर ऊंचाई सेट करनी होगी.

मैप विकल्प

हर मैप के लिए दो विकल्प होते हैं: center और zoom.

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

ज़ूम लेवल

मैप दिखाने के लिए, शुरुआती रिज़ॉल्यूशन को zoom प्रॉपर्टी ने सेट किया है. इस प्रॉपर्टी में, ज़ूम से 0 Earth के मैप को पूरी तरह से ज़ूम आउट किया जाता है और बड़े ज़ूम लेवल को ज़्यादा रिज़ॉल्यूशन पर ज़ूम इन किया जाता है.

zoom: 8

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

  • 1: दुनिया
  • 5: लैंडमास/महाद्वीप
  • 10: शहर
  • 15: सड़कें
  • 20: इमारतें

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

Maps JavaScript एपीआई मौजूदा ज़ूम लेवल के मुताबिक टाइल कैसे लोड करता है, इस बारे में जानकारी पाने के लिए, मैप और टाइल निर्देशांक की गाइड देखें.

मैप ऑब्जेक्ट

map = new google.maps.Map(document.getElementById("map"), {...});

JavaScript की क्लास, जो मैप को दिखाती है, वह Map क्लास होती है. इस क्लास के ऑब्जेक्ट, पेज पर एक मैप बनाते हैं. (आप इस क्लास के एक से ज़्यादा इंस्टेंस बना सकते हैं — हर ऑब्जेक्ट, पेज पर एक अलग मैप के बारे में बताएगा.) हम JavaScript new ऑपरेटर का इस्तेमाल करके, इस क्लास का एक नया इंस्टेंस बनाते हैं.

नया मैप इंस्टेंस बनाने पर, मैप में कंटेनर के तौर पर, पेज में <div> एचटीएमएल एलिमेंट के बारे में बताया जाता है. एचटीएमएल नोड, JavaScript document ऑब्जेक्ट के बच्चे होते हैं और हम document.getElementById() तरीके से इस एलिमेंट का रेफ़रंस लेते हैं.

यह कोड एक वैरिएबल (नाम map) के बारे में बताता है और उस वैरिएबल को एक नए Map ऑब्जेक्ट पर असाइन करता है. Map() फ़ंक्शन को कंस्ट्रक्टर के तौर पर जाना जाता है और इसकी परिभाषा नीचे दी गई है:

निर्माता जानकारी
Map(mapDiv:Node, opts?:MapOptions ) दिए गए किसी भी (पैरामीटर) का इस्तेमाल करके, दिए गए एचटीएमएल कंटेनर के अंदर नया मैप बनाएं. आम तौर पर, यह एक DIV एलिमेंट होता है.

समस्या का हल

एपीआई कुंजी और बिलिंग से जुड़ी गड़बड़ियां

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

अगर आपका कोड काम नहीं कर रहा है, तो:

अपने मैप को तैयार करने और चलाने में आपकी मदद के लिए, ब्रेंडन केनी और मनो मार्क्स बताते हैं कि आम तौर पर होने वाली कुछ गलतियों को कैसे किया जाए और इस वीडियो में उन्हें कैसे ठीक किया जाए.

  • टाइपिंग की गलतियां खोजें. ध्यान रखें कि JavaScript केस-सेंसिटिव भाषा है.
  • बुनियादी बातें देखें - शुरुआती मैप बनाते समय, कुछ सामान्य समस्याएं सामने आती हैं. जैसे:
    • पुष्टि करें कि आपने मैप के विकल्पों में zoom और center प्रॉपर्टी के बारे में बताया है.
    • पक्का करें कि आपने एक div एलिमेंट बताया है जिसमें मैप स्क्रीन पर दिखेगा.
    • पक्का करें कि मैप के div एलिमेंट की ऊंचाई है. डिफ़ॉल्ट रूप से, div एलिमेंट 0 की ऊंचाई के साथ बनाए जाते हैं और इसलिए ये नहीं दिखते.
    पहचान फ़ाइलों को लागू करने के लिए, हमारे उदाहरण देखें.
  • समस्याओं को पहचानने के लिए, JavaScript डीबगर का इस्तेमाल करें. उदाहरण के लिए, Chrome डेवलपर टूल में उपलब्ध एक डीबगर. सबसे पहले, JavaScript कंसोल में गड़बड़ियां खोजें.
  • Stack Overflow पर सवाल पोस्ट करें. अच्छे सवाल पोस्ट करने का तरीका सहायता पेज पर बताया गया है.