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 का नया इंस्टेंस बनाकर, अगले सेशन के लिए सेशन टोकन बनाएं.

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

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

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

उदाहरण

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

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

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

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

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

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

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

TypeScript

async function init() {
    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 + '":'
        )
    );

    const resultsElement = document.getElementById('results') as HTMLElement;

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

        // Create a new list element.
        const listItem = document.createElement('li');

        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

async function init() {
    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 + '":'));
    const resultsElement = document.getElementById('results');
    for (let suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;
        // Create a new list element.
        const listItem = document.createElement('li');
        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>
        <!-- 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>
        <div id="title"></div>
        <ul id="results"></ul>
        <p><span id="prediction"></span></p>
        <img
            class="powered-by-google"
            src="./powered_by_google_on_white.png"
            alt="Powered by Google" />
    </body>
</html>
index.html

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

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

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

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let titleElement = document.querySelector('.title') as HTMLElement;
let resultsContainerElement = document.querySelector('.results') as HTMLElement;
let inputElement = document.querySelector('input') as HTMLInputElement;
let tokenStatusElement = document.querySelector('.token-status') as HTMLElement;
let newestRequestId = 0;
let tokenCount = 0;

// Create an initial request body.
const request: google.maps.places.AutocompleteRequest = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};

async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Update request center and bounds when the map bounds change.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

    inputElement.addEventListener('input', makeAutocompleteRequest);
}

async function makeAutocompleteRequest(inputEvent) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;

    const { AutocompleteSuggestion } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;

    if (!inputEvent.target?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }

    // Add the latest char sequence to the request.
    request.input = (inputEvent.target as HTMLInputElement).value;

    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId) return;

    titleElement.innerText = `Place predictions for "${request.input}"`;

    // Clear the list first.
    resultsContainerElement.replaceChildren();

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

        if (!placePrediction) {
            continue;
        }

        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            onPlaceSelected(placePrediction.toPlace());
        });
        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');

        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place: google.maps.places.Place) {
    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
        'marker'
    )) as google.maps.MarkerLibrary;

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

    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';

    await refreshToken();

    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }

    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}

// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;

    // Increment the token counter.
    tokenCount++;

    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}

init();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let marker;
let titleElement = document.querySelector('.title');
let resultsContainerElement = document.querySelector('.results');
let inputElement = document.querySelector('input');
let tokenStatusElement = document.querySelector('.token-status');
let newestRequestId = 0;
let tokenCount = 0;
// Create an initial request body.
const request = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};
async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    // Update request center and bounds when the map bounds change.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });
    inputElement.addEventListener('input', makeAutocompleteRequest);
}
async function makeAutocompleteRequest(inputEvent) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;
    const { AutocompleteSuggestion } = (await google.maps.importLibrary('places'));
    if (!inputEvent.target?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }
    // Add the latest char sequence to the request.
    request.input = inputEvent.target.value;
    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId)
        return;
    titleElement.innerText = `Place predictions for "${request.input}"`;
    // Clear the list first.
    resultsContainerElement.replaceChildren();
    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;
        if (!placePrediction) {
            continue;
        }
        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            onPlaceSelected(placePrediction.toPlace());
        });
        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');
        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}
// Event handler for clicking on a suggested place.
async function onPlaceSelected(place) {
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';
    await refreshToken();
    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }
    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}
// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } = (await google.maps.importLibrary('places'));
    // Increment the token counter.
    tokenCount++;
    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}
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;
}

.place-button {
    height: 3rem;
    width: 100%;
    background-color: transparent;
    text-align: left;
    border: none;
    cursor: pointer;
}

.place-button:focus-visible {
    outline: 2px solid #0056b3;
    border-radius: 2px;
}

.input {
    width: 300px;
    font-size: small;
    margin-bottom: 1rem;
}

/* Styles for the floating panel */
.controls {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    font-size: small;
    margin: 12px;
    padding: 1rem;
}

.title {
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.results {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.results li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.results li:hover {
    background-color: #eee;
}

style.css

एचटीएमएल

<html>
    <head>
        <title>Place Autocomplete Data API Session</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>
        <gmp-map center="37.7893, -122.4039" zoom="12" map-id="DEMO_MAP_ID">
            <div class="controls" slot="control-inline-start-block-start">
                <input
                    type="text"
                    class="input"
                    placeholder="Search for a place..."
                    autocomplete="off" /><!-- Turn off the input's own autocomplete (not supported by all browsers).-->
                <div class="token-status"></div>
                <div class="title"></div>
                <ol class="results"></ol>
            </div>
        </gmp-map>
    </body>
</html>
index.html

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

ऑटोकंप्लीट (नई) सुविधा के लिए ऑप्टिमाइज़ेशन

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

यहां कुछ सामान्य दिशा-निर्देश दिए गए हैं:

  • उपयोगकर्ता इंटरफ़ेस को तुरंत डेवलप करने के लिए, इनमें से किसी एक का इस्तेमाल करें: Maps JavaScript API Autocomplete (New) widget, Places SDK for Android Autocomplete (New) widget, या Places SDK for iOS Autocomplete (New) widget.
  • शुरू से ही, अपने-आप भरने की सुविधा (नई) के डेटा फ़ील्ड के बारे में ज़रूरी जानकारी पाएं.
  • जगह के हिसाब से खोज के नतीजों को प्राथमिकता देने और जगह के हिसाब से पाबंदी लगाने वाले फ़ील्ड का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, इससे अपने-आप भरने की सुविधा की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है.
  • गड़बड़ी को मैनेज करने की सुविधा का इस्तेमाल करें, ताकि एपीआई से गड़बड़ी का मैसेज मिलने पर आपका ऐप्लिकेशन ठीक से काम करे.
  • पक्का करें कि आपके ऐप्लिकेशन में, कोई विकल्प न चुने जाने पर भी काम करने की सुविधा हो. साथ ही, उपयोगकर्ताओं को आगे बढ़ने का विकल्प मिलता हो.

लागत ऑप्टिमाइज़ करने के सबसे सही तरीके

लागत को ऑप्टिमाइज़ करने की बुनियादी सेटिंग

Autocomplete (New) सेवा का इस्तेमाल करने की लागत को ऑप्टिमाइज़ करने के लिए, Place Details (New) और Autocomplete (New) विजेट में फ़ील्ड मास्क का इस्तेमाल करें. इससे आपको सिर्फ़ ज़रूरी Autocomplete (New) डेटा फ़ील्ड मिलेंगे.

लागत को ऑप्टिमाइज़ करने की बेहतर सुविधा

ऑटोकंप्लीट (नया) को प्रोग्राम के हिसाब से लागू करें, ताकि आपको एसकेयू: ऑटोकंप्लीट अनुरोध की कीमत का ऐक्सेस मिल सके. साथ ही, Place Details (नया) के बजाय, चुनी गई जगह के बारे में Geocoding API के नतीजे पाने का अनुरोध किया जा सके. अगर ये दोनों शर्तें पूरी होती हैं, तो Geocoding API के साथ हर अनुरोध के लिए तय की गई कीमत, हर सेशन (सेशन के आधार पर) के लिए तय की गई कीमत से ज़्यादा किफ़ायती होती है:

  • अगर आपको सिर्फ़ उपयोगकर्ता की चुनी गई जगह का अक्षांश/देशांतर या पता चाहिए, तो Geocoding API, Place Details (New) API के कॉल की तुलना में कम समय में यह जानकारी उपलब्ध कराता है.
  • अगर उपयोगकर्ता, अपने-आप पूरा होने की सुविधा (नई) के लिए औसतन चार या इससे कम अनुरोधों में से किसी एक को चुनते हैं, तो अनुरोध के हिसाब से तय की गई कीमत, सेशन के हिसाब से तय की गई कीमत से ज़्यादा किफ़ायती हो सकती है.
अपनी ज़रूरतों के हिसाब से, अपने कारोबार के लिए ऑटोकंप्लीट (नया) लागू करने का तरीका चुनने के लिए, उस टैब को चुनें जो यहां दिए गए सवाल के आपके जवाब से मेल खाता हो.

क्या आपके ऐप्लिकेशन को चुने गए अनुमान के पते और अक्षांश/देशांतर के अलावा किसी अन्य जानकारी की ज़रूरत है?

हां, ज़्यादा जानकारी चाहिए

जगह की जानकारी (नई सुविधा) के साथ, सेशन के आधार पर काम करने वाली ऑटोकंप्लीट सुविधा (नई सुविधा) का इस्तेमाल करें.
आपके ऐप्लिकेशन को जगह की जानकारी (नई सुविधा) की ज़रूरत होती है. जैसे, जगह का नाम, कारोबार की स्थिति या खुले होने का समय. इसलिए, आपको ऑटोमैटिक भरने की सुविधा (नई सुविधा) को लागू करते समय, हर सेशन के लिए सेशन टोकन का इस्तेमाल करना चाहिए. यह टोकन, प्रोग्राम के हिसाब से या JavaScript, Android या iOS विजेट में बनाया जाता है. साथ ही, आपको लागू होने वाले Places SDK का इस्तेमाल करना चाहिए. यह इस बात पर निर्भर करता है कि आपने जगह की जानकारी के किन फ़ील्ड के लिए अनुरोध किया है.1

विजेट लागू करना
सेशन मैनेजमेंट की सुविधा, JavaScript, Android या iOS विजेट में अपने-आप शामिल होती है. इसमें चुने गए सुझाव के लिए, ऑटोकंप्लीट (नया) और जगह की जानकारी (नई) के अनुरोध, दोनों शामिल होते हैं. fields पैरामीटर को सेट करना न भूलें, ताकि यह पक्का किया जा सके कि आपने सिर्फ़ Autocomplete (New) के डेटा फ़ील्ड का अनुरोध किया है.

प्रोग्राम के हिसाब से लागू करना
ऑटोकंप्लीट (नया) अनुरोधों के साथ सेशन टोकन का इस्तेमाल करें. चुने गए सुझाव के बारे में जगह की जानकारी (नई) का अनुरोध करते समय, इन पैरामीटर को शामिल करें:

  1. ऑटोकंप्लीट (नया) सुविधा से मिले जवाब में मौजूद जगह का आईडी
  2. इस सेशन टोकन का इस्तेमाल, Autocomplete (New) अनुरोध में किया जाता है
  3. fields पैरामीटर, Autocomplete (New) डेटा फ़ील्ड के बारे में बताता है.

नहीं, सिर्फ़ पता और जगह की जानकारी चाहिए

आपके ऐप्लिकेशन के लिए, Place Details (New) की तुलना में Geocoding API ज़्यादा किफ़ायती विकल्प हो सकता है. यह Autocomplete (New) के इस्तेमाल की परफ़ॉर्मेंस पर निर्भर करता है. हर ऐप्लिकेशन के लिए, अपने-आप भरने की सुविधा (नई) की परफ़ॉर्मेंस अलग-अलग होती है. यह इस बात पर निर्भर करती है कि उपयोगकर्ता क्या डाल रहे हैं, ऐप्लिकेशन का इस्तेमाल कहां किया जा रहा है, और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के सबसे सही तरीके लागू किए गए हैं या नहीं.

इस सवाल का जवाब देने के लिए, यह विश्लेषण करें कि उपयोगकर्ता आपके ऐप्लिकेशन में, अपने-आप पूरा होने वाले (नए) सुझाव को चुनने से पहले औसतन कितने वर्ण टाइप करता है.

क्या आपके उपयोगकर्ता, औसतन चार या इससे कम अनुरोधों में ऑटोकंप्लीट (नया) सुविधा से मिले सुझाव को चुनते हैं?

हां

सेशन टोकन के बिना, प्रोग्राम के हिसाब से अपने-आप पूरा होने वाली सुविधा (नई) लागू करें. साथ ही, चुनी गई जगह के अनुमान के लिए Geocoding API को कॉल करें.
Geocoding API, पते और अक्षांश/देशांतर के निर्देशांक उपलब्ध कराता है. चुनी गई जगह के बारे में ऑटोकंप्लीट की सुविधा के लिए चार ऑटोकंप्लीट अनुरोध और Geocoding API कॉल करने पर, एक सेशन के लिए ऑटोकंप्लीट (नया) की लागत, प्रति सेशन से कम होती है.1

परफ़ॉर्मेंस के सबसे सही तरीकों का इस्तेमाल करें, ताकि आपके उपयोगकर्ताओं को कम वर्णों में भी वह अनुमान मिल सके जिसकी वे तलाश कर रहे हैं.

नहीं

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

विजेट लागू करना
सेशन मैनेजमेंट की सुविधा, JavaScript, Android या iOS विजेट में अपने-आप शामिल होती है. इसमें ऑटोकंप्लीट (नया) और चुने गए अनुमान के आधार पर जगह की जानकारी (नई) के अनुरोध, दोनों शामिल हैं. यह पक्का करने के लिए कि आपने सिर्फ़ उन फ़ील्ड के लिए अनुरोध किया है जिनकी आपको ज़रूरत है, fields पैरामीटर तय करना न भूलें.

प्रोग्राम के हिसाब से लागू करना
Autocomplete (नया) के अनुरोधों के साथ, सेशन टोकन का इस्तेमाल करें. चुनी गई भविष्यवाणी के बारे में जगह की जानकारी (नई) का अनुरोध करते समय, ये पैरामीटर शामिल करें:

  1. ऑटोकंप्लीट (नया) सुविधा से मिले जवाब में मौजूद जगह का आईडी
  2. इस सेशन टोकन का इस्तेमाल, Autocomplete (New) अनुरोध में किया जाता है
  3. fields पैरामीटर, जो फ़ील्ड की जानकारी देता है, जैसे कि पता और ज्यामिति

अपने-आप पूरा होने की सुविधा (नई) के अनुरोधों को कुछ समय के लिए रोकें
अपने-आप पूरा होने की सुविधा (नई) के अनुरोध को तब तक के लिए रोका जा सकता है, जब तक उपयोगकर्ता पहले तीन या चार वर्ण टाइप न कर ले. इससे आपका ऐप्लिकेशन कम अनुरोध करेगा. उदाहरण के लिए, अगर उपयोगकर्ता के तीसरे वर्ण को टाइप करने के बाद हर वर्ण के लिए, ऑटोकंप्लीट (नया) अनुरोध किए जाते हैं, तो इसका मतलब है कि अगर उपयोगकर्ता सात वर्ण टाइप करता है और फिर किसी ऐसे सुझाव को चुनता है जिसके लिए आपने एक Geocoding API अनुरोध किया है, तो कुल लागत, ऑटोकंप्लीट (नया) के लिए चार अनुरोध + जियोकोडिंग के लिए होगी.1

अगर अनुरोधों को कुछ समय के लिए रोकने से, प्रोग्राम के हिसाब से किए गए अनुरोधों की औसत संख्या चार से कम हो जाती है, तो Geocoding API के साथ बेहतर परफ़ॉर्मेंस वाले ऑटोकंप्लीट (नया) को लागू करने के लिए दिए गए दिशा-निर्देशों का पालन करें. ध्यान दें कि अनुरोधों में देरी होने पर, उपयोगकर्ता को ऐसा लग सकता है कि खोज के नतीजे दिखने में समय लग रहा है. ऐसा इसलिए, क्योंकि वह हर नए कीस्ट्रोक पर अनुमानित नतीजे देखने की उम्मीद कर रहा होता है.

परफ़ॉर्मेंस के सबसे सही तरीकों का इस्तेमाल करें, ताकि आपके उपयोगकर्ताओं को कम वर्णों में वह अनुमान मिल सके जिसकी वे तलाश कर रहे हैं.

  1. शुल्क के बारे में जानने के लिए, Google Maps Platform के शुल्क की सूची देखें.

परफ़ॉर्मेंस के सबसे सही तरीके

यहां दिए गए दिशा-निर्देशों में, ऑटोकंप्लीट (नया वर्शन) की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के तरीके बताए गए हैं:

  • अपने Autocomplete (New) को लागू करने के लिए, देश के हिसाब से पाबंदियां, जगह के हिसाब से पक्षपात, और (प्रोग्राम के हिसाब से लागू करने के लिए) भाषा की प्राथमिकता जोड़ें. विजेट के लिए भाषा की प्राथमिकता सेट करने की ज़रूरत नहीं होती, क्योंकि वे उपयोगकर्ता के ब्राउज़र या मोबाइल डिवाइस से भाषा की प्राथमिकताएं चुनते हैं.
  • अगर अपने-आप भरने की सुविधा (नई) के साथ मैप दिखाया जाता है, तो मैप व्यूपोर्ट के हिसाब से जगह की जानकारी को प्राथमिकता दी जा सकती है.
  • जब कोई उपयोगकर्ता, ऑटोकंप्लीट (नया) सुविधा के सुझावों में से किसी को नहीं चुनता है, तो आम तौर पर ऐसा इसलिए होता है, क्योंकि इनमें से कोई भी सुझाव, उपयोगकर्ता के हिसाब से नहीं होता. ऐसे में, ज़्यादा काम के नतीजे पाने के लिए, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल किया जा सकता है:
    • अगर आपको लगता है कि उपयोगकर्ता सिर्फ़ पते की जानकारी डालेगा, तो Geocoding API को कॉल करने के लिए, उपयोगकर्ता के ओरिजनल इनपुट का फिर से इस्तेमाल करें.
    • अगर आपको लगता है कि उपयोगकर्ता किसी जगह का नाम या पता डालकर क्वेरी करेगा, तो Place Details (New) अनुरोध का इस्तेमाल करें. अगर आपको नतीजे सिर्फ़ किसी खास इलाके में चाहिए, तो जगह के हिसाब से नतीजों को प्राथमिकता देने की सुविधा का इस्तेमाल करें.
    Geocoding API का इस्तेमाल करने के लिए, यहां कुछ और उदाहरण दिए गए हैं:
    • ऐसे उपयोगकर्ता जो सबप्रीमाइज़ के पते डालते हैं. जैसे, किसी बिल्डिंग में मौजूद खास यूनिट या अपार्टमेंट के पते. उदाहरण के लिए, चेक गणराज्य के पते "Stroupežnického 3191/17, Praha" के लिए, ऑटोकंप्लीट (नया) सुविधा की मदद से आंशिक सुझाव मिलता है.
    • ऐसे उपयोगकर्ता जो न्यूयॉर्क शहर में "23-30 29th St, Queens" या हवाई के काउआई द्वीप पर "47-380 Kamehameha Hwy, Kaneohe" जैसे सड़क-सेगमेंट के प्रीफ़िक्स वाले पते डालते हैं.

जगह के हिसाब से नतीजे दिखाना

location पैरामीटर और radius पैरामीटर पास करके, नतीजों को किसी खास इलाके के हिसाब से दिखाएं. इससे Autocomplete (New) को यह निर्देश मिलता है कि वह तय किए गए इलाके में खोज के नतीजे दिखाने को प्राथमिकता दे. हालांकि, तय की गई जगह से बाहर के नतीजे भी दिख सकते हैं. components पैरामीटर का इस्तेमाल करके, नतीजों को फ़िल्टर किया जा सकता है. इससे सिर्फ़ किसी देश में मौजूद जगहों के नतीजे दिखते हैं.

जगह की जानकारी को सीमित करना

locationRestriction पैरामीटर पास करके, नतीजों को किसी तय जगह के लिए सीमित करें.

location और radius पैरामीटर से तय किए गए क्षेत्र के हिसाब से भी नतीजों को सीमित किया जा सकता है. इसके लिए, locationRestriction पैरामीटर जोड़ें. इससे Autocomplete (New) को उस इलाके के सिर्फ़ नतीजे दिखाने का निर्देश मिलता है.