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

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

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

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

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

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

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

शुरू करना

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

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

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

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

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

पहली इमेज: ऑटोकंप्लीट टेक्स्ट फ़ील्ड और चुनने के लिए सूची

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

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

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

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

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

text टाइप का एक एचटीएमएल input एलिमेंट. यह इनपुट फ़ील्ड है, जिस पर ऑटोकंप्लीट सेवा निगरानी करेगी और उसके नतीजों को अटैच करेगी.
एक वैकल्पिक AutocompleteOptions आर्ग्युमेंट, जिसमें ये प्रॉपर्टी शामिल हो सकती हैं:
- उपयोगकर्ता के चुने हुए PlaceResult के लिए, 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 विजेट को निर्देश देने के लिए किया जा सकता है. getPlace() को Autocomplete ऑब्जेक्ट पर कॉल करने पर, 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 प्रॉपर्टी को शामिल करें, जैसा कि पिछले उदाहरण में दिखाया गया है या मौजूदा 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 से सिर्फ़ एक वैल्यू तय कर सकते हैं.

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

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

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

डेमो पर जाएं

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

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

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

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

मोहल्ले का पता
परिसर
प्रतिष्ठान

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

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

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

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

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

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

उदाहरण देखें

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

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

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

सीएसएस

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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.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` के बाकी टेक्स्ट में भी हो सकता है.

जगह का ऑटोकंप्लीट ऑप्टिमाइज़ेशन

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

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

चालू यूज़र इंटरफ़ेस को डेवलप करने का सबसे तेज़ तरीका है, JavaScript JavaScript एपीआई ऑटोकंप्लीट विजेट, 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 Kaehamaha Hwy, Kaneohe" जैसे सड़क के सेगमेंट प्रीफ़िक्स से पते डालते हैं.

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

कोटा

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

नीतियां

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

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

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

शुरू करना

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

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

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

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

कंस्ट्रक्शन के विकल्प सेट करें

TypeScript

JavaScript

डेटा फ़ील्ड के बारे में बताएं

ऑटोकंप्लीट के लिए, खोज के नतीजों और पक्षपात की सीमाओं के बारे में बताएं

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

TypeScript

JavaScript

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

TypeScript

JavaScript

TypeScript

JavaScript

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

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

TypeScript

JavaScript

जगह की जानकारी पर पाबंदी लगाएं

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

TypeScript

JavaScript

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

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

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

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

TypeScript

JavaScript

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

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

सेशन के टोकन

ऑटोकंप्लीट और SearchBox विजेट को बेहतर बनाना

जगह का ऑटोकंप्लीट ऑप्टिमाइज़ेशन

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

मूल लागत ऑप्टिमाइज़ेशन

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

हां, और जानकारी चाहिए

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

हां

नहीं

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

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

कोटा

नीतियां