खास जानकारी

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

दर्शक

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

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

सभी को नमस्ते

Maps JavaScript API के बारे में सीखना शुरू करने का सबसे आसान तरीका है, इसका एक आसान उदाहरण देखें. इस उदाहरण में, सिडनी, न्यू साउथ वेल्स, ऑस्ट्रेलिया का मैप दिखाया गया है.

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

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>

    <!-- 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>
उदाहरण देखें

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

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

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

इन चरणों से जुड़ी ज़्यादा जानकारी नीचे दी गई है.

Maps JavaScript API लोड करें

Maps JavaScript API को लोड करने के लिए, बूटस्ट्रैप लोडर एक सुझाया गया तरीका है. एक विकल्प के तौर पर, JS API लोडर भी दिया गया है. हमारा सुझाव है कि आप दोनों तरीकों की समीक्षा करें. साथ ही, वह तरीका चुनें जो आपके प्रोजेक्ट के कोड की बनावट के हिसाब से सबसे सही हो.

ज़्यादा जानकारी के लिए, Maps JavaScript API लोड करना देखें.

बूटस्ट्रैप लोडर

जैसा कि इस स्निपेट में दिखाया गया है, अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़कर Maps JavaScript API लोड करें:

<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>

रनटाइम पर लाइब्रेरी लोड करने के लिए, await ऑपरेटर का इस्तेमाल करें और एसिंक्रोनस फ़ंक्शन में से importLibrary() को कॉल करें, जैसा कि यहां दिखाया गया है:

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();

NPM js-api-loader पैकेज

NPM का इस्तेमाल करके Maps JavaScript API लोड करने के लिए, @googlemaps/js-api-loader का इस्तेमाल करें. इसे NPM के ज़रिए इंस्टॉल करने के लिए, नीचे दिए गए निर्देश का इस्तेमाल करें:

npm install @googlemaps/js-api-loader

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

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

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

TypeScript

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

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new 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(async () => {
  const { Map } = await google.maps.importLibrary("maps");

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

अपने ऐप्लिकेशन को 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 API लोड हो रहा है

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

इनलाइन लोड करना

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

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

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

किसी अलग JavaScript फ़ाइल का इस्तेमाल करके, Maps JavaScript API इनलाइन को डाइनैमिक रूप से लोड करने के लिए, नीचे दिया गया उदाहरण देखें. इस तरीके की मदद से, एपीआई के साथ काम करने के लिए मौजूद सभी कोड मैनेज किए जा सकते हैं. ऐसा, किसी अलग .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"

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

TypeScript

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

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new 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(async () => {
  const { Map } = await google.maps.importLibrary("maps");

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

स्क्रिप्ट टैग के एट्रिब्यूट

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

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

लाइब्रेरी

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

डीओएम एलिमेंट को मैप करें

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

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

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

मैप विकल्प

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

map = new 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 API, ज़ूम के मौजूदा लेवल के आधार पर टाइल कैसे लोड करता है, मैप और टाइल कोऑर्डिनेट की गाइड देखें.

मैप ऑब्जेक्ट

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

Map क्लास, मैप को दिखाने वाली JavaScript क्लास होती है. इस क्लास के ऑब्जेक्ट, किसी पेज पर एक मैप के बारे में बताते हैं. (इस क्लास के एक से ज़्यादा इंस्टेंस बनाए जा सकते हैं. हर ऑब्जेक्ट, पेज पर एक अलग मैप बनाएगा.) हम 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 होती है, इसलिए वे नहीं दिखते.
    पहचान फ़ाइल को लागू करने के लिए, हमारे उदाहरण देखें.
  • Chrome के डेवलपर टूल में मौजूद समस्याओं की पहचान करने के लिए, JavaScript डीबगर का इस्तेमाल करें. सबसे पहले JavaScript कंसोल में गड़बड़ियां खोजें.
  • Stack Overflow पर सवाल पोस्ट करें. शानदार सवाल पोस्ट करने के तरीके के बारे में दिशा-निर्देश सहायता पेज पर उपलब्ध हैं.