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

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

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

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

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

परिचय

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

शुरू करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 डेटा एसकेयू के लिए बिल न भेजा जाए जिनकी आपको ज़रूरत नहीं है. विजेट कंस्ट्रक्टर को पास किए गए AutocompleteOptions में fields प्रॉपर्टी को शामिल करें. ऐसा पिछले उदाहरण में दिखाया गया है. इसके अलावा, किसी मौजूदा 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 में मौजूद किसी भी फ़िल्टर के साथ मिक्स किया जा सकता है.

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

डेमो देखें

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

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

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

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

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

name प्रॉपर्टी में, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा से मिलने वाले ऑटोकंप्लीट के सुझावों का 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

उदाहरण देखें

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

street_address
premise
प्रतिष्ठान

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

डिफ़ॉल्ट रूप से, ऑटोकंप्लीट की सेवा से बनाए गए टेक्स्ट फ़ील्ड में, स्टैंडर्ड प्लेसहोल्डर टेक्स्ट होता है. टेक्स्ट में बदलाव करने के लिए, 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 के मुताबिक जगहों की जानकारी के साथ-साथ, खोज के लिए सुझाए गए शब्द भी शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'pizza in new' डालता है, तो पिक लिस्ट में 'pizza in New York, NY' वाक्यांश के साथ-साथ पिज़्ज़ा के अलग-अलग आउटलेट के नाम भी शामिल हो सकते हैं. जब कोई उपयोगकर्ता सूची से कोई जगह चुनता है, तो उस जगह की जानकारी 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

उदाहरण देखें

प्रोग्राम के हिसाब से, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सेवा के सुझाव पाना

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

AutocompleteService में ये तरीके उपलब्ध हैं:

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

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

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

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

TypeScript

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

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

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

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

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

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

JavaScript

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

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

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

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

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

window.initService = initService;index.js

सीएसएस

style.css

एचटीएमएल

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

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

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

उदाहरण देखें

सेशन टोकन

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

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

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

यहां दिए गए उदाहरण में, सेशन टोकन बनाने और फिर उसे 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` में मौजूद बाकी टेक्स्ट का हिस्सा हो सकता है.

Place Autocomplete (लेगसी) को ऑप्टिमाइज़ करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

लागत के बारे में जानने के लिए, Google Maps Platform की कीमत की सूचियां देखें.

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

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

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

जगह की जानकारी के आधार पर नतीजे दिखाना

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

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

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

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

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

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

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

कोटा

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

परिचय

शुरू करना

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

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

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

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

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

TypeScript

JavaScript

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

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

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

TypeScript

JavaScript

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

TypeScript

JavaScript

TypeScript

JavaScript

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

किसी खास देश के लिए अनुमानों पर पाबंदी लगाना

TypeScript

JavaScript

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

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

TypeScript

JavaScript

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

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

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

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

TypeScript

JavaScript

प्रोग्राम के हिसाब से, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सेवा के सुझाव पाना

TypeScript

JavaScript

सीएसएस

एचटीएमएल

सेशन टोकन

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

Place Autocomplete (लेगसी) को ऑप्टिमाइज़ करना

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

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

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

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

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

हां

नहीं

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

जगह की जानकारी के आधार पर नतीजे दिखाना

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

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

कोटा