इस पेज का अनुवाद 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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    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>
    <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: "weekly"});</script>
  </body>
</html>index.html

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

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

लाइव स्ट्रीमिंग शुरू करना

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

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

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

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

यहां मूल HTML वेब पेज का कोड दिया गया है:

<!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: "weekly"});</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 चौड़ाई और ऊंचाई को 0px से ज़्यादा पर सेट करें. इस मामले में, आपके वेब पेज की चौड़ाई को दिखाने के लिए, div को 400 पिक्सल की ऊंचाई और 100% की चौड़ाई पर सेट किया गया है.

बूटस्ट्रैप लोड करने वाला, JavaScript JavaScript को लोड करने के लिए तैयार करता है (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",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();index.js

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

कोड को समझना

नीचे दिया गया कोड एक नया 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 { AdvancedMarkerView } = 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 { AdvancedMarkerView } = 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 सबसे कम ज़ूम है, और पूरी पृथ्वी को दिखाता है. ज़्यादा रिज़ॉल्यूशन वाली चीज़ों पर ज़ूम इन करने के लिए, ज़ूम वैल्यू को ज़्यादा पर सेट करें.

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

TypeScript

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

JavaScript

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

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

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

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

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

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",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

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

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

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