जगहों के सुझाव ऑटोकंप्लीट करने की सुविधा

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript वेब सेवा

परिचय

ऑटोकंप्लीट, Maps JavaScript API में मौजूद Places लाइब्रेरी की एक सुविधा है. अपने ऐप्लिकेशन में, Google Maps के खोज फ़ील्ड की तरह, टाइप-अहेड-सर्च की सुविधा देने के लिए, ऑटोकंप्लीट का इस्तेमाल किया जा सकता है. अपने-आप जानकारी भरने की सुविधा, पूरे शब्दों और सबस्ट्रिंग से मैच कर सकती है. इससे जगहों के नाम, पते, और plus कोड का पता चलता है. इसलिए, ऐप्लिकेशन उपयोगकर्ता के टाइप करने के साथ-साथ क्वेरी भेज सकते हैं, ताकि जगह के सुझाव तुरंत दिए जा सकें. Places API के मुताबिक, 'जगह' का मतलब किसी कारोबार, भौगोलिक जगह या दिलचस्प जगह से हो सकता है.

शुरू करना

Maps JavaScript API में Places लाइब्रेरी का इस्तेमाल करने से पहले, पहले यह पक्का करें कि Google Cloud Console में, Maps JavaScript API के लिए सेट अप किए गए प्रोजेक्ट में, Places API चालू हो.

चालू किए गए एपीआई की सूची देखने के लिए:

  1. Google Cloud Console पर जाएं.
  2. कोई प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, Maps JavaScript API के लिए सेट अप किया गया प्रोजेक्ट चुनें और खोलें पर क्लिक करें.
  3. डैशबोर्ड पर एपीआई की सूची में, Places API ढूंढें.
  4. अगर आपको सूची में एपीआई दिखता है, तो इसका मतलब है कि आपका खाता सेट अप हो गया है. अगर एपीआई सूची में नहीं है, तो उसे चालू करें:
    1. लाइब्रेरी टैब देखने के लिए, पेज पर सबसे ऊपर, एपीआई चालू करें चुनें. इसके अलावा, बाईं ओर मौजूद मेन्यू में, लाइब्रेरी चुनें.
    2. Places API खोजें. इसके बाद, नतीजों की सूची से उसे चुनें.
    3. चालू करें को चुनें. प्रोसेस पूरी होने के बाद, डैशबोर्ड पर एपीआई की सूची में Places API दिखने लगेगा.

लाइब्रेरी लोड हो रही है

Places सेवा, एक ऐसी लाइब्रेरी है जिसमें सभी सुविधाएं मौजूद होती हैं. यह मुख्य Maps JavaScript API कोड से अलग होती है. इस लाइब्रेरी में मौजूद सुविधाओं का इस्तेमाल करने के लिए, आपको सबसे पहले Maps API के बूटस्ट्रैप यूआरएल में libraries पैरामीटर का इस्तेमाल करके, इसे लोड करना होगा:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>

ज़्यादा जानकारी के लिए, लाइब्रेरी की खास जानकारी देखें.

क्लास की खास जानकारी

एपीआई, ऑटोकंप्लीट की सुविधा वाले दो तरह के विजेट उपलब्ध कराता है. इन्हें Autocomplete और SearchBox क्लास के ज़रिए जोड़ा जा सकता है. इसके अलावा, ऑटोकंप्लीट के नतीजे प्रोग्राम के हिसाब से पाने के लिए, AutocompleteService क्लास का इस्तेमाल किया जा सकता है. इसके लिए, Maps JavaScript API का रेफ़रंस देखें: AutocompleteService क्लास.

उपलब्ध क्लास की खास जानकारी यहां दी गई है:

  • Autocomplete आपके वेब पेज में टेक्स्ट इनपुट फ़ील्ड जोड़ता है और उस फ़ील्ड में वर्ण डालने पर निगरानी करता है. जब कोई उपयोगकर्ता टेक्स्ट डालता है, तो ऑटोमैटिक भरने की सुविधा, जगह के सुझावों को ड्रॉपडाउन सूची के तौर पर दिखाती है. जब उपयोगकर्ता सूची से कोई जगह चुनता है, तो उस जगह की जानकारी ऑटोमैटिक भरने वाले ऑब्जेक्ट में भेजी जाती है. साथ ही, आपके ऐप्लिकेशन से उस जानकारी को वापस पाया जा सकता है. यहां जानकारी देखें.
    अपने-आप भरने वाला टेक्स्ट फ़ील्ड और जगह के सुझावों की सूची, जो उपयोगकर्ता के खोज क्वेरी डालने पर दिखती है.
    पहली इमेज: अपने-आप पूरा होने वाला टेक्स्ट फ़ील्ड और चुनने के लिए दी गई सूची
    पते का भरा हुआ फ़ॉर्म.
    दूसरी इमेज: पते का पूरा किया गया फ़ॉर्म
  • SearchBox, Autocomplete की तरह ही आपके वेब पेज में टेक्स्ट इनपुट फ़ील्ड जोड़ता है. इन दोनों के बीच के फ़र्क़ इस तरह हैं:
    • मुख्य अंतर, चुनने के लिए दी गई सूची में दिखने वाले नतीजों में है. SearchBox, सुझावों की एक लंबी सूची उपलब्ध कराता है. इसमें, Places API के मुताबिक जगहों के साथ-साथ खोज के लिए सुझाए गए शब्द भी शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता ने 'नए पिज़्ज़ा' डाला है, तो चुनने के लिए दी गई सूची में 'न्यूयॉर्क, न्यूयॉर्क में पिज़्ज़ा' वाक्यांश के साथ-साथ, पिज़्ज़ा के अलग-अलग आउटलेट के नाम भी शामिल हो सकते हैं.
    • खोज पर पाबंदी लगाने के लिए, SearchBox में Autocomplete के मुकाबले कम विकल्प मिलते हैं. पहले मामले में, आपके पास किसी LatLngBounds के लिए खोज के नतीजों को बायस करने का विकल्प होता है. बाद वाले विकल्प में, खोज को किसी खास देश और जगह के टाइप तक सीमित किया जा सकता है. साथ ही, सीमाएं भी सेट की जा सकती हैं. ज़्यादा जानकारी के लिए, यहां देखें.
    पते का भरा हुआ फ़ॉर्म.
    तीसरी इमेज: SearchBox में, खोज के लिए इस्तेमाल हुए शब्द और जगह के सुझाव दिखते हैं.
    इस बारे में यहां जानकारी देखें.
  • प्रोग्राम के हिसाब से अनुमान पाने के लिए, AutocompleteService ऑब्जेक्ट बनाया जा सकता है. मैच करने वाली जगहों की जानकारी पाने के लिए getPlacePredictions() को कॉल करें या मैच करने वाली जगहों की जानकारी के साथ-साथ, खोज के लिए सुझाए गए शब्दों की जानकारी पाने के लिए getQueryPredictions() को कॉल करें. ध्यान दें: AutocompleteService कोई यूज़र इंटरफ़ेस (यूआई) कंट्रोल नहीं जोड़ता. इसके बजाय, ऊपर दिए गए तरीके, अनुमानित ऑब्जेक्ट का कलेक्शन दिखाते हैं. हर अनुमानी ऑब्जेक्ट में, अनुमानी का टेक्स्ट होता है. साथ ही, इसमें रेफ़रंस की जानकारी और यह जानकारी भी होती है कि नतीजा, उपयोगकर्ता के इनपुट से कैसे मैच होता है. ज़्यादा जानकारी के लिए, यहां जाएं.

ऑटोकंप्लीट विजेट जोड़ना

Autocomplete विजेट, आपके वेब पेज पर एक टेक्स्ट इनपुट फ़ील्ड बनाता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) की चुनी गई सूची में जगहों के सुझाव देता है. इसके अलावा, getPlace() अनुरोध के जवाब में जगह की जानकारी दिखाता है. चुनी गई जगहों की सूची में मौजूद हर एंट्री, किसी एक जगह से जुड़ी होती है. यह जगह, Places API के मुताबिक तय की जाती है.

Autocomplete कंस्ट्रक्टर में दो आर्ग्युमेंट होते हैं:

  • text टाइप का एचटीएमएल input एलिमेंट. यह वह इनपुट फ़ील्ड है जिसे ऑटोमैटिक भरने की सेवा निगरानी करेगी और अपने नतीजे उससे अटैच करेगी.
  • AutocompleteOptions आर्ग्युमेंट, जो ज़रूरी नहीं है. इसमें ये प्रॉपर्टी शामिल हो सकती हैं:
    • उपयोगकर्ता के चुने गए PlaceResult के लिए, Place Details रिस्पॉन्स में शामिल किए जाने वाले डेटा fields का कलेक्शन. अगर प्रॉपर्टी सेट नहीं है या ['ALL'] को पास किया जाता है, तो सभी उपलब्ध फ़ील्ड दिखाए जाते हैं और उनका बिल भेजा जाता है. प्रोडक्शन डिप्लॉयमेंट के लिए, ऐसा करने का सुझाव नहीं दिया जाता. फ़ील्ड की सूची के लिए, PlaceResult देखें.
    • types का एक कलेक्शन, जो इस्तेमाल किए जा सकने वाले टाइप में बताए गए किसी खास टाइप या टाइप के कलेक्शन के बारे में बताता है. अगर कोई टाइप नहीं दिया गया है, तो सभी टाइप दिखाए जाते हैं.
    • bounds एक google.maps.LatLngBounds ऑब्जेक्ट है, जिसमें उस इलाके की जानकारी होती है जहां जगहें खोजनी हैं. इन सीमाओं के अंदर मौजूद जगहों के लिए, नतीजे ज़्यादा सटीक होते हैं. हालांकि, ये सिर्फ़ इन जगहों तक ही सीमित नहीं होते.
    • strictBounds एक boolean है, जिसमें यह बताया गया है कि एपीआई को सिर्फ़ उन जगहों की जानकारी दिखानी चाहिए जो दिए गए bounds के ज़रिए तय किए गए क्षेत्र में आती हैं. एपीआई इस क्षेत्र से बाहर के नतीजे नहीं दिखाता, भले ही वे उपयोगकर्ता के इनपुट से मेल खाते हों.
    • componentRestrictions का इस्तेमाल करके, नतीजों को खास ग्रुप तक सीमित किया जा सकता है. फ़िलहाल, componentRestrictions का इस्तेमाल करके ज़्यादा से ज़्यादा पांच देशों के हिसाब से फ़िल्टर किया जा सकता है. देशों के नाम, दो वर्णों वाले ISO 3166-1 Alpha-2 फ़ॉर्मैट में होने चाहिए. एक से ज़्यादा देशों के लिए, देश के कोड की सूची दी जानी चाहिए.

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

    • placeIdOnly का इस्तेमाल, Autocomplete विजेट को सिर्फ़ प्लेस आईडी वापस पाने का निर्देश देने के लिए किया जा सकता है. Autocomplete ऑब्जेक्ट पर getPlace() को कॉल करने पर, उपलब्ध कराया गया PlaceResult सिर्फ़ place id, types, और name प्रॉपर्टी सेट करेगा. जगह का आईडी पाने के बाद, उसे Places, जियोकोडिंग, निर्देश या दूरी मैट्रिक की सेवाओं के कॉल के साथ इस्तेमाल किया जा सकता है.

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

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

निर्माण के दौरान विकल्प सेट करना

विजेट बनाते समय पाबंदियां सेट करने के लिए, Autocomplete कॉन्स्ट्रक्टर में AutocompleteOptions पैरामीटर का इस्तेमाल किया जाता है. इस उदाहरण में, establishment टाइप की जगहों के लिए अनुरोध करने के लिए, bounds, componentRestrictions, और types विकल्प सेट किए गए हैं. साथ ही, यह भी तय किया गया है कि सुझाव, तय किए गए भौगोलिक इलाके में मौजूद जगहों के लिए ही दिखाए जाएं. इसके अलावा, सुझाव सिर्फ़ अमेरिका में मौजूद जगहों के लिए दिखाए जाएं. fields विकल्प को सेट करने से यह तय होता है कि उपयोगकर्ता की चुनी गई जगह के बारे में कौनसी जानकारी दिखानी है.

किसी मौजूदा विजेट के लिए, विकल्प की वैल्यू बदलने के लिए setOptions() को कॉल करें.

TypeScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};

const autocomplete = new google.maps.places.Autocomplete(input, options);
index.ts

JavaScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

index.js

डेटा फ़ील्ड तय करना

डेटा फ़ील्ड की जानकारी दें, ताकि आपको उन Places Data SKUs के लिए बिल न भेजा जाए जिनकी आपको ज़रूरत नहीं है. विजेट कन्स्ट्रक्टर को पास की गई AutocompleteOptions में fields प्रॉपर्टी शामिल करें, जैसा कि पिछले उदाहरण में दिखाया गया है या किसी मौजूदा Autocomplete ऑब्जेक्ट पर setFields() को कॉल करें.

autocomplete.setFields(["place_id", "geometry", "name"]);

ऑटोकंप्लीट की सुविधा के लिए, पूर्वाग्रह और खोज के दायरे की सीमाएं तय करना

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

  • Autocomplete ऑब्जेक्ट बनाते समय, उसके लिए सीमाएं सेट करें.
  • किसी मौजूदा Autocomplete के बाउंड बदलें.
  • मैप के व्यूपोर्ट के लिए सीमाएं सेट करें.
  • खोज को सीमाओं तक सीमित रखें.
  • खोज को किसी खास देश तक सीमित करें.

पिछले उदाहरण में, डेटा सेट बनाते समय सीमाएं सेट करने का तरीका बताया गया है. नीचे दिए गए उदाहरणों में, बायस बनाने की अन्य तकनीकों के बारे में बताया गया है.

अपने-आप पूरा होने वाले टेक्स्ट की मौजूदा सीमाओं को बदलना

मौजूदा Autocomplete पर खोज के लिए चुने गए क्षेत्र को आयताकार बॉउंड में बदलने के लिए, setBounds() को कॉल करें.

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
index.ts

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);

index.js
मैप के व्यूपोर्ट के लिए सीमाएं सेट करना

मैप के व्यूपोर्ट के हिसाब से नतीजे पाने के लिए, bindTo() का इस्तेमाल करें. ऐसा तब भी किया जा सकता है, जब व्यूपोर्ट बदल रहा हो.

TypeScript

autocomplete.bindTo("bounds", map);
index.ts

JavaScript

autocomplete.bindTo("bounds", map);

index.js

मैप के व्यूपोर्ट से ऑटोकंप्लीट की सुविधा से मिलने वाले सुझावों को अनबाइंड करने के लिए, unbind() का इस्तेमाल करें.

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
index.ts

JavaScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
index.js

उदाहरण देखें

खोज को मौजूदा सीमाओं तक सीमित करना

नतीजों को मौजूदा सीमाओं तक सीमित करने के लिए, strictBounds विकल्प सेट करें. भले ही, ये सीमाएं मैप व्यूपोर्ट या आयताकार सीमाओं पर आधारित हों.

autocomplete.setOptions({ strictBounds: true });
किसी खास देश के लिए अनुमान दिखाने की सुविधा को सीमित करना

ऑटोकंप्लीट की सुविधा को, ज़्यादा से ज़्यादा पांच देशों के किसी खास सेट तक सीमित करने के लिए, componentRestrictions विकल्प का इस्तेमाल करें या setComponentRestrictions() को कॉल करें.

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});
index.ts

JavaScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

index.js

उदाहरण देखें

जगह के टाइप पर पाबंदी लगाना

types विकल्प का इस्तेमाल करें या setTypes() को कॉल करें, ताकि जगह के कुछ खास टाइप के लिए अनुमान सीमित किए जा सकें. यह शर्त, जगह के टाइप में बताए गए टाइप या टाइप के कलेक्शन के बारे में बताती है. अगर कोई शर्त नहीं दी गई है, तो सभी टाइप के आइटम दिखाए जाते हैं.

types विकल्प की वैल्यू या setTypes() को पास की गई वैल्यू के लिए, इनमें से कोई एक वैल्यू दी जा सकती है:

  • ऐसा ऐरे जिसमें जगह के टाइप की टेबल 1 या टेबल 2 से, ज़्यादा से ज़्यादा पांच वैल्यू शामिल हों. उदाहरण के लिए:

    types: ['hospital', 'pharmacy', 'bakery', 'country']

    या:

    autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
  • जगह के टाइप में मौजूद, टेबल 3 में से कोई एक फ़िल्टर. टेबल 3 में से सिर्फ़ एक वैल्यू दी जा सकती है.

अनुरोध अस्वीकार कर दिया जाएगा, अगर:

  • आपने पांच से ज़्यादा टाइप तय किए हैं.
  • आपने ऐसे टाइप तय किए हैं जिन्हें Google नहीं पहचानता.
  • टेबल 1 या टेबल 2 के किसी भी टाइप को टेबल 3 के किसी भी फ़िल्टर के साथ मिक्स किया जा सकता है.

जगहों के नामों के लिए ऑटोकंप्लीट की सुविधा के डेमो में, जगहों के अलग-अलग टाइप के लिए सुझावों में अंतर दिखाया गया है.

डेमो पर जाएं

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

जब कोई उपयोगकर्ता ऑटोकंप्लीट टेक्स्ट फ़ील्ड में मौजूद सुझावों में से कोई जगह चुनता है, तो यह सेवा place_changed इवेंट ट्रिगर करती है. जगह की जानकारी पाने के लिए:

  1. place_changed इवेंट के लिए कोई इवेंट हैंडलर बनाएं. साथ ही, हैंडलर जोड़ने के लिए Autocomplete ऑब्जेक्ट पर addListener() को कॉल करें.
  2. PlaceResult ऑब्जेक्ट को वापस पाने के लिए, Autocomplete ऑब्जेक्ट पर Autocomplete.getPlace() कॉल करें. इसके बाद, चुने गए ऑब्जेक्ट के बारे में ज़्यादा जानकारी पाने के लिए, इसका इस्तेमाल किया जा सकता है.

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

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

पते के फ़ॉर्म के लिए, पते को स्ट्रक्चर्ड फ़ॉर्मैट में पाना फ़ायदेमंद होता है. चुनी गई जगह का स्ट्रक्चर्ड पता पाने के लिए, Autocomplete.setFields() को कॉल करें और address_components फ़ील्ड की जानकारी दें.

नीचे दिए गए उदाहरण में, पते वाले फ़ॉर्म में फ़ील्ड भरने के लिए, ऑटोमैटिक भरने की सुविधा का इस्तेमाल किया गया है.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

index.js

उदाहरण देखें

प्लेसहोल्डर टेक्स्ट को पसंद के मुताबिक बनाना

डिफ़ॉल्ट रूप से, ऑटोकंप्लीट की सुविधा से बनाए गए टेक्स्ट फ़ील्ड में, स्टैंडर्ड प्लेसहोल्डर टेक्स्ट होता है. टेक्स्ट में बदलाव करने के लिए, input एलिमेंट पर placeholder एट्रिब्यूट सेट करें:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

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

विजेट के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, ऑटोकंप्लीट और SearchBox विजेट को स्टाइल करना लेख पढ़ें.

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

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

SearchBox कंस्ट्रक्टर में दो आर्ग्युमेंट होते हैं:

  • text टाइप का एचटीएमएल input एलिमेंट. यह ऐसा इनपुट फ़ील्ड है जिसकी SearchBox सेवा निगरानी करेगी और अपने नतीजे उससे अटैच करेगी.
  • options आर्ग्युमेंट, जिसमें bounds प्रॉपर्टी शामिल हो सकती है: bounds एक google.maps.LatLngBounds ऑब्जेक्ट है, जिसमें उस इलाके की जानकारी होती है जहां जगहों को खोजना है. नतीजे, इन सीमाओं के अंदर मौजूद जगहों पर आधारित होते हैं. हालांकि, ये सिर्फ़ इन जगहों पर ही सीमित नहीं होते.

यहां दिया गया कोड, सीमाओं के पैरामीटर का इस्तेमाल करके, नतीजों को किसी खास भौगोलिक इलाके में मौजूद जगहों पर फ़ोकस करता है. इस इलाके की जानकारी, अक्षांश/देशांतर निर्देशांक के ज़रिए दी जाती है.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

SearchBox के लिए खोज के दायरे को बदलना

किसी मौजूदा SearchBox के लिए खोज के दायरे को बदलने के लिए, SearchBox ऑब्जेक्ट पर setBounds() को कॉल करें और उससे जुड़ा LatLngBounds ऑब्जेक्ट पास करें.

उदाहरण देखें

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

जब उपयोगकर्ता खोज बॉक्स में मौजूद सुझावों में से कोई आइटम चुनता है, तो सेवा places_changed इवेंट ट्रिगर करती है. कई अनुमानों वाला कलेक्शन पाने के लिए, SearchBox ऑब्जेक्ट पर getPlaces() को कॉल किया जा सकता है. हर अनुमानी वैल्यू एक PlaceResult ऑब्जेक्ट होती है.

PlaceResult ऑब्जेक्ट के बारे में ज़्यादा जानने के लिए, जगह की जानकारी वाले नतीजों के दस्तावेज़ देखें.

TypeScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});
index.ts

JavaScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      }),
    );
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});
index.js

उदाहरण देखें

विजेट के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, ऑटोकंप्लीट और SearchBox विजेट को स्टाइल करना लेख पढ़ें.

प्रोग्राम के हिसाब से, जगह की जानकारी के लिए ऑटोकंप्लीट की सुविधा से मिलने वाले सुझावों को वापस पाना

प्रोग्राम के हिसाब से अनुमान पाने के लिए, AutocompleteService क्लास का इस्तेमाल करें. AutocompleteService कोई यूज़र इंटरफ़ेस (यूआई) कंट्रोल नहीं जोड़ता. इसके बजाय, यह अनुमान के ऑब्जेक्ट का ऐरे दिखाता है. हर ऑब्जेक्ट में अनुमान का टेक्स्ट, रेफ़रंस की जानकारी, और यह जानकारी होती है कि नतीजा, उपयोगकर्ता के इनपुट से कैसे मेल खाता है. यह तब काम आता है, जब आपको ऊपर बताए गए Autocomplete और SearchBox के मुकाबले, यूज़र इंटरफ़ेस पर ज़्यादा कंट्रोल चाहिए.

AutocompleteService ये तरीके एक्सपोज़र करता है:

  • getPlacePredictions(), जगह के सुझाव दिखाता है. ध्यान दें: Places API के मुताबिक, 'जगह' का मतलब किसी कारोबार, भौगोलिक जगह या दिलचस्प जगह से हो सकता है.
  • getQueryPredictions(), अनुमान की एक लंबी सूची दिखाता है. इसमें, Places API के मुताबिक जगहों के साथ-साथ, खोज के लिए सुझाए गए शब्द भी शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'नए पिज़्ज़ा' डालता है, तो चुनने के लिए दी गई सूची में 'न्यूयॉर्क, न्यूयॉर्क में पिज़्ज़ा' के साथ-साथ, पिज़्ज़ा के अलग-अलग आउटलेट के नाम भी शामिल हो सकते हैं.

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

  • description, मैच होने वाला अनुमान है.
  • distance_meters, बताई गई AutocompletionRequest.origin से जगह की दूरी मीटर में है.
  • matched_substrings के ब्यौरे में, उपयोगकर्ता के इनपुट में मौजूद एलिमेंट से मैच करने वाली सबस्ट्रिंग का एक सेट होता है. यह आपके ऐप्लिकेशन में उन सबस्ट्रिंग को हाइलाइट करने के लिए काम का है. कई मामलों में, क्वेरी, ब्यौरे वाले फ़ील्ड की सबस्ट्रिंग के तौर पर दिखेगी.
    • length, सबस्ट्रिंग की लंबाई है.
    • offset, वर्ण का ऑफ़सेट होता है. इसे जानकारी वाली स्ट्रिंग की शुरुआत से मेल खाने वाली सबस्ट्रिंग के दिखने की जगह तक मापा जाता है.
  • place_id एक टेक्स्ट आइडेंटिफ़ायर है, जिससे किसी जगह की खास पहचान की जाती है. जगह की जानकारी पाने के लिए, इस आइडेंटिफ़ायर को जगह की जानकारी के अनुरोध के placeId फ़ील्ड में डालें. जगह के आईडी की मदद से, किसी जगह का रेफ़रंस देने के तरीके के बारे में ज़्यादा जानें.
  • terms एक कलेक्शन है, जिसमें क्वेरी के एलिमेंट शामिल होते हैं. आम तौर पर, किसी जगह के लिए हर एलिमेंट, पते का एक हिस्सा होता है.
    • offset, वर्ण का ऑफ़सेट होता है. इसे जानकारी वाली स्ट्रिंग की शुरुआत से मेल खाने वाली सबस्ट्रिंग के दिखने की जगह तक मापा जाता है.
    • value, मैच होने वाला शब्द है.

नीचे दिए गए उदाहरण में, 'pizza near' वाक्यांश के लिए क्वेरी के अनुमान का अनुरोध किया गया है. साथ ही, नतीजे को सूची में दिखाया गया है.

TypeScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;
index.ts

JavaScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
  const displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;
index.js

सीएसएस

style.css

एचटीएमएल

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

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

उदाहरण देखें

सेशन टोकन

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

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

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

इस उदाहरण में, सेशन टोकन बनाने के बाद, उसे AutocompleteService में पास करने का तरीका बताया गया है. कम शब्दों में बताने के लिए, displaySuggestions() फ़ंक्शन को शामिल नहीं किया गया है:

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

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

सेशन टोकन के बारे में ज़्यादा जानें.

ऑटोकंप्लीट और SearchBox विजेट को स्टाइल करना

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

ऑटोकंप्लीट और SearchBox विजेट के लिए, सीएसएस क्लास का ग्राफ़िक इलस्ट्रेशन
ऑटोकंप्लीट और SearchBox विजेट के लिए सीएसएस क्लास
सीएसएस क्लास ब्यौरा
pac-container विज़ुअल एलिमेंट, जिसमें जगह की जानकारी के लिए ऑटोकंप्लीट की सुविधा से मिले सुझावों की सूची होती है. यह सूची, Autocomplete या SearchBox विजेट के नीचे ड्रॉपडाउन सूची के तौर पर दिखती है.
pac-icon अनुमान की सूची में हर आइटम की बाईं ओर दिखने वाला आइकॉन.
pac-item Autocomplete या SearchBox विजेट से मिलने वाले अनुमान की सूची में मौजूद कोई आइटम.
pac-item:hover वह आइटम जिस पर उपयोगकर्ता अपने माउस पॉइंटर को घुमाता है.
pac-item-selected वह आइटम जिसे उपयोगकर्ता कीबोर्ड से चुनता है. ध्यान दें: चुने गए आइटम, इस क्लास और pac-item क्लास के सदस्य होंगे.
pac-item-query pac-item के अंदर मौजूद एक स्पैन, जो अनुमान का मुख्य हिस्सा होता है. भौगोलिक जगहों के लिए, इसमें जगह का नाम, जैसे कि 'सिडनी' या सड़क का नाम और नंबर, जैसे कि '10 किंग स्ट्रीट' शामिल होता है. 'न्यूयॉर्क में पिज़्ज़ा' जैसी टेक्स्ट-आधारित खोजों के लिए, इसमें क्वेरी का पूरा टेक्स्ट होता है. डिफ़ॉल्ट रूप से, pac-item-query का रंग काला होता है. अगर pac-item में कोई और टेक्स्ट है, तो वह pac-item-query के बाहर होता है और उसकी स्टाइल pac-item से इनहेरिट होती है. यह डिफ़ॉल्ट रूप से स्लेटी रंग का होता है. आम तौर पर, अतिरिक्त टेक्स्ट का मतलब किसी पते से होता है.
pac-matched अनुमान का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल खाता है. डिफ़ॉल्ट रूप से, मैच होने वाला यह टेक्स्ट बोल्ड टेक्स्ट में हाइलाइट किया जाता है. ध्यान दें कि मैच होने वाला टेक्स्ट, pac-item में कहीं भी हो सकता है. यह ज़रूरी नहीं है कि यह टेक्स्ट, पूरी तरह से pac-item-query का हिस्सा हो. यह pac-item-query के साथ-साथ, pac-item के बाकी टेक्स्ट का भी हिस्सा हो सकता है.

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

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

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

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

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

बुनियादी लागत ऑप्टिमाइज़ेशन

जगह की जानकारी अपने-आप भरने की सुविधा का इस्तेमाल करने की लागत को ऑप्टिमाइज़ करने के लिए, जगह की जानकारी और जगह की जानकारी अपने-आप भरने की सुविधा वाले विजेट में फ़ील्ड मास्क का इस्तेमाल करें. इससे, आपको सिर्फ़ वही जगह का डेटा फ़ील्ड दिखेगा जिसकी ज़रूरत है.

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

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

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

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

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

जगह की जानकारी के साथ, सेशन के हिसाब से जगह की जानकारी अपने-आप पूरी होने की सुविधा का इस्तेमाल करें.
आपके ऐप्लिकेशन को जगह की जानकारी की ज़रूरत होती है, जैसे कि जगह का नाम, कारोबार की स्थिति या खुले होने का समय. इसलिए, जगह की जानकारी अपने-आप भरने की सुविधा को लागू करने के लिए, सेशन टोकन का इस्तेमाल किया जाना चाहिए. यह प्रोग्राम के हिसाब से या JavaScript, Android या iOS विजेट में पहले से मौजूद होता है. इसके लिए, हर सेशन के लिए 0.017 डॉलर और Places Data के SKU की लागत चुकाई जाती है. यह लागत, जगह की जानकारी के उन फ़ील्ड पर निर्भर करती है जिनका अनुरोध किया जाता है.1

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

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

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

नहीं, सिर्फ़ पते और जगह की जानकारी की ज़रूरत है

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

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

  1. यहां दी गई कीमतें डॉलर में हैं. कीमत की पूरी जानकारी के लिए, कृपया Google Maps Platform की बिलिंग पेज पर जाएं.

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

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

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

इस्तेमाल की सीमाएं और नीतियां

कोटा

कोटा और कीमत की जानकारी के लिए, Places API के इस्तेमाल और बिलिंग से जुड़ा दस्तावेज़ देखें.

नीतियां

Places Library, Maps JavaScript API का इस्तेमाल, Places API के लिए बताई गई नीतियों के मुताबिक होना चाहिए.