पेश है Places UI Kit: यह तुरंत इस्तेमाल किए जा सकने वाले किफ़ायती कॉम्पोनेंट की लाइब्रेरी है. इसकी मदद से, Google Maps पर उपलब्ध Places के जाने-पहचाने यूज़र इंटरफ़ेस को किसी भी मैप के साथ इस्तेमाल किया जा सकता है. इसे आज़माएं और GMP को बेहतर बनाने के लिए अपने सुझाव/राय दें या शिकायत करें!

इस पेज का अनुवाद Cloud Translation API से किया गया है.

JavaScript का इस्तेमाल करके, मार्कर के साथ Google Maps जोड़ना

परिचय

इस ट्यूटोरियल में, वेब पेज पर मार्कर के साथ सामान्य Google मैप जोड़ने का तरीका बताया गया है. यह उन लोगों के लिए सही है जिन्हें एचटीएमएल और सीएसएस की बुनियादी या सामान्य जानकारी है. साथ ही, JavaScript के बारे में थोड़ी जानकारी है.

इस ट्यूटोरियल का इस्तेमाल करके, यह मैप बनाया जाएगा. मार्कर को उलुरू-काता तजुता नैशनल पार्क में उलुरू (इसे अयेर्स रॉक भी कहा जाता है) पर रखा गया है.

शुरू करना

अपने वेब पेज पर मार्कर के साथ Google मैप बनाने के लिए, यह तरीका अपनाएं:

एपीआई पासकोड पाना
एचटीएमएल पेज बनाना
मार्कर वाला मैप जोड़ना

इसके लिए, आपको वेब ब्राउज़र की ज़रूरत होगी. अपने प्लैटफ़ॉर्म के हिसाब से, Google Earth के साथ काम करने वाले ब्राउज़र की सूची में से कोई ब्राउज़र चुनें. हमारा सुझाव है कि आप Google Chrome का इस्तेमाल करें. इसके अलावा, Firefox, Safari या Edge का इस्तेमाल भी किया जा सकता है.

पहला चरण: एपीआई पासकोड पाना

इस सेक्शन में, Maps JavaScript API के लिए अपने ऐप्लिकेशन की पुष्टि करने का तरीका बताया गया है. इसके लिए, आपको अपने एपीआई पासकोड का इस्तेमाल करना होगा.

एपीआई कुंजी पाने के लिए, यह तरीका अपनाएं:

Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और उससे जुड़ी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर जाकर, एपीआई पासकोड पाएं. साथ ही, एपीआई पासकोड से जुड़ी पाबंदियां सेट करें. ध्यान दें: अगर आपके पास बिना किसी पाबंदी वाली मौजूदा एपीआई कुंजी है या ब्राउज़र से जुड़ी पाबंदियों वाली कुंजी है, तो उसका इस्तेमाल किया जा सकता है.
कोटा चोरी को रोकने और अपने एपीआई पासकोड को सुरक्षित रखने के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें.
बिलिंग की सुविधा चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.

एपीआई पासकोड मिलने के बाद, "YOUR_API_KEY" पर क्लिक करके, उसे यहां दिए गए स्निपेट में जोड़ें. बूटलोडर स्क्रिप्ट टैग को कॉपी करें और उसे अपने वेब पेज पर इस्तेमाल करें.

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

दूसरा चरण: एचटीएमएल पेज बनाना

यहां एक सामान्य एचटीएमएल वेब पेज का कोड दिया गया है:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

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

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

ध्यान दें कि यह एक सामान्य पेज है. इसमें हेडिंग लेवल तीन (h3) और एक div एलिमेंट है. वेब पेज पर अपनी पसंद का कोई भी कॉन्टेंट जोड़ा जा सकता है.

कोड को समझना

उदाहरण में इस चरण पर, हमारे पास यह जानकारी है:

!DOCTYPE html का इस्तेमाल करके, ऐप्लिकेशन को HTML5 के तौर पर बताया गया हो.
मैप को होल्ड करने के लिए, "map" नाम का div एलिमेंट बनाया गया है.
Maps JavaScript API को बूटस्ट्रैप लोडर का इस्तेमाल करके लोड किया गया हो.

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

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

<!DOCTYPE html>

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

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

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

div एलिमेंट बनाना

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

यहां दिया गया कोड, आपके Google मैप के लिए पेज का एक हिस्सा तय करता है.

<!--The div element for the map -->
<div id="map"></div>

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

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

Maps JavaScript API लोड करना

बूटस्ट्रैप लोडर, Maps JavaScript API को लोड करने के लिए तैयार करता है (importLibrary() को कॉल किए जाने तक कोई भी लाइब्रेरी लोड नहीं होती).

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

अपनी एपीआई कुंजी पाने के निर्देशों के लिए, तीसरा चरण: एपीआई कुंजी पाएं देखें.

तीसरा चरण: मार्कर के साथ मैप जोड़ना

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

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

ऊपर दिए गए कोड में, initMap() फ़ंक्शन को कॉल करने पर Map और AdvancedMarkerElement लाइब्रेरी लोड होती हैं.

कोड को समझना

ट्यूटोरियल के इस चरण में, हमारे पास ये चीज़ें हैं:

JavaScript फ़ंक्शन तय किया गया है, जो div में मैप बनाता है.
मैप में मार्कर जोड़ने के लिए, AdvancedMarkerElement बनाया गया.

मैप जोड़ना

नीचे दिया गया कोड, एक नया Google Maps ऑब्जेक्ट बनाता है. साथ ही, मैप में प्रॉपर्टी जोड़ता है. इनमें सेंटर और ज़ूम लेवल शामिल हैं. अन्य प्रॉपर्टी के विकल्पों के बारे में जानने के लिए, दस्तावेज़ देखें.

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});
index.js

हर मैप के लिए दो ज़रूरी विकल्प होते हैं: center और zoom. ऊपर दिए गए कोड में, new Map() एक नया Google Maps ऑब्जेक्ट बनाता है. center प्रॉपर्टी से एपीआई को यह पता चलता है कि मैप को कहां पर सेंटर करना है.

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

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

1: वर्ल्ड
5: भूभाग या महाद्वीप
10: शहर
15: सड़कें
20: बिल्डिंग

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

कोई मार्कर जोड़ें

नीचे दिया गया कोड, मैप पर मार्कर लगाता है. position प्रॉपर्टी, मार्कर की जगह सेट करती है.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});index.js

कोड का पूरा उदाहरण

पूरे उदाहरण का कोड यहां देखें:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

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>Add Map</title>

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

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

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

JSFiddle.net Google Cloud Shell

मार्कर के बारे में ज़्यादा जानें:

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

अक्षांश/देशांतर के निर्देशांक पाने या किसी पते को भौगोलिक निर्देशांकों में बदलने के बारे में ज़्यादा जानें.
मैप को पसंद के मुताबिक बनाने के लिए, स्टाइल और प्रॉपर्टी जैसे विकल्पों में बदलाव किया जा सकता है. मैप को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानने के लिए, स्टाइलिंग और मैप पर ड्राइंग बनाने से जुड़ी गाइड पढ़ें.
अपने वेब ब्राउज़र में डेवलपर टूल कंसोल का इस्तेमाल करके, अपने कोड की जांच करें और उसे चलाएं. साथ ही, गड़बड़ी की रिपोर्ट पढ़ें और अपने कोड से जुड़ी समस्याओं को हल करें.
Chrome में कंसोल खोलने के लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल करें:
Mac पर Command+Option+J या Windows पर Control+Shift+J.
Google Maps पर किसी जगह के अक्षांश और देशांतर के निर्देशांक पाने के लिए, नीचे दिया गया तरीका अपनाएं.
1. किसी ब्राउज़र में Google Maps खोलें.
2. मैप पर उस जगह पर राइट क्लिक करें जिसके लिए आपको निर्देशांक चाहिए.
3. दिखने वाले संदर्भ मेन्यू में, यहां क्या है चुनें. मैप, स्क्रीन पर सबसे नीचे एक कार्ड दिखाता है. कार्ड की आखिरी लाइन में, अक्षांश और देशांतर के निर्देशांक ढूंढें.
जियोकोडिंग सेवा का इस्तेमाल करके, किसी पते को अक्षांश और देशांतर निर्देशांकों में बदला जा सकता है. डेवलपर गाइड में, जियोकोडिंग सेवा का इस्तेमाल शुरू करने के बारे में पूरी जानकारी दी गई है.