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

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

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

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

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

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

परिचय

ऑटोकंप्लीट, Maps JavaScript API में मौजूद Places library की एक सुविधा है. ऑटोकंप्लीट सुविधा का इस्तेमाल करके, अपने ऐप्लिकेशन में 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 प्रॉडक्ट के तौर पर अभी उपलब्ध नहीं हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अनुरोध को इन मामलों में अस्वीकार कर दिया जाएगा:

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

जगहों के नाम अपने-आप भरने की सुविधा के डेमो में, अलग-अलग तरह की जगहों के लिए अनुमानों के बीच के अंतर को दिखाया गया है.

डेमो देखें

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

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

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

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 विजेट के लिए सीएसएस क्लास का ग्राफ़िकल इलस्ट्रेशन — Autocomplete और SearchBox विजेट के लिए सीएसएस क्लास

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

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

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

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

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

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

सीएसएस

एचटीएमएल

सेशन टोकन

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

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

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

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

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

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

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

हां

नहीं

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

लोकेशन के हिसाब से पक्षपात करना

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

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

कोटा