Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

परिचय

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

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

शुरू करना

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

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

आपको एक वेब ब्राउज़र की ज़रूरत होगी. इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची में से, अपने प्लैटफ़ॉर्म के हिसाब से कोई लोकप्रिय ब्राउज़र चुनें. जैसे, 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 2025 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>Add a Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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: "YOUR_API_KEY", v: "weekly"});</script>
  </head>
  <body>

    <!-- The map, centered at Uluru, Australia. -->
    <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
    </gmp-map>

  </body>
</html>

यह एक बहुत ही बुनियादी एचटीएमएल पेज है. इसमें पेज पर मैप दिखाने के लिए, gmp-map एलिमेंट का इस्तेमाल किया जाता है. मैप खाली दिखेगा, क्योंकि हमने अब तक कोई JavaScript कोड नहीं जोड़ा है.

कोड को समझना

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

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

अपने ऐप्लिकेशन को HTML5 के तौर पर एलान करना

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

<!DOCTYPE html>

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

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

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

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>

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

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

`gmp-map` एलिमेंट बनाना

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

यहां दिया गया कोड, gmp-map एलिमेंट को तय करता है. साथ ही, center, zoom, और map-id पैरामीटर सेट करता है.

<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
</gmp-map>

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

ज़ूम करने के लेवल

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

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

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

यहां दिए गए कोड में, उस सीएसएस के बारे में बताया गया है जो gmp-map एलिमेंट का साइज़ सेट करती है.

/* Set the size of the gmp-map element that contains the map */
gmp-map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

ऊपर दिए गए कोड में, style एलिमेंट, gmp-map का साइज़ सेट करता है. मैप को दिखाने के लिए, चौड़ाई और ऊंचाई को 0 पिक्सल से ज़्यादा पर सेट करें. इस मामले में, gmp-map को 400 पिक्सल की ऊंचाई और 100% की चौड़ाई पर सेट किया गया है, ताकि यह वेब पेज की पूरी चौड़ाई में दिखे. हमारा सुझाव है कि ऊंचाई और चौड़ाई की स्टाइल को हमेशा साफ़ तौर पर सेट करें.

मैप पर कंट्रोल सेट करने की सुविधा

अपने मैप में एचटीएमएल फ़ॉर्म कंट्रोल जोड़ने के लिए, कंट्रोल स्लॉटिंग का इस्तेमाल किया जा सकता है. स्लॉट, मैप पर पहले से तय की गई जगह होती है. किसी एलिमेंट के लिए ज़रूरी जगह सेट करने के लिए, slot एट्रिब्यूट का इस्तेमाल करें. साथ ही, एलिमेंट को gmp-map एलिमेंट के अंदर नेस्ट करें. नीचे दिए गए स्निपेट में, मैप के ऊपरी बाएं कोने में एचटीएमएल लेबल जोड़ने का तरीका बताया गया है.

<!-- The map, centered at Uluru, Australia. -->
<gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
  <div id="controls" slot="control-inline-start-block-start">
    <h3>My Google Maps Demo</h3>
  </div>
</gmp-map>

तीसरा चरण: JavaScript कोड जोड़ना

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

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

initMap() को कॉल करने पर, ऊपर दिया गया कोड ये काम करता है:

maps और marker लाइब्रेरी लोड करता है.
डीओएम से मैप एलिमेंट को फ़ेच करता है.
इनर मैप पर, मैप के अन्य विकल्प सेट करता है.
मैप में मार्कर जोड़ता है.

मैप ऑब्जेक्ट पाना और विकल्प सेट करना

innerMap, मैप क्लास के इंस्टेंस को दिखाता है. मैप के विकल्प सेट करने के लिए, मैप एलिमेंट से innerMap इंस्टेंस पाएं और setOptions को कॉल करें. यहां दिए गए स्निपेट में, DOM से innerMap इंस्टेंस पाने और फिर setOptions को कॉल करने का तरीका बताया गया है:

// Get the gmp-map element.
const mapElement = document.querySelector(
  "gmp-map"
) as google.maps.MapElement;

// Get the inner map.
const innerMap = mapElement.innerMap;

// Set map options.
innerMap.setOptions({
  mapTypeControl: false,
});

मैप लोड होने का इंतज़ार करें

gmp-map एलिमेंट का इस्तेमाल करने पर, मैप एसिंक्रोनस तरीके से लोड होता है. अगर शुरू करने के समय अन्य अनुरोध किए जाते हैं, तो इससे रेस कंडिशन हो सकती है. उदाहरण के लिए, भौगोलिक जगह या जगह की जानकारी का अनुरोध. यह पक्का करने के लिए कि आपका कोड, मैप के पूरी तरह लोड होने के बाद ही चले, अपने इनिशलाइज़ेशन फ़ंक्शन में addListenerOnce idle इवेंट हैंडलर का इस्तेमाल करें. जैसा कि यहां दिखाया गया है:

// Do things once the map has loaded.
google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    // Run this code only after the map has loaded.
    console.log("The map is now ready!");
});

ऐसा करने से यह पक्का होता है कि आपका कोड, मैप लोड होने के बाद ही चलेगा. हैंडलर, ऐप्लिकेशन के लाइफ़साइकल के दौरान सिर्फ़ एक बार ट्रिगर होता है.

इंटरनल परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के बारे में जानकारी:

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

पूरी तरह से तैयार उदाहरण कोड

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

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js

सीएसएस

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
gmp-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 a Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <!-- The map, centered at Uluru, Australia. -->
        <gmp-map center="-25.344,131.031" zoom="4" map-id="DEMO_MAP_ID">
            <div id="controls" slot="control-inline-start-block-start">
                <h3>My Google Maps Demo</h3>
            </div>
        </gmp-map>
    </body>
</html>index.html

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

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

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

परिचय

शुरू करना

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

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

कोड को समझना

अपने ऐप्लिकेशन को HTML5 के तौर पर एलान करना

Maps JavaScript API लोड करना

gmp-map एलिमेंट बनाना

ज़ूम करने के लेवल

मैप पर कंट्रोल सेट करने की सुविधा

तीसरा चरण: JavaScript कोड जोड़ना

TypeScript

JavaScript

मैप ऑब्जेक्ट पाना और विकल्प सेट करना

मैप लोड होने का इंतज़ार करें

पूरी तरह से तैयार उदाहरण कोड

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

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

`gmp-map` एलिमेंट बनाना