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

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

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

ध्यान दें: सर्वर-साइड लाइब्रेरी

इस पेज पर Maps JavaScript एपीआई के साथ उपलब्ध क्लाइंट-साइड लाइब्रेरी की जानकारी दी गई है. अगर आपको अपने सर्वर पर Places एपीआई वेब सेवा के साथ काम करना है, तो Google Maps सेवाओं के लिए Node.js क्लाइंट पर जाएं. इस लिंक वाले पेज पर Java क्लाइंट, Python क्लाइंट, और Google Maps सेवाओं के लिए Go Client भी दिखता है.

सुविधा के बारे में जानकारी

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

YouTube पर शुरुआत करना

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

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

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

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

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

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

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

कक्षाओं के बारे में खास जानकारी

एपीआई दो तरह के ऑटोकंप्लीट विजेट देता है. इन्हें Autocomplete और SearchBox क्लास की मदद से जोड़ा जा सकता है. साथ ही, AutocompleteService क्लास का इस्तेमाल करके, प्रोग्राम के हिसाब से, अपने-आप पूरा होने वाले नतीजों को वापस लाया जा सकता है (Maps JavaScript एपीआई का संदर्भ देखें: AutocompleteService क्लास).

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

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

पहली इमेज: टेक्स्ट फ़ील्ड को अपने-आप पूरा करें और सूची चुनें

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

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

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

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

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

text टाइप का एक एचटीएमएल एलिमेंट.input यह इनपुट फ़ील्ड है, जो ऑटोकंप्लीट सेवा को ट्रैक करेगी और उसके नतीजों को अटैच करेगी.
एक वैकल्पिक AutocompleteOptions आर्ग्युमेंट, जिसमें ये प्रॉपर्टी शामिल हो सकती हैं:
- उपयोगकर्ता के चुने गए PlaceResult जवाब में fields शामिल किए जाने वाले Place Details जवाब की श्रेणी का डेटा. अगर प्रॉपर्टी सेट नहीं है या अगर ['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 प्रॉपर्टी सेट होंगी. रिटर्न की गई जगह के आईडी का इस्तेमाल, जगहों, जियोकोडिंग, निर्देश, या दूरी के मैट्रिक्स की सेवा को बताने के लिए किया जा सकता है.
  ध्यान दें: name प्रॉपर्टी में, जगहों के बारे में अपने-आप दिखने वाले सुझावों में से description शामिल किया जाएगा. description के बारे में ज़्यादा जानने के लिए, AutocompleteService दस्तावेज़ पढ़ें.
  
  ध्यान दें: placeIdOnly को 15 जनवरी, 2019 से इस्तेमाल नहीं किया जा सकेगा और 15 जनवरी, 2020 को बंद कर दिया जाएगा. इसके बजाय, AutocompleteOptions इंटरफ़ेस में fields कैटगरी का इस्तेमाल करें: fields: ['place_id', 'name', 'types'].

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

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

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

Autocomplete कंस्ट्रक्टर, विजेट बनाने पर कंस्ट्रेंट सेट करने के लिए, AutocompleteOptions पैरामीटर को स्वीकार करता है. इस उदाहरण में, bounds, componentRestrictions, और types जैसे विकल्पों को सेट किया गया है, ताकि establishment टाइप वाली जगहों के लिए अनुरोध किया जा सके. साथ ही, बताई गई जगहों के हिसाब से उपयोगकर्ताओं को प्राथमिकता दी जा सकती है. साथ ही, अमेरिका में सिर्फ़ जगहों को टारगेट करने पर पाबंदी लगाई जा सकती है. 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,
  types: ["establishment"],
};

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,
  types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
index.js

डेटा फ़ील्ड डालें

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

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

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

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

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

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

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

मौजूदा ऑटोकंप्लीट की सीमाओं में बदलाव करें

किसी मौजूदा 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 से सिर्फ़ एक मान तय कर सकते हैं.

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

आपके पास पांच से ज़्यादा प्रकार बताने का विकल्प है.
आपके पास उन टाइप के बारे में बताने का विकल्प होता है जिनकी अनुमति नहीं है.
टेबल 3 के किसी भी फ़िल्टर के साथ, टेबल 1 या टेबल 2 के किसी भी टाइप को मिलाया जाता है.

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

डेमो पर जाएं

स्थान के बारे में जानकारी मिल रही है

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

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

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

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

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

उदाहरण देखें

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

Street_address
कंपनी की इमारत
प्रतिष्ठान

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

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

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

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

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

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

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

SearchBox, सुझावों की एक बड़ी सूची देता है. इसमें जगहों के बारे में सुझाव देने वाले शब्द और जगहों के बारे में सुझाव शामिल होते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'नया' में 'पिज़्ज़ा' डालता है, तो चुनने की सूची में 'न्यूयॉर्क में पिज़्ज़ा' वाक्यांश, और कई पिज़्ज़ा आउटलेट के नाम शामिल हो सकते हैं. जब कोई उपयोगकर्ता सूची से कोई जगह चुनता है, तो उस जगह की जानकारी 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 ऑब्जेक्ट पर 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

उदाहरण देखें

प्रोग्रामेटिक ऑटोकंप्लीट सेवा से जुड़े सुझावों को प्रोग्राम की मदद से फिर से पाना

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

AutocompleteService ये तरीके दिखाता है:

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

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

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

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

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

CSS

style.css

एचटीएमएल

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

उदाहरण देखें

सेशन के टोकन

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

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

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

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

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

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

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

अपनी ज़रूरतों के हिसाब से, 'जगह की जानकारी अपने-आप पूरा होना' विकल्प चुनने में मदद पाने के लिए, वह टैब चुनें जो आपके सवाल के जवाब से जुड़ा है.

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

हां, ज़्यादा जानकारी की ज़रूरत है

जगह की जानकारी के साथ सेशन पर आधारित जगह की जानकारी के अपने-आप पूरा होने की सुविधा का इस्तेमाल करें.
आपके आवेदन में जगह का नाम, कारोबार की स्थिति या खुलने के समय जैसी जानकारी की ज़रूरत होती है. इसलिए, जगह की जानकारी के अपने-आप लागू होने की प्रोसेस को, सेशन टोकन का इस्तेमाल करना चाहिए (या JavaScript, Android या iOS विजेट) का इस्तेमाल करें. कुल लागत 0.017 हर सेशन और लागू किए गए जगहों के डेटा SKU की वजह से होती है^{}^}}

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

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

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

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

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

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

क्या आपके उपयोगकर्ता औसतन चार या उससे कम अनुरोधों के लिए, 'जगह की जानकारी अपने-आप पूरा होना' का अनुमान चुनते हैं?

हां

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

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

नहीं

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

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

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

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

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

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

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

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

निम्न दिशा-निर्देश स्थान ऑटोकंप्लीट परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के तरीके बताते हैं:

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

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

कोटा

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

नीतियां

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

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

सुविधा के बारे में जानकारी

YouTube पर शुरुआत करना

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

कक्षाओं के बारे में खास जानकारी

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

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

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

TypeScript

JavaScript

डेटा फ़ील्ड डालें

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

मौजूदा ऑटोकंप्लीट की सीमाओं में बदलाव करें

TypeScript

JavaScript

मैप के व्यूपोर्ट की सीमाएं सेट करें

TypeScript

JavaScript

TypeScript

JavaScript

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

अनुमानों को किसी खास देश तक सीमित करें

TypeScript

JavaScript

जगह किस तरह की है

स्थान के बारे में जानकारी मिल रही है

TypeScript

JavaScript

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

SearchBox का विजेट जोड़ना

SearchBox के लिए खोज की जगह बदलना

स्थान के बारे में जानकारी मिल रही है

TypeScript

JavaScript

प्रोग्रामेटिक ऑटोकंप्लीट सेवा से जुड़े सुझावों को प्रोग्राम की मदद से फिर से पाना

TypeScript

JavaScript

CSS

एचटीएमएल

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

सेशन के टोकन

ऑटोकंप्लीट और SearchBox के विजेट की फ़ॉर्मैटिंग करना

जगह के लिए, ऑटोकंप्लीट सुविधा का ऑप्टिमाइज़ेशन

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

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

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

हां, ज़्यादा जानकारी की ज़रूरत है

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

हां

नहीं

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

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

कोटा

नीतियां