खास जानकारी

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

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

ऑडियंस

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

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

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

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

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();
index.ts

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();
index.js

CSS

/* 
 * 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;
}

style.css

एचटीएमएल

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

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

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

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

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

Maps JavaScript एपीआई लोड करें

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

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

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

अपने ऐप्लिकेशन कोड में इनलाइन बूटस्ट्रैप लोडर जोड़कर, 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();
index.ts

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();
index.js

NPM js-api-लोडर पैकेज

Maps JavaScript एपीआई को लोड करने के लिए, NPM का इस्तेमाल करने के लिए @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(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,
  });
});
index.ts

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,
  });
});

index.js

अपने ऐप्लिकेशन को 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 API को इनलाइन लोड करने के लिए, नीचे दिखाए गए तरीके से script टैग जोड़ें.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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"

लोडर, वादे और कॉलबैक इंटरफ़ेस को दिखाता है. डिफ़ॉल्ट प्रॉमिस तरीका 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,
  });
});
index.ts

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,
  });
});

index.js

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

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

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

लाइब्रेरी

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

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

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

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

ऊपर दिए गए उदाहरण में, हमने मैप div की ऊंचाई "100%" पर सेट करने के लिए, सीएसएस का इस्तेमाल किया है. ऐसा करने से, यह बड़ा होकर मोबाइल डिवाइसों पर दिखने लगेगा. आपको ब्राउज़र की स्क्रीन के साइज़ और पैडिंग के आधार पर चौड़ाई और ऊंचाई के मान में बदलाव करने पड़ सकते हैं. ध्यान दें कि आम तौर पर, डिवीज़न अपनी चौड़ाई को एलिमेंट से शामिल करते हैं और खाली div आम तौर पर 0 ऊंचाई का इस्तेमाल करते हैं. इसलिए, आपको हमेशा <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"), {...});

मैप को दिखाने वाली 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 पर सवाल पोस्ट करें. अच्छे सवाल पोस्ट करने के तरीके के बारे में दिशा-निर्देश, सहायता पेज पर उपलब्ध हैं.