Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

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

परिचय

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

शुरू करना

Maps JavaScript API में Places library का इस्तेमाल करने से पहले, यह पुष्टि करें कि Google Cloud Console में Places API चालू हो. साथ ही, यह भी पुष्टि करें कि यह उसी प्रोजेक्ट में चालू हो जिसे आपने Maps JavaScript API के लिए सेट अप किया था.

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

Google Cloud Console पर जाएं.
कोई प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, वही प्रोजेक्ट चुनें जिसे आपने Maps JavaScript API के लिए सेट अप किया था. इसके बाद, खोलें पर क्लिक करें.
डैशबोर्ड पर मौजूद एपीआई की सूची में, Places API ढूंढें.
अगर आपको सूची में एपीआई दिखता है, तो इसका मतलब है कि आपने एपीआई को चालू कर लिया है. हालांकि, यह प्रोजेक्ट लेगसी स्टेटस में है. लेगसी स्टेज और लेगसी से नई सेवाओं पर माइग्रेट करने के तरीके के बारे में ज़्यादा जानने के लिए, लेगसी प्रॉडक्ट और सुविधाएं देखें. ऑटोकंप्लीट और SearchBox विजेट के लिए एक अपवाद उपलब्ध है. ये विजेट, Places API (नया) पर GA प्रॉडक्ट के तौर पर अब तक उपलब्ध नहीं हैं.

लाइब्रेरी लोड करना

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

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

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

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

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

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

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

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

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

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

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

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

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

text टाइप का एचटीएमएल input एलिमेंट. यह इनपुट फ़ील्ड है. इसमें अपने-आप पूरा होने वाली सेवा, निगरानी करेगी और इसके नतीजे अटैच करेगी.
वैकल्पिक AutocompleteOptions आर्ग्युमेंट. इसमें ये प्रॉपर्टी शामिल हो सकती हैं:
- डेटा fields का एक कलेक्शन, जिसे उपयोगकर्ता के चुने गए PlaceResult के लिए Place Details रिस्पॉन्स में शामिल किया जाना है. अगर प्रॉपर्टी सेट नहीं की गई है या ['ALL'] पास किया गया है, तो उपलब्ध सभी फ़ील्ड दिखाए जाते हैं और बिल किया जाता है. प्रोडक्शन डिप्लॉयमेंट के लिए, इसका सुझाव नहीं दिया जाता. फ़ील्ड की सूची के लिए, PlaceResult देखें.
- types की एक ऐसी सरणी जो इस्तेमाल किए जा सकने वाले टाइप में दिए गए किसी टाइप या टाइप कलेक्शन के बारे में बताती है. अगर कोई टाइप नहीं चुना जाता है, तो सभी टाइप दिखाए जाते हैं.
- bounds एक google.maps.LatLngBounds ऑब्जेक्ट है. यह उस इलाके के बारे में बताता है जहां जगहों को खोजना है. नतीजे, इन सीमाओं के अंदर मौजूद जगहों के हिसाब से मिलते हैं. हालांकि, ऐसा ज़रूरी नहीं है कि नतीजे सिर्फ़ इन सीमाओं के अंदर मौजूद जगहों के हिसाब से ही मिलें.
- strictBounds एक boolean है. इससे यह तय होता है कि एपीआई को सिर्फ़ उन जगहों की जानकारी देनी चाहिए जो दिए गए bounds के हिसाब से तय किए गए क्षेत्र में मौजूद हैं. एपीआई, इस इलाके से बाहर के नतीजे नहीं दिखाता. भले ही, वे उपयोगकर्ता के इनपुट से मेल खाते हों.
  ध्यान दें: जगह के हिसाब से पाबंदी सिर्फ़ पूरे रास्ते पर लागू होती है. पाबंदी वाली जगह से बाहर मौजूद सिंथेटिक नतीजे, पाबंदी वाली जगह से ओवरलैप होने वाले रास्ते के आधार पर दिखाए जा सकते हैं.
- componentRestrictions का इस्तेमाल करके, नतीजों को कुछ खास ग्रुप तक सीमित किया जा सकता है. componentRestrictions का इस्तेमाल करके, ज़्यादा से ज़्यादा पांच देशों के हिसाब से फ़िल्टर किया जा सकता है. देशों के नाम, दो वर्णों वाले आईएसओ 3166-1 ऐल्फ़ा-2 के मुताबिक देश के कोड के तौर पर पास किए जाने चाहिए. एक से ज़्यादा देशों के नाम, देश के कोड की सूची के तौर पर पास किए जाने चाहिए.
  ध्यान दें: अगर आपको देश के कोड से अनचाहे नतीजे मिलते हैं, तो पुष्टि करें कि आपने ऐसा कोड इस्तेमाल किया हो जिसमें वे देश, आश्रित क्षेत्र, और भौगोलिक रूप से खास इलाके शामिल हों जिन्हें आपको टारगेट करना है. कोड की जानकारी Wikipedia: List of ISO 3166 country codes या ISO Online Browsing Platform पर देखी जा सकती है.
- placeIdOnly का इस्तेमाल, Autocomplete विजेट को सिर्फ़ जगह के आईडी वापस पाने के लिए निर्देश देने के लिए किया जा सकता है. Autocomplete ऑब्जेक्ट पर getPlace() को कॉल करने पर, उपलब्ध कराए गए PlaceResult में सिर्फ़ place id, types, और name प्रॉपर्टी सेट होंगी. जवाब में मिले जगह के आईडी का इस्तेमाल, Places, Geocoding, Directions या Distance Matrix सेवाओं के लिए किया जा सकता है.
  ध्यान दें: name प्रॉपर्टी में, Places API की ऑटोकंप्लीट सुविधा से मिले सुझावों का 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,
};

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

JavaScript

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

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

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

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

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

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

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

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

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

डेमो पर जाएं

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

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

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

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

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

name प्रॉपर्टी में, Places Autocomplete से मिले सुझावों का description होता है. description के बारे में ज़्यादा जानने के लिए, Places Autocomplete के दस्तावेज़ पढ़ें.

पते वाले फ़ॉर्म के लिए, स्ट्रक्चर्ड फ़ॉर्मैट में पता पाना फ़ायदेमंद होता है. चुनी गई जगह का पूरा पता पाने के लिए, 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

उदाहरण देखें

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

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

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

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

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

उदाहरण देखें

प्रोग्राम के हिसाब से, Place Autocomplete Service की मदद से मिलने वाले सुझावों को वापस पाना

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

AutocompleteService इन तरीकों को दिखाता है:

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

ऊपर दिए गए दोनों तरीके, इस तरह के prediction objects का कलेक्शन दिखाते हैं:

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>

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

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

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

JSFiddle.net Google Cloud Shell

उदाहरण देखें

सेशन टोकन

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

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

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

यहां दिए गए उदाहरण में, सेशन टोकन बनाने और फिर उसे AutocompleteService में पास करने का तरीका दिखाया गया है. 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);

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

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

Autocomplete और SearchBox विजेट को स्टाइल करना

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

ऑटोकंप्लीट और SearchBox विजेट के लिए सीएसएस क्लास का ग्राफ़िकल इलस्ट्रेशन — Autocomplete और SearchBox विजेट के लिए सीएसएस क्लास

सीएसएस क्लास	ब्यौरा
`pac-container`	यह विज़ुअल एलिमेंट है. इसमें, Place Autocomplete सेवा से मिले अनुमानों की सूची होती है. यह सूची, `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` में मौजूद बाकी टेक्स्ट में कुछ हद तक भी हो सकता है.

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

इस सेक्शन में, Place Autocomplete (लेगसी) सेवा का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, सबसे सही तरीकों के बारे में बताया गया है.

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

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

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

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

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

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

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

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

अपनी ज़रूरतों के हिसाब से, जगह की जानकारी अपने-आप भरने की सुविधा (लेगसी) लागू करने का तरीका चुनने के लिए, उस टैब को चुनें जो इस सवाल के आपके जवाब से मेल खाता हो.

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

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

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

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

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

Place Autocomplete (लेगसी) के जवाब से मिला जगह का आईडी
Place Autocomplete (लेगसी) के अनुरोध में इस्तेमाल किया गया सेशन टोकन
fields पैरामीटर, Place Autocomplete (लेगसी) के उन डेटा फ़ील्ड के बारे में बताता है जिनकी आपको ज़रूरत है

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

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इस्तेमाल करने की सीमा

कोटा

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

परिचय

शुरू करना

लाइब्रेरी लोड करना

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

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

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

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

TypeScript

JavaScript

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

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

अपने-आप पूरी होने वाली सुविधा के लिए, मौजूदा बाउंड्री में बदलाव करना

TypeScript

JavaScript

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

TypeScript

JavaScript

TypeScript

JavaScript

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

किसी देश के लिए सुझावों को सीमित करना

TypeScript

JavaScript

जगह के टाइप सीमित करना

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

TypeScript

JavaScript

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

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

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

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

TypeScript

JavaScript

प्रोग्राम के हिसाब से, Place Autocomplete Service की मदद से मिलने वाले सुझावों को वापस पाना

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

सेशन टोकन

Autocomplete और SearchBox विजेट को स्टाइल करना

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

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

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

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

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

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

हां

नहीं

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

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

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

इस्तेमाल करने की सीमा

कोटा