Place Autocomplete Data API

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

अगर आपका बिलिंग पता यूरोपियन इकनॉमिक एरिया में है, तो 8 जुलाई 2025 से, सेवाओं के आपके इस्तेमाल पर Google Maps Platform की ईईए से जुड़ी सेवा की शर्तें लागू होंगी. यह सुविधा, देश/इलाके के हिसाब से अलग-अलग हो सकती है. ज़्यादा जानें.

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

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

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

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

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

// Add an initial request body.
const 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.
request.sessionToken = token;
index.js

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

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

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

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

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

एपीआई का संदर्भ देखें

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

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

const 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.
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 { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const request: google.maps.places.AutocompleteRequest = {
        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.
    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 (const 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);
    }

    const 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}`;
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    const { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const 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.
    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 (const 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);
    }

    const 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}`;
}

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
const titleElement = document.querySelector<HTMLElement>('.title')!;
const resultsContainerElement = document.querySelector('.results')!;
const inputElement = document.querySelector('input')!;
const tokenStatusElement = document.querySelector('.token-status')!;
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.
    innerMap.addListener('bounds_changed', () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

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

async function makeAutocompleteRequest(inputEvent: Event) {
    // 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 as HTMLInputElement)?.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', () => {
            void 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');

    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}`;
}

void init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let marker;
const titleElement = document.querySelector('.title');
const resultsContainerElement = document.querySelector('.results');
const inputElement = document.querySelector('input');
const 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.
    innerMap.addListener('bounds_changed', () => {
        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', () => {
            void 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}`;
}

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;
}

.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>
        <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>
        <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 ऑटोकंप्लीट (नया) विजेट, Places SDK for Android ऑटोकंप्लीट (नया) विजेट, या Places SDK for iOS ऑटोकंप्लीट (नया) विजेट का इस्तेमाल करना.
• शुरुआत से ही, ऑटोकंप्लीट (नई) सुविधा के ज़रूरी डेटा फ़ील्ड को समझें.
• जगह के हिसाब से नतीजे दिखाने और जगह के हिसाब से पाबंदी लगाने वाले फ़ील्ड भरना ज़रूरी नहीं है. हालांकि, इनसे ऑटोकंप्लीट की सुविधा की परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है.
• गड़बड़ी को मैनेज करने की सुविधा का इस्तेमाल करें, ताकि एपीआई से गड़बड़ी मिलने पर आपका ऐप्लिकेशन सही तरीके से काम करता रहे.
• पक्का करें कि आपका ऐप्लिकेशन, कोई विकल्प न चुने जाने पर उपयोगकर्ताओं को आगे बढ़ने का तरीका बताता हो.

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

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

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

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

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

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

अपने ऐप्लिकेशन के लिए, Autocomplete (New) को लागू करने का ऐसा तरीका चुनें जो सबसे किफ़ायती हो. इसके लिए, यहां दी गई टेबल में वह लाइन ढूंढें जो आपके ऐप्लिकेशन की ज़रूरतों से मेल खाती हो.

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

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

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

Place Details (New) के साथ, सेशन के हिसाब से ऑटोकंप्लीट (नई) की सुविधा

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

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

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

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

Geocoding API के साथ, हर अनुरोध के लिए Autocomplete (New) की सुविधा

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

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

सिर्फ़ पते की जानकारी देने वाले ऐप्लिकेशन के लिए, सेशन के हिसाब से ऑटोकंप्लीट (नया)

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

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

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

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

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

अगर अनुरोधों में देरी करने से, प्रोग्राम के हिसाब से किए जाने वाले अनुरोधों की औसत संख्या चार से कम हो सकती है, तो 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 पैरामीटर को पास करके, नतीजों को किसी खास इलाके के हिसाब से बायस करें. इससे, ऑटोकंप्लीट (नया) को तय किए गए इलाके में नतीजे दिखाने को प्राथमिकता देने का निर्देश मिलता है. तय किए गए इलाके से बाहर के नतीजे अब भी दिख सकते हैं. includedRegionCodes पैरामीटर का इस्तेमाल करके, नतीजों को फ़िल्टर किया जा सकता है. इससे सिर्फ़ किसी देश में मौजूद जगहों को दिखाया जा सकता है.

चेतावनी: अगर radius नहीं दिया गया है, तो location पैरामीटर को अनदेखा कर दिया जाता है.

आम तौर पर, कारोबार के नतीजों की रैंक इतनी ज़्यादा नहीं होती कि खोज का दायरा बड़ा होने पर, वे नतीजों में दिखें. अगर आपको कारोबारों की जानकारी, कारोबार और जियोकोड के मिले-जुले नतीजों में दिखानी है, तो छोटा दायरा तय किया जा सकता है. इसके अलावा, types=establishment का इस्तेमाल करके, नतीजों को सिर्फ़ कारोबारों तक सीमित किया जा सकता है.

जगह की जानकारी से जुड़ी पाबंदी

locationRestriction पैरामीटर पास करके, नतीजों को किसी खास इलाके तक सीमित करना.

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

ध्यान दें: जगह से जुड़ी पाबंदियां, सिर्फ़ पूरे रास्तों पर लागू होती हैं. जगह की पाबंदी से बाहर के सिंथेटिक नतीजे, उस रास्ते के आधार पर दिखाए जा सकते हैं जो जगह की पाबंदी से ओवरलैप होता है.