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

अपनी वेबसाइट पर मार्कर के साथ Google मैप जोड़ना

सुविधा के बारे में जानकारी

इस ट्यूटोरियल में बताया गया है कि किसी वेब पेज पर मार्कर से, एक आसान Google मैप कैसे जोड़ा जा सकता है. यह उन लोगों के लिए सही है जिन्हें एचटीएमएल और सीएसएस का इस्तेमाल करने वालों की समझ होती है या बीच के लेवल पर. इन्हें 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

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>Add 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>
    <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: "beta"});</script>
  </body>
</html>index.html

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

शुरुआत करना

आपके वेब पेज पर मार्कर से Google मैप बनाने के तीन चरण हैं:

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

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

पहला चरण: एचटीएमएल पेज बनाना

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add 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>
    <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: "beta"});</script>
  </body>
</html>
index.html

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

कोड को समझना

नीचे दिए गए कोड में पेज और हेड शामिल हैं.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

आप नीचे दिए गए कोड का इस्तेमाल करके, मैप के ऊपर हेडिंग का लेवल तीन जोड़ सकते हैं.

<h3>My Google Maps Demo</h3>

नीचे दिया गया कोड आपके 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% की चौड़ाई पर सेट किया जाता है.

बूटस्ट्रैप लोडर, लोड करने के लिए 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_HERE",
    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 और AdvancedMarkerView लाइब्रेरी लोड होती हैं.

कोड को समझना

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

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

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

अक्षांश/देशांतर निर्देशांक पाने, या किसी पते को भौगोलिक निर्देशांकों में बदलने के बारे में ज़्यादा जानें.

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

नीचे दिया गया कोड, मैप पर एक मार्कर दिखाता है. 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

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

तीसरा चरण: कोई एपीआई कुंजी पाना

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

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

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

यूआरएल में मौजूद 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_HERE",
    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>

इस फ़ाइल को .html के साथ खत्म होने वाले नाम के साथ सेव करें, जैसे कि index.html.
एचटीएमएल फ़ाइल को वेब ब्राउज़र से लोड करने के लिए, उसे अपने डेस्कटॉप से खींचकर ब्राउज़र पर छोड़ें. इसके अलावा, फ़ाइल पर दो बार क्लिक करके ज़्यादातर ऑपरेटिंग सिस्टम काम करते हैं.

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

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