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

परिचय

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

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

शुरू करना

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

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

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

पहला चरण: एपीआई कुंजी पाना

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

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

  1. Google Cloud Console पर जाएं.

  2. कोई प्रोजेक्ट बनाएं या चुनें.

  3. एपीआई और उससे जुड़ी सेवाओं को चालू करने के लिए, जारी रखें पर क्लिक करें.

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

  5. कोटा चोरी को रोकने और अपने एपीआई पासकोड को सुरक्षित रखने के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें.

  6. बिलिंग की सुविधा चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.

  7. एपीआई पासकोड मिलने के बाद, "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 लिखने का तरीका भी बताया गया है. इस JavaScript का इस्तेमाल करके, एपीआई की मदद से मैप में मार्कर जोड़ा जा सकता है.

TypeScript

async function initMap(): Promise<void> {
  //  Request the needed libraries.
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("maps") as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary("marker") as Promise<google.maps.MarkerLibrary>,
  ]);
  // 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,
  });

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

JavaScript

async function initMap() {
    //  Request the needed libraries.
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("maps"),
        google.maps.importLibrary("marker"),
    ]);
    // 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).
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: "Uluru/Ayers Rock",
    });
}
initMap();
index.js

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

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

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

innerMap, Map क्लास के इंस्टेंस को दिखाता है. मैप के विकल्प सेट करने के लिए, मैप एलिमेंट से 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!");
});

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

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

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

TypeScript

async function initMap(): Promise<void> {
  //  Request the needed libraries.
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("maps") as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary("marker") as Promise<google.maps.MarkerLibrary>,
  ]);
  // 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,
  });

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

JavaScript

async function initMap() {
    //  Request the needed libraries.
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("maps"),
        google.maps.importLibrary("marker"),
    ]);
    // 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).
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: "Uluru/Ayers Rock",
    });
}
initMap();
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>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", 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">
      <div id="controls" slot="control-inline-start-block-start">
        <h3>My Google Maps Demo</h3>
      </div>
    </gmp-map>
  </body>
</html>
index.html

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

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

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

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

  • Google Maps पर किसी जगह के अक्षांश और देशांतर के निर्देशांक पाने के लिए, नीचे दिया गया तरीका अपनाएं.

    1. किसी ब्राउज़र में Google Maps खोलें.
    2. मैप पर उस जगह पर राइट क्लिक करें जिसके लिए आपको निर्देशांक चाहिए.
    3. दिखने वाले संदर्भ मेन्यू में जाकर, यहां क्या है? चुनें. मैप, स्क्रीन के सबसे नीचे एक कार्ड दिखाता है. कार्ड की आखिरी लाइन में, अक्षांश और देशांतर के निर्देशांक ढूंढें.

  • जियोकोडिंग सेवा का इस्तेमाल करके, किसी पते को अक्षांश और देशांतर निर्देशांकों में बदला जा सकता है. डेवलपर गाइड में, जियोकोडिंग सेवा का इस्तेमाल शुरू करने के बारे में पूरी जानकारी दी गई है.