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

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

Place Autocomplete Data API

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

Place Autocomplete Data API की मदद से, प्रोग्राम के हिसाब से जगह के सुझावों को फ़ेच किया जा सकता है. इससे, ऑटोकंप्लीट की सुविधा को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, ऑटोकंप्लीट विजेट की तुलना में, इस पर ज़्यादा कंट्रोल पाया जा सकता है. इस गाइड में, आपको Place Autocomplete Data API इस्तेमाल करने का तरीका बताया जाएगा. इससे, उपयोगकर्ता की क्वेरी के आधार पर, अपने-आप पूरा होने वाले अनुरोध किए जा सकते हैं.

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

ऑटोकंप्लीट के अनुरोध

ऑटोकंप्लीट के अनुरोध में, क्वेरी के लिए इनपुट स्ट्रिंग ली जाती है और जगह के अनुमानों की सूची दिखाई जाती है. अपने-आप पूरा होने की सुविधा के लिए अनुरोध करने के लिए, fetchAutocompleteSuggestions() को कॉल करें और ज़रूरी प्रॉपर्टी के साथ अनुरोध पास करें. input प्रॉपर्टी में खोज के लिए स्ट्रिंग शामिल होती है. आम तौर पर, उपयोगकर्ता के क्वेरी टाइप करने पर इस वैल्यू को अपडेट किया जाता है. अनुरोध में sessionToken शामिल होना चाहिए. इसका इस्तेमाल बिलिंग के लिए किया जाता है.

यहां दिए गए स्निपेट में, अनुरोध का मुख्य हिस्सा बनाने और सेशन टोकन जोड़ने का तरीका बताया गया है. इसके बाद, PlacePrediction की सूची पाने के लिए, fetchAutocompleteSuggestions() को कॉल करने का तरीका बताया गया है.

// Add an initial request body.
let request = {
  input: "Tadi",
  locationRestriction: {
    west: -122.44,
    north: 37.8,
    east: -122.39,
    south: 37.78,
  },
  origin: { lat: 37.7893, lng: -122.4039 },
  includedPrimaryTypes: ["restaurant"],
  language: "en-US",
  region: "us",
};
// Create a session token.
const token = new AutocompleteSessionToken();

// Add the token to the request.
// @ts-ignore
request.sessionToken = token;
index.js

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

डिफ़ॉल्ट रूप से, Place Autocomplete सुविधा सभी तरह की जगहों के सुझाव देती है. हालांकि, यह सुविधा उपयोगकर्ता की जगह के आस-पास की जगहों के सुझावों को प्राथमिकता देती है. साथ ही, उपयोगकर्ता की चुनी गई जगह के लिए उपलब्ध सभी डेटा फ़ील्ड को फ़ेच करती है. जगह की जानकारी अपने-आप भरने की सुविधा के विकल्प सेट करें, ताकि ज़्यादा काम के सुझाव दिखाए जा सकें. इसके लिए, नतीजों को सीमित करें या उन्हें प्राथमिकता दें.

नतीजों पर पाबंदी लगाने से, अपने-आप पूरा होने वाला विजेट उन सभी नतीजों को अनदेखा कर देता है जो पाबंदी वाले इलाके से बाहर हैं. आम तौर पर, नतीजों को मैप के दायरे तक सीमित रखा जाता है. नतीजों को पक्षपाती बनाने से, अपने-आप पूरा होने वाला विजेट, तय की गई जगह के हिसाब से नतीजे दिखाता है. हालांकि, कुछ नतीजे उस जगह से बाहर के भी हो सकते हैं.

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

includedPrimaryTypes प्रॉपर्टी का इस्तेमाल करके, ज़्यादा से ज़्यादा पांच जगह के टाइप की जानकारी दें. अगर कोई टाइप नहीं दिया गया है, तो हर तरह की जगहें दिखाई जाएंगी.

एपीआई के बारे में जानकारी देखें

जगह की जानकारी पाना

जगह के बारे में अनुमान लगाने के नतीजे से Place ऑब्जेक्ट पाने के लिए, पहले toPlace() को कॉल करें. इसके बाद, नतीजे के तौर पर मिले Place ऑब्जेक्ट पर fetchFields() को कॉल करें. जगह के बारे में अनुमान लगाने से मिला सेशन आईडी, अपने-आप शामिल हो जाता है. fetchFields() को कॉल करने पर, अपने-आप पूरा होने वाले सेशन को बंद कर दिया जाता है.

let place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.

await place.fetchFields({
  fields: ["displayName", "formattedAddress"],
});

const placeInfo = document.getElementById("prediction");

placeInfo.textContent =
  "First predicted place: " +
  place.displayName +
  ": " +
  place.formattedAddress;index.js

सेशन टोकन

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

नया सेशन टोकन बनाने और उसे किसी अनुरोध में जोड़ने के लिए, AutocompleteSessionToken का एक इंस्टेंस बनाएं. इसके बाद, अनुरोध की sessionToken प्रॉपर्टी को सेट करें, ताकि टोकन का इस्तेमाल किया जा सके. इसके लिए, यहां दिए गए स्निपेट का इस्तेमाल करें:

// Create a session token.
const token = new AutocompleteSessionToken();

// Add the token to the request.
// @ts-ignore
request.sessionToken = token;
index.js

fetchFields() को कॉल करने पर सेशन खत्म हो जाता है. Place इंस्टेंस बनाने के बाद, आपको fetchFields() को सेशन टोकन पास करने की ज़रूरत नहीं है, क्योंकि इसे अपने-आप मैनेज किया जाता है.

await place.fetchFields({
  fields: ["displayName", "formattedAddress"],
});
index.js

AutocompleteSessionToken का नया इंस्टेंस बनाकर, अगले सेशन के लिए सेशन टोकन बनाएं.

सेशन टोकन के सुझाव:

जगह के नाम अपने-आप भरने की सुविधा के लिए किए गए सभी कॉल के लिए, सेशन टोकन का इस्तेमाल करें.
हर सेशन के लिए नया टोकन जनरेट करें.
हर नए सेशन के लिए, एक यूनीक सेशन टोकन पास करें. एक से ज़्यादा सेशन के लिए एक ही टोकन का इस्तेमाल करने पर, हर अनुरोध के लिए अलग से बिल भेजा जाएगा.

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

उदाहरण

जब कोई उपयोगकर्ता क्वेरी टाइप करता है, तो हर कुछ कीस्ट्रोक (हर वर्ण के हिसाब से नहीं) पर ऑटोकंप्लीट अनुरोध किया जाता है. इसके बाद, संभावित नतीजों की सूची दिखाई जाती है. जब उपयोगकर्ता, नतीजों की सूची में से कोई विकल्प चुनता है, तो उसे एक अनुरोध माना जाता है. खोज के दौरान किए गए सभी अनुरोधों को बंडल करके, एक अनुरोध के तौर पर गिना जाता है. अगर उपयोगकर्ता कोई जगह चुनता है, तो खोज क्वेरी बिना किसी शुल्क के उपलब्ध होती है. साथ ही, सिर्फ़ जगह की जानकारी के डेटा के अनुरोध के लिए शुल्क लिया जाता है. अगर उपयोगकर्ता सेशन शुरू होने के कुछ मिनटों के अंदर कोई विकल्प नहीं चुनता है, तो सिर्फ़ खोज क्वेरी का शुल्क लिया जाता है.

किसी ऐप्लिकेशन के हिसाब से, इवेंट का फ़्लो इस तरह होता है:

उपयोगकर्ता "Paris, France" को खोजने के लिए क्वेरी टाइप करना शुरू करता है.
उपयोगकर्ता के इनपुट का पता चलने पर, ऐप्लिकेशन एक नया सेशन टोकन, "टोकन A" बनाता है.
उपयोगकर्ता के टाइप करते समय, एपीआई हर कुछ वर्णों के बाद ऑटोकंप्लीट करने का अनुरोध करता है. इससे हर वर्ण के लिए संभावित नतीजों की नई सूची दिखती है:
"P"
"Par"
"Paris,"
"Paris, Fr"
जब उपयोगकर्ता कोई विकल्प चुनता है:
- क्वेरी से मिले सभी अनुरोधों को एक साथ ग्रुप किया जाता है. इसके बाद, उन्हें "टोकन A" से दिखाए गए सेशन में एक ही अनुरोध के तौर पर जोड़ा जाता है.
- उपयोगकर्ता के चुने गए विकल्प को जगह की जानकारी के लिए किए गए अनुरोध के तौर पर गिना जाता है. साथ ही, इसे "टोकन A" से दिखाए गए सेशन में जोड़ दिया जाता है.
सेशन खत्म हो जाता है और ऐप्लिकेशन "टोकन A" को खारिज कर देता है.

सेशन के लिए बिलिंग के तरीके के बारे में जानें

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

इस सेक्शन में, Place Autocomplete Data API इस्तेमाल करने के पूरे उदाहरण दिए गए हैं .

जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा

यहां दिए गए उदाहरण में, "Tadi" इनपुट के लिए fetchAutocompleteSuggestions() को कॉल करने का तरीका दिखाया गया है. इसके बाद, पहले अनुमानित नतीजे पर toPlace() को कॉल किया गया है. इसके बाद, जगह की जानकारी पाने के लिए fetchFields() को कॉल किया गया है.

TypeScript

/**
 * Demonstrates making a single request for Place predictions, then requests Place Details for the first result.
 */
async function init() {
    // @ts-ignore
    const { Place, AutocompleteSessionToken, AutocompleteSuggestion } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;

    // Add an initial request body.
    let request = {
        input: "Tadi",
        locationRestriction: { west: -122.44, north: 37.8, east: -122.39, south: 37.78 },
        origin: { lat: 37.7893, lng: -122.4039 },
        includedPrimaryTypes: ["restaurant"],
        language: "en-US",
        region: "us",
    };

    // Create a session token.
    const token = new AutocompleteSessionToken();
    // Add the token to the request.
    // @ts-ignore
    request.sessionToken = token;
    // Fetch autocomplete suggestions.
    const { suggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    const title = document.getElementById('title') as HTMLElement;
    title.appendChild(document.createTextNode('Query predictions for "' + request.input + '":'));

    for (let suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        // Create a new list element.
        const listItem = document.createElement('li');
        const resultsElement = document.getElementById("results") as HTMLElement;
        listItem.appendChild(document.createTextNode(placePrediction.text.toString()));
        resultsElement.appendChild(listItem);
    }

    let place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    const placeInfo = document.getElementById("prediction") as HTMLElement;
    placeInfo.textContent = 'First predicted place: ' + place.displayName + ': ' + place.formattedAddress;

}

init();index.ts

JavaScript

/**
 * Demonstrates making a single request for Place predictions, then requests Place Details for the first result.
 */
async function init() {
  // @ts-ignore
  const { Place, AutocompleteSessionToken, AutocompleteSuggestion } =
    await google.maps.importLibrary("places");
  // Add an initial request body.
  let request = {
    input: "Tadi",
    locationRestriction: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
    origin: { lat: 37.7893, lng: -122.4039 },
    includedPrimaryTypes: ["restaurant"],
    language: "en-US",
    region: "us",
  };
  // Create a session token.
  const token = new AutocompleteSessionToken();

  // Add the token to the request.
  // @ts-ignore
  request.sessionToken = token;

  // Fetch autocomplete suggestions.
  const { suggestions } =
    await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
  const title = document.getElementById("title");

  title.appendChild(
    document.createTextNode('Query predictions for "' + request.input + '":'),
  );

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    // Create a new list element.
    const listItem = document.createElement("li");
    const resultsElement = document.getElementById("results");

    listItem.appendChild(
      document.createTextNode(placePrediction.text.toString()),
    );
    resultsElement.appendChild(listItem);
  }

  let place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.

  await place.fetchFields({
    fields: ["displayName", "formattedAddress"],
  });

  const placeInfo = document.getElementById("prediction");

  placeInfo.textContent =
    "First predicted place: " +
    place.displayName +
    ": " +
    place.formattedAddress;
}

init();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>Place Autocomplete Data API Predictions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="title"></div>
    <ul id="results"></ul>
    <p><span id="prediction"></span></p>
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

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

सेशन के साथ, जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा

इस उदाहरण में, इन कॉन्सेप्ट के बारे में बताया गया है:

कॉल करना fetchAutocompleteSuggestions() उपयोगकर्ता की क्वेरी के आधार पर, जवाब में अनुमानित जगहों की सूची दिखाना.
सेशन टोकन का इस्तेमाल करके, उपयोगकर्ता की क्वेरी को जगह की जानकारी के आखिरी अनुरोध के साथ ग्रुप करना.
चुनी गई जगह की जानकारी पाना और मार्कर दिखाना.
gmp-map एलिमेंट में यूज़र इंटरफ़ेस (यूआई) एलिमेंट को नेस्ट करने के लिए, कंट्रोल स्लॉटिंग का इस्तेमाल करना.