खास जानकारी

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

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

दर्शक

यह दस्तावेज़ उन लोगों के लिए बनाया गया है जिन्हें JavaScript प्रोग्रामिंग और ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के सिद्धांत पता हैं. आपको उपयोगकर्ता के हिसाब से Maps के बारे में भी जानकारी होनी चाहिए. वेब पर कई 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();
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

सीएसएस

/* 
 * 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. मैप को होल्ड करने के लिए, हमने "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();
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-loader पैकेज

NPM का इस्तेमाल करके, Maps JavaScript API लोड करने के लिए, @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 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"

लोडर, प्रॉमिस और कॉलबैक इंटरफ़ेस दिखाता है. नीचे दिया गया, प्रॉमिस का डिफ़ॉल्ट तरीका 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, जहां Maps JavaScript API के पूरी तरह लोड होने पर कॉल किए जाने वाले ग्लोबल फ़ंक्शन का नाम तय किया जाता है. यूआरएल पैरामीटर के बारे में और पढ़ें.
  • async: ब्राउज़र से स्क्रिप्ट को एसिंक्रोनस तरीके से डाउनलोड और एक्ज़ीक्यूट करने के लिए कहता है. स्क्रिप्ट चलाने पर, यह callback पैरामीटर का इस्तेमाल करके तय किए गए फ़ंक्शन को कॉल करेगा.

लाइब्रेरी

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

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

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

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

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

समस्या हल करना

API कुंजी और बिलिंग गड़बड़ियां

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

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

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

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