शुरुआती जानकारी
ऑटोकंप्लीट, Maps JavaScript API में मौजूद जगहों की लाइब्रेरी की एक सुविधा है. ऑटोकंप्लीट की सुविधा का इस्तेमाल करके, अपने ऐप्लिकेशन को Google Maps के खोज फ़ील्ड में पहले से टाइप करने के लिए टाइप किया जा सकता है. अपने-आप पूरा होने वाली सेवा, जगह के नामों, पतों, और प्लस कोड को ठीक करने के लिए, पूरे शब्दों और सबस्ट्रिंग से मेल खा सकती है. इसलिए, ऐप्लिकेशन किसी व्यक्ति के टाइप के हिसाब से क्वेरी भेज सकते हैं, ताकि यात्रा के दौरान अनुमान लगाया जा सके. Places API के मुताबिक, कोई 'जगह' कोई संस्थान, भौगोलिक जगह या लोकप्रिय जगह हो सकती है.
प्रारंभ करना
Maps JavaScript API में Places लाइब्रेरी का इस्तेमाल करने से पहले, पक्का करें कि Google Cloud Console में Places API चालू है. यह उसी प्रोजेक्ट में चालू है जिसे आपने Maps JavaScript API के लिए सेट अप किया है.
चालू किए गए एपीआई की सूची देखने के लिए:
- Google Cloud Console पर जाएं.
- कोई प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, उसी प्रोजेक्ट को चुनें जिसे आपने Maps JavaScript API के लिए सेट अप किया है. इसके बाद, खोलें पर क्लिक करें.
- डैशबोर्ड पर एपीआई की सूची में, Locations API खोजें.
- अगर आपको सूची में एपीआई दिखता है, तो इसका मतलब है कि आप पूरी तरह से तैयार हैं. अगर एपीआई की सूची नहीं है, तो उसे चालू करें:
- लाइब्रेरी टैब दिखाने के लिए, पेज पर सबसे ऊपर, एपीआई चालू करें को चुनें. इसके अलावा, बाईं ओर मौजूद मेन्यू से, लाइब्रेरी चुनें.
- जगहें एपीआई खोजें. इसके बाद, नतीजों की सूची में से इसे चुनें.
- चालू करें को चुनें. प्रोसेस पूरी हो जाने के बाद, लोकेशन एपीआई डैशबोर्ड पर एपीआई की सूची में दिखने लगता है.
लाइब्रेरी लोड हो रही है
'जगहें' सेवा में पूरी जानकारी मौजूद होती है. यह लाइब्रेरी, Maps के मुख्य JavaScript एपीआई कोड से अलग होती है. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए, सबसे पहले आपको इसे 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 class.
उपलब्ध क्लास की खास जानकारी यहां दी गई है:
-
Autocomplete
आपके वेब पेज में टेक्स्ट इनपुट फ़ील्ड जोड़ता है और वर्णों के एंट्री के लिए उस फ़ील्ड को मॉनिटर करता है. जैसे ही उपयोगकर्ता टेक्स्ट डालता है, विकल्प अपने-आप दिखने वाले सुझावों को ड्रॉपडाउन से जगहों की सूची के तौर पर दिखाता है. जब उपयोगकर्ता सूची से कोई जगह चुनता है, तो जगह की जानकारी अपने-आप पूरा होने वाले ऑब्जेक्ट में वापस भेज दी जाती है और आपका ऐप्लिकेशन उसे हासिल कर सकता है. इसके बारे में ज़्यादा जानकारी नीचे देखें. -
SearchBox
,Autocomplete
की तरह ही आपके वेब पेज में टेक्स्ट इनपुट फ़ील्ड जोड़ता है. दोनों के बीच का अंतर यहां बताया गया है:- मुख्य अंतर उन नतीजों में होता है जो फ़ोटो चुनने की सूची में दिखते हैं.
SearchBox
, सुझावों की एक बड़ी सूची उपलब्ध कराता है. इसमें जगहों के बारे में (जैसा कि Places API के मुताबिक तय किया गया है) और खोज के लिए सुझाए गए शब्द शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'नई में पिज़्ज़ा' डालता है, तो पिक लिस्ट में 'दिल्ली में पिज़्ज़ा' वाक्यांश के साथ-साथ पिज़्ज़ा की अलग-अलग दुकानों के नाम भी शामिल हो सकते हैं. - खोज को सीमित करने के लिए,
SearchBox
मेंAutocomplete
के मुकाबले कम विकल्प हैं. उदाहरण के लिए, पहले वाली कैटगरी में, खोज को दिए गएLatLngBounds
के हिसाब से रखा जा सकता है. बाद में, खोज को किसी खास देश और किसी खास तरह की जगहों के लिए सीमित किया जा सकता है. साथ ही, सीमा तय की जा सकती है. ज़्यादा जानकारी के लिए, यहां देखें.
- मुख्य अंतर उन नतीजों में होता है जो फ़ोटो चुनने की सूची में दिखते हैं.
- प्रोग्राम के हिसाब से, अनुमानों को पाने के लिए
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: ISO 3166 देशों के कोड की सूची या आईएसओ ऑनलाइन ब्राउज़िंग प्लैटफ़ॉर्म पर जाएं.
placeIdOnly
का इस्तेमाल,Autocomplete
विजेट को सिर्फ़ प्लेस आईडी पाने के निर्देश देने के लिए किया जा सकता है.Autocomplete
ऑब्जेक्ट परgetPlace()
को कॉल करने पर, उपलब्धPlaceResult
में सिर्फ़place id
,types
, औरname
प्रॉपर्टी सेट होंगी. आप लौटाए गए जगह के आईडी का इस्तेमाल, जगहों, जियोकोडिंग, दिशा-निर्देश या डिस्टेंस मैट्रिक्स सेवाओं को कॉल करने के लिए कर सकते हैं.
- उपयोगकर्ता के चुने गए
ऑटोकंप्लीट की सुविधा के सुझावों पर पाबंदी लगाना
जगह के अपने-आप पूरे होने की सुविधा, डिफ़ॉल्ट रूप से सभी तरह की जगहों को दिखाती है. यह उपयोगकर्ता की जगह के आस-पास के अनुमानों के हिसाब से होती है और उपयोगकर्ता की चुनी हुई जगह के लिए उपलब्ध सभी डेटा फ़ील्ड को फ़ेच करती है. जगह के अपने-आप पूरे होने की सुविधा के विकल्प सेट करें, ताकि आपके इस्तेमाल के उदाहरण के आधार पर, ज़्यादा काम के अनुमान दिखाए जा सकें.
कंस्ट्रक्शन के दौरान विकल्प सेट करना
विजेट बनाने की सीमाएं सेट करने के लिए, 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);
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);
डेटा फ़ील्ड के बारे में बताएं
डेटा फ़ील्ड के बारे में बताएं, ताकि आपको उन जगहों के डेटा SKU का बिल न भेजा जाए जिनकी आपको ज़रूरत नहीं है. विजेट कंस्ट्रक्टर को पास की गई AutocompleteOptions
में fields
प्रॉपर्टी शामिल करें, जैसा कि पिछले उदाहरण में दिखाया गया है या किसी मौजूदा Autocomplete
ऑब्जेक्ट पर setFields()
को कॉल करें.
autocomplete.setFields(["place_id", "geometry", "name"]);
ऑटोकंप्लीट के लिए पक्षपात और खोज-क्षेत्र की सीमाएं तय करें
नीचे दिए गए तरीकों से, अपने-आप पूरे होने वाले नतीजों में अनुमानित जगह या इलाके को दिखाने के लिए, मापदंड तय किया जा सकता है:
Autocomplete
ऑब्जेक्ट बनाने के लिए सीमाएं सेट करें.- मौजूदा
Autocomplete
की सीमाएं बदलें. - सीमाओं को मैप के व्यूपोर्ट पर सेट करें.
- खोज को सीमा तक सीमित करें.
- खोज को किसी खास देश के लिए सीमित करें.
पिछला उदाहरण, कॉन्टेंट बनाने के दौरान सेट की गई सीमाओं के बारे में बताता है. नीचे दिए गए उदाहरणों में, मापदंड तय करने की अन्य तकनीकों के बारे में बताया गया है.
मौजूदा ऑटोकंप्लीट की सीमाएं बदलना
किसी मौजूदा 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);
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);
सीमाओं को मैप के व्यूपोर्ट पर सेट करें
नतीजों को मैप के व्यूपोर्ट के हिसाब से
तय करने के लिए, bindTo()
का इस्तेमाल करें, भले ही व्यूपोर्ट बदल जाए.
TypeScript
autocomplete.bindTo("bounds", map);
JavaScript
autocomplete.bindTo("bounds", map);
मैप के व्यूपोर्ट से, ऑटोकंप्लीट की सुविधा के लिए मिलने वाले सुझावों को हटाने के लिए, unbind()
का इस्तेमाल करें.
TypeScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
JavaScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
खोज को मौजूदा सीमाओं तक सीमित करें
नतीजों को मौजूदा सीमाओं तक सीमित करने के लिए, strictBounds
विकल्प सेट करें, चाहे मैप के व्यूपोर्ट पर आधारित हो या आयताकार सीमाओं पर.
autocomplete.setOptions({ strictBounds: true });
किसी खास देश के लिए सुझावों पर पाबंदी लगाना
अपने-आप पूरा होने वाली खोज की सुविधा को ज़्यादा से ज़्यादा पांच देशों के लिए सीमित करने के लिए, componentRestrictions
विकल्प का इस्तेमाल करें या setComponentRestrictions()
को कॉल करें.
TypeScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
JavaScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
पाबंदी वाली जगहों के टाइप
किसी खास जगह के अनुमान को सीमित करने के लिए, 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()
को कॉल करें.- कोई
PlaceResult
ऑब्जेक्ट वापस पाने के लिए,Autocomplete
ऑब्जेक्ट परAutocomplete.getPlace()
को कॉल करें. इसके बाद, इसका इस्तेमाल चुनी गई जगह के बारे में ज़्यादा जानकारी पाने के लिए किया जा सकता है.
जब कोई उपयोगकर्ता किसी जगह को चुनता है, तो उस जगह के लिए ऑटोकंप्लीट की सुविधा, सभी उपलब्ध डेटा फ़ील्ड दिखाती है. इससे आपको इसके मुताबिक बिल भेजा जाएगा.
जगह के डेटा फ़ील्ड को दिखाने के लिए, Autocomplete.setFields()
का इस्तेमाल करें. PlaceResult
ऑब्जेक्ट के बारे में ज़्यादा पढ़ें. साथ ही, जगह की जानकारी के उन डेटा फ़ील्ड की सूची के बारे में पढ़ें जिनके लिए अनुरोध किया जा सकता है. ग़ैर-ज़रूरी डेटा के लिए पैसे चुकाने से बचने के लिए, Autocomplete.setFields()
का इस्तेमाल करें. इससे, सिर्फ़ उस जगह का डेटा बताया जाएगा
जिसका इस्तेमाल आपको करना है.
name
प्रॉपर्टी में, जगहों के अपने-आप पूरे होने की सुविधा के अनुमानों का description
शामिल होता है. जगहों के लिए अपने-आप पूरा होने की सुविधा वाले दस्तावेज़ में जाकर, description
के बारे में ज़्यादा जानकारी
पढ़ी जा सकती है.
पते के फ़ॉर्म के लिए, स्ट्रक्चर्ड फ़ॉर्मैट में पता पाना मददगार होता है. चुनी गई जगह का स्ट्रक्चर्ड पता दिखाने के लिए, Autocomplete.setFields()
पर कॉल करें और address_components
फ़ील्ड बताएं.
इस उदाहरण में, पते के फ़ॉर्म में फ़ील्ड भरने के लिए, ऑटोकंप्लीट की सुविधा का इस्तेमाल किया गया है.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
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;
प्लेसहोल्डर टेक्स्ट को कस्टमाइज़ करना
डिफ़ॉल्ट रूप से, ऑटोकंप्लीट सेवा के लिए बनाए गए टेक्स्ट फ़ील्ड में, स्टैंडर्ड प्लेसहोल्डर टेक्स्ट शामिल होता है. टेक्स्ट में बदलाव करने के लिए, input
एलिमेंट पर
placeholder
एट्रिब्यूट सेट करें:
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
ध्यान दें: डिफ़ॉल्ट प्लेसहोल्डर टेक्स्ट का स्थानीय भाषा में अनुवाद अपने-आप हो जाता है. अगर आपको अपनी प्लेसहोल्डर वैल्यू खुद तय करनी है, तो आपको अपने ऐप्लिकेशन में उस वैल्यू को स्थानीय भाषा के अनुसार मैनेज करना होगा. Google Maps JavaScript API, इस्तेमाल करने के लिए भाषा कैसे चुनता है, इस बारे में जानकारी के लिए कृपया स्थानीय भाषा के अनुसार दस्तावेज़ पढ़ें.
विजेट के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, ऑटोकंप्लीट और SearchBox विजेट को स्टाइल करना देखें.
SearchBox विजेट जोड़ना
SearchBox
उपयोगकर्ताओं को भौगोलिक खोज के लिए टेक्स्ट के हिसाब से
विकल्प देता है, जैसे कि 'न्यूयॉर्क में पिज़्ज़ा' या 'रॉब्सन स्ट्रीट के आस-पास के जूतों की दुकानें'.
आपके पास SearchBox
को टेक्स्ट फ़ील्ड में अटैच करने का विकल्प होता है. जैसे ही टेक्स्ट डाला जाएगा, वह सेवा ड्रॉप-डाउन चुनने की सूची के तौर पर सुझाव दिखाएगी.
SearchBox
, अनुमानों की एक बड़ी सूची उपलब्ध कराता है. इसमें जगहों की जानकारी (जैसा कि Places API के मुताबिक तय किया गया है) शामिल हो सकती है. साथ ही, इसमें खोज के लिए सुझाए गए शब्द भी शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'नई में पिज़्ज़ा' लिखता है, तो पिक लिस्ट में 'नई दिल्ली, दिल्ली में पिज़्ज़ा' वाक्यांश के साथ-साथ
अलग-अलग पिज़्ज़ा आउटलेट के नाम भी शामिल हो सकते हैं. जब कोई उपयोगकर्ता सूची से कोई जगह चुनता है, तो उस जगह की जानकारी SearchBox ऑब्जेक्ट में वापस दिखाई जाती है. इस जानकारी को आपका ऐप्लिकेशन
वापस ला सकता है.
SearchBox
कंस्ट्रक्टर दो आर्ग्युमेंट लेता है:
text
टाइप का एचटीएमएलinput
एलिमेंट. इस इनपुट फ़ील्ड कोSearchBox
सेवा मॉनिटर करेगी और इसी में अपने नतीजे अटैच करेगी.options
आर्ग्युमेंट, जिसमेंbounds
प्रॉपर्टी शामिल हो सकती है:bounds
एकgoogle.maps.LatLngBounds
ऑब्जेक्ट है, जो उस इलाके की जानकारी देता है जहां जगहों की खोज करनी है. नतीजे इन सीमाओं में मौजूद जगहों की ओर झुकाव वाले होते हैं, लेकिन इन तक सीमित नहीं होते.
नीचे दिया गया कोड, बाउंड पैरामीटर का इस्तेमाल करके, किसी खास भौगोलिक इलाके की जगहों के आधार पर नतीजों को अनुमान लगाता है. इन जगहों की जानकारी, लेआउट/देशांतर निर्देशांक की मदद से दी जाती है.
var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); var input = document.getElementById('searchTextField'); var searchBox = new google.maps.places.SearchBox(input, { bounds: defaultBounds });
SearchBox के लिए खोज की जगह बदलना
किसी मौजूदा SearchBox
के लिए खोज की जगह बदलने के लिए, 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); });
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); });
विजेट के दिखने के तरीके को पसंद के मुताबिक बनाने के लिए, ऑटोकंप्लीट और SearchBox विजेट को स्टाइल करना देखें.
स्थान ऑटोकंप्लीट सेवा के सुझावों को प्रोग्राम के हिसाब से वापस पाना
प्रोग्राम के हिसाब से, सुझावों को पाने के लिए,
AutocompleteService
क्लास का इस्तेमाल करें. AutocompleteService
में यूज़र इंटरफ़ेस (यूआई) कंट्रोल नहीं होता. इसके बजाय, यह प्रेडिक्शन ऑब्जेक्ट का कलेक्शन दिखाता है. हर ऑब्जेक्ट में, अनुमान का टेक्स्ट, रेफ़रंस के तौर पर दी गई जानकारी, और उपयोगकर्ता के इनपुट से नतीजे का मिलान करने के तरीके के बारे में जानकारी होती है.
यह तरीका तब काम आता है, जब आपको ऊपर बताए गए Autocomplete
और SearchBox
के मुकाबले, यूज़र इंटरफ़ेस पर ज़्यादा कंट्रोल चाहिए.
AutocompleteService
में इन तरीकों के बारे में बताया गया है:
getPlacePredictions()
जगह का अनुमान दिखाता है. ध्यान दें: 'जगह' कोई संस्थान, भौगोलिक जगह या लोकप्रिय जगह हो सकती है, जैसा कि Places API के मुताबिक तय किया गया है.getQueryPredictions()
, अनुमानों की पूरी सूची दिखाता है. इसमें जगहों की जानकारी (जैसा कि Places API के मुताबिक तय किया गया है) और खोज के लिए सुझाए गए शब्द शामिल हो सकते हैं. उदाहरण के लिए, अगर उपयोगकर्ता 'नई में पिज़्ज़ा' डालता है, तो पिक लिस्ट में 'नई दिल्ली में पिज़्ज़ा' वाक्यांश के साथ-साथ पिज़्ज़ा की अलग-अलग दुकानों के नाम भी शामिल हो सकते हैं.
ऊपर दिए गए दोनों तरीके, इस तरह के अनुमान वाले ऑब्जेक्ट का अरे दिखाते हैं:
description
मेल खाने वाला अनुमान है.distance_meters
, तयAutocompletionRequest.origin
से जगह की दूरी मीटर में है.matched_substrings
के ब्यौरे में सबस्ट्रिंग का एक सेट होता है, जो उपयोगकर्ता के इनपुट में मौजूद एलिमेंट से मेल खाता है. यह आपके ऐप्लिकेशन में उन सबस्ट्रिंग को हाइलाइट करने के लिए फ़ायदेमंद है. कई मामलों में, क्वेरी, ब्यौरा फ़ील्ड की सबस्ट्रिंग के तौर पर दिखेगी.length
, सबस्ट्रिंग की लंबाई है.offset
एक वर्ण ऑफ़सेट है. इसे जानकारी वाली स्ट्रिंग की शुरुआत से मेज़र किया जाता है. इस स्ट्रिंग पर, मिलती-जुलती सबस्ट्रिंग दिखती है.
place_id
एक टेक्स्ट आइडेंटिफ़ायर है, जो किसी जगह की खास तौर पर पहचान करता है. जगह की जानकारी पाने के लिए, जगह की जानकारी के अनुरोध केplaceId
फ़ील्ड में इस आइडेंटिफ़ायर को डालें. जगह के आईडी से किसी जगह का रेफ़रंस देने के तरीके के बारे में ज़्यादा जानें.terms
एक कलेक्शन है जिसमें क्वेरी के एलिमेंट शामिल हैं. आम तौर पर, किसी जगह के लिए हर एलिमेंट में पते का एक हिस्सा शामिल होता है.offset
एक वर्ण ऑफ़सेट है. इसे जानकारी वाली स्ट्रिंग की शुरुआत से मेज़र किया जाता है. इस स्ट्रिंग पर, मिलती-जुलती सबस्ट्रिंग दिखती है.value
मिलता-जुलता शब्द है.
नीचे दिए गए उदाहरण में, 'पिज़्ज़ा के पास मौजूद' वाक्यांश के लिए, क्वेरी का अनुमान लगाने वाला अनुरोध लागू किया गया है. साथ ही, नतीजे को सूची में दिखाया गया है.
TypeScript
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService(): void { const displaySuggestions = function ( predictions: google.maps.places.QueryAutocompletePrediction[] | null, status: google.maps.places.PlacesServiceStatus ) { if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) { alert(status); return; } predictions.forEach((prediction) => { const li = document.createElement("li"); li.appendChild(document.createTextNode(prediction.description)); (document.getElementById("results") as HTMLUListElement).appendChild(li); }); }; const service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions); } declare global { interface Window { initService: () => void; } } window.initService = initService;
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;
सीएसएस
एचटीएमएल
<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>
सैंपल आज़माएं
सेशन के टोकन
AutocompleteService.getPlacePredictions()
बिलिंग के मकसद से, अपने-आप पूरा होने वाले अनुरोधों को एक साथ ग्रुप करने के लिए, सेशन टोकन (अगर लागू हो) का इस्तेमाल कर सकता है. सेशन टोकन, उपयोगकर्ता की क्वेरी और चुनने के चरणों को ग्रुप कर देता है. इससे बिलिंग के मकसद से,
खोज को अलग-अलग सेशन में अपने-आप पूरा किया जाता है. सेशन तब शुरू होता है, जब उपयोगकर्ता टाइप करना शुरू करता है और जगह चुनने के बाद खत्म होता है. हर सेशन में कई क्वेरी हो सकती हैं और उनके बाद किसी एक जगह को चुना जा सकता है.
सेशन खत्म होने के बाद, टोकन मान्य नहीं रहता है. आपके ऐप्लिकेशन को हर सेशन के लिए
नया टोकन जनरेट करना होगा. हमारा सुझाव है कि अपने-आप पूरा होने वाले सभी सेशन के लिए,
सेशन टोकन का इस्तेमाल करें. अगर sessionToken
पैरामीटर छोड़ दिया गया है या किसी सेशन टोकन का फिर से इस्तेमाल किया जाता है, तो सेशन से इस तरह शुल्क लिया जाता है जैसे कोई सेशन टोकन नहीं दिया गया था (हर अनुरोध का बिल अलग से भेजा जाता है).
AutocompleteService.getPlacePredictions()
को कॉल करने पर किसी जगह के लिए जगह की जानकारी का एक ही अनुरोध करने के लिए, एक ही सेशन टोकन का इस्तेमाल किया जा सकता है.
इस मामले में, अपने-आप पूरे होने वाले अनुरोध को जगह की जानकारी के अनुरोध के साथ जोड़ दिया जाता है. इससे, इस कॉल का शुल्क, जगह की जानकारी के सामान्य अनुरोध के तौर पर लिया जाता है. अपने-आप पूरा होने के अनुरोध के लिए कोई
शुल्क नहीं लिया जाता.
हर नए सेशन के लिए एक यूनीक सेशन टोकन पास करना न भूलें. एक से ज़्यादा अपने-आप पूरा होने वाले सेशन के लिए एक ही टोकन का इस्तेमाल करने से, वे ऑटोकंप्लीट सेशन अमान्य हो जाएंगे. साथ ही, अमान्य सेशन में अपने-आप पूरे होने वाले सभी अनुरोधों के लिए, हर अनुरोध के लिए अपने-आप पूरा होने की सुविधा का इस्तेमाल करके अलग-अलग शुल्क लिया जाएगा. सेशन टोकन के बारे में ज़्यादा जानें.
इस उदाहरण में, सेशन टोकन बनाने के बाद उसे 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
, दोनों विजेट पर लागू होती हैं.
सीएसएस क्लास | ब्यौरा |
---|---|
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 के बाकी टेक्स्ट में भी हो सकता है. |
प्लेस पिकर कॉम्पोनेंट का इस्तेमाल करना
ध्यान दें: यह सैंपल, ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. लाइब्रेरी से जुड़ी मदद और सुझाव या राय पाने के लिए, README देखें.
वेब कॉम्पोनेंट आज़माएं. टेक्स्ट इनपुट चालू करने के लिए प्लेस पिकर वेब कॉम्पोनेंट का इस्तेमाल करें. इससे असली उपयोगकर्ता, ऑटोकंप्लीट सुविधा का इस्तेमाल करके किसी खास पते या जगह को खोज सकते हैं.
अपने-आप पूरा होने की सुविधा के लिए ऑप्टिमाइज़ेशन की सुविधा चालू करें
इस सेक्शन में, 'अपने-आप पूरा होने की सुविधा' सेवा का ज़्यादा से ज़्यादा फ़ायदा पाने के सबसे सही तरीके बताए गए हैं.
यहां कुछ सामान्य दिशा-निर्देश दिए गए हैं:
- काम करने वाला यूज़र इंटरफ़ेस डेवलप करने का सबसे तेज़ तरीका Maps JavaScript API ऑटोकंप्लीट विजेट, Android के लिए जगहें SDK टूल ऑटोकंप्लीट विजेट, या iOS के लिए, Places SDK टूल ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) कंट्रोल का इस्तेमाल करना है
- जगह की जानकारी अपने-आप भर जाने की सुविधा के ज़रूरी डेटा फ़ील्ड को शुरू से ही अच्छी तरह समझ लें.
- जगह के हिसाब से चुनने की सुविधा और जगह की जानकारी पर पाबंदी वाले फ़ील्ड ज़रूरी नहीं हैं. हालांकि, ये फ़ील्ड ऑटोकंप्लीट की सुविधा की परफ़ॉर्मेंस पर काफ़ी असर डाल सकते हैं.
- गड़बड़ी ठीक करने की सुविधा का इस्तेमाल करें, ताकि यह पक्का किया जा सके कि अगर एपीआई कोई गड़बड़ी दिखाता है, तो आपका ऐप्लिकेशन ग्रेसफ़ुली डिग्रेड हो जाए.
- पक्का करें कि आपके ऐप्लिकेशन को तब हैंडल किया जाए, जब आपने कोई विकल्प न चुना हो और उपयोगकर्ताओं को आगे बढ़ने का तरीका दिया गया हो.
लागत ऑप्टिमाइज़ेशन के सबसे सही तरीके
बुनियादी लागत ऑप्टिमाइज़ेशन
जगह की जानकारी अपने-आप पूरी होने की सुविधा के इस्तेमाल की लागत को ऑप्टिमाइज़ करने के लिए, जगह की जानकारी में फ़ील्ड मास्क और 'अपने-आप पूरा होने की सुविधा' विजेट का इस्तेमाल करें. इससे आपको सिर्फ़ अपनी ज़रूरत के जगह के डेटा के फ़ील्ड मिलते हैं.
लागत का बेहतर ऑप्टिमाइज़ेशन
हर अनुरोध के लिए तय की गई कीमत को ऐक्सेस करने के लिए, प्रोग्राम के हिसाब से अपने-आप जगह पूरा होने की सुविधा को प्रोग्राम के हिसाब से लागू करें. साथ ही, जगह की जानकारी के बजाय, चुनी गई जगह के बारे में जियोकोडिंग एपीआई के नतीजों का अनुरोध करें. अगर नीचे दी गई दोनों शर्तें पूरी होती हैं, तो जियोकोडिंग एपीआई के साथ हर अनुरोध के लिए तय की गई कीमत, हर सेशन (सेशन-आधारित) कीमत के मुकाबले ज़्यादा किफ़ायती होती है:
- अगर आपको सिर्फ़ उपयोगकर्ता की चुनी हुई जगह के अक्षांश/देशांतर या पते की ज़रूरत है, तो जियोकोडिंग एपीआई यह जानकारी, जगह की जानकारी वाले कॉल से कम के समय में डिलीवर करता है.
- अगर उपयोगकर्ता, ऑटोकंप्लीट की सुविधा के लिए औसतन चार या उससे कम अनुरोधों के आधार पर किसी सुझाव को चुनते हैं, तो हर सेशन के लिए हर अनुरोध के लिए तय की गई कीमत की तुलना में, हर अनुरोध के लिए तय की गई कीमत ज़्यादा किफ़ायती हो सकती है.
क्या आपके ऐप्लिकेशन को, चुने गए अनुमान के पते और अक्षांश/देशांतर के अलावा किसी अन्य जानकारी की ज़रूरत है?
हां, ज़्यादा जानकारी की ज़रूरत है
सेशन के हिसाब से, जगह की जानकारी के साथ जगह के अपने-आप पूरे होने की सुविधा का इस्तेमाल करें.
आपके ऐप्लिकेशन के लिए जगह का नाम, कारोबार की स्थिति या खुलने के समय जैसी जानकारी की ज़रूरत होती है. इसलिए, जगह अपने-आप पूरी होने की सुविधा को लागू करने के लिए, सेशन टोकन (प्रोग्राम के तौर पर या JavaScript, Android या iOS विजेट) में बनाया जाना चाहिए. इसकी कुल लागत 0.017 डॉलर होनी चाहिए. साथ ही, जगहों के डेटा के लिए इस्तेमाल किए जाने वाले के हिसाब से ही लागू जगहों के SKU का इस्तेमाल करना चाहिए.
विजेट लागू करना
सेशन मैनेजमेंट, JavaScript, Android या iOS विजेट में अपने-आप पहले से मौजूद होता है. इसमें चुने गए सुझाव पर, जगह की जानकारी अपने-आप पूरी होने के अनुरोध और जगह की जानकारी के लिए अनुरोध, दोनों शामिल होते हैं. fields
पैरामीटर की जानकारी देना न भूलें, ताकि यह पक्का किया जा सके कि आपने सिर्फ़ उन
जगह के डेटा के फ़ील्ड के लिए अनुरोध किया है जिनकी आपको ज़रूरत है.
प्रोग्रामैटिक लागू करना
'अपने-आप पूरा होने की सुविधा' के अपने अनुरोधों के साथ सेशन टोकन का इस्तेमाल करें. चुने गए अनुमान के बारे में जगह की जानकारी का अनुरोध करते समय, ये पैरामीटर शामिल करें:
- जगह के अपने-आप पूरे होने वाले जवाब से जगह का आईडी
- जगह के अपने-आप पूरे होने की सुविधा के अनुरोध में इस्तेमाल किया गया सेशन टोकन
fields
पैरामीटर, आपके लिए ज़रूरी जगह के डेटा फ़ील्ड के बारे में बताता है
नहीं, सिर्फ़ पता और जगह की जानकारी चाहिए
जियोकोडिंग एपीआई, आपके ऐप्लिकेशन के लिए स्थान विवरण की तुलना में ज़्यादा किफ़ायती विकल्प हो सकता है, जो आपके स्थान ऑटोकंप्लीट उपयोग के प्रदर्शन पर निर्भर करता है. हर ऐप्लिकेशन की अपने-आप पूरी होने की सुविधा के काम करने की क्षमता इस आधार पर अलग-अलग होती है कि उपयोगकर्ता क्या डाल रहे हैं, ऐप्लिकेशन कहां इस्तेमाल किया जा रहा है, और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के सबसे सही तरीके लागू किए गए हैं या नहीं.
नीचे दिए गए सवाल का जवाब देने के लिए, अपने ऐप्लिकेशन में 'अपने-आप पूरा होने की सुविधा' के किसी सुझाव को चुनने से पहले, यह विश्लेषण करें कि एक उपयोगकर्ता औसतन कितने वर्ण टाइप करता है.
क्या आपके उपयोगकर्ता, औसतन चार या उससे कम अनुरोधों में, जगह के अपने-आप पूरे होने की सुविधा के अनुमान को चुनते हैं?
हां
सेशन टोकन के बिना, प्रोग्राम के हिसाब से अपने-आप 'जगह की जानकारी' सुविधा लागू करें और चुनी गई जगह के अनुमान पर जियोकोडिंग एपीआई को कॉल करें.
जियोकोडिंग एपीआई, हर अनुरोध के लिए 0.005 डॉलर में पते और अक्षांश/देशांतर निर्देशांक डिलीवर करता है. चार जगह के अपने-आप पूरे होने की सुविधा - हर अनुरोध के लिए 0.01132 डॉलर का शुल्क लिया जाता है. इसलिए, चार अनुरोधों के साथ-साथ चुने गए जगह के अनुमान के लिए जियोकोडिंग एपीआई कॉल की कुल लागत 0.01632 डॉलर होगी जो हर सेशन के लिए ऑटोकंप्लीट की कीमत 0.017 डॉलर प्रति सेशन से कम है.1
परफ़ॉर्मेंस के सबसे सही तरीके अपनाएं. इससे उपयोगकर्ताओं को कम वर्णों में भी वह अनुमान मिल सकेगा जो वे चाहते हैं.
नहीं
सेशन के हिसाब से, जगह की जानकारी के साथ जगह के अपने-आप पूरे होने की सुविधा का इस्तेमाल करें.
जगह के अपने-आप पूरे होने की सुविधा का अनुमान लगाने से पहले, उपयोगकर्ता के किए गए अनुरोधों की औसत संख्या हर सेशन की कीमत से ज़्यादा होती है. इसलिए, 'जगह के अपने-आप पूरे होने की सुविधा' को लागू करने के लिए, जगह की जानकारी अपने-आप पूरे होने के अनुरोध और उससे जुड़ी जगह की जानकारी के अनुरोध, दोनों के लिए एक सेशन टोकन का इस्तेमाल करना चाहिए. इसकी कुल लागत 0.017 डॉलर है. यह हर सेशन के हिसाब से होगी.1
विजेट लागू करना
सेशन मैनेजमेंट, JavaScript, Android या iOS विजेट में अपने-आप पहले से मौजूद होता है. इसमें चुने गए सुझाव पर, जगह की जानकारी अपने-आप पूरी होने के अनुरोध और जगह की जानकारी के लिए अनुरोध, दोनों शामिल होते हैं. fields
पैरामीटर की जानकारी देना न भूलें, ताकि यह पक्का किया जा सके कि आपने सिर्फ़ बुनियादी डेटा वाले फ़ील्ड का अनुरोध किया है.
प्रोग्रामैटिक लागू करना
'अपने-आप पूरा होने की सुविधा' के अपने अनुरोधों के साथ सेशन टोकन का इस्तेमाल करें. चुने गए अनुमान के बारे में जगह की जानकारी का अनुरोध करते समय, ये पैरामीटर शामिल करें:
- जगह के अपने-आप पूरे होने वाले जवाब से जगह का आईडी
- जगह के अपने-आप पूरे होने की सुविधा के अनुरोध में इस्तेमाल किया गया सेशन टोकन
fields
पैरामीटर, जिसमें बेसिक डेटा वाले फ़ील्ड शामिल हैं, जैसे कि पता और ज्यामिति
'अपने-आप पूरा होने की सुविधा के अनुरोध' को भेजने में देरी करें
जब तक उपयोगकर्ता पहले तीन या चार वर्ण टाइप न करे, तब तक के लिए अपने-आप पूरा होने की सुविधा के अनुरोध में देरी जैसी कुछ रणनीतियां लागू की जा सकती हैं, ताकि आपका ऐप्लिकेशन कम अनुरोध करे. उदाहरण के लिए, उपयोगकर्ता के तीसरा वर्ण टाइप करने के बाद, हर वर्ण के लिए अपने-आप पूरा होने का अनुरोध करने का मतलब है कि अगर उपयोगकर्ता सात वर्ण टाइप करता है और वह अनुमान चुनता है जिसके लिए आप एक जियोकोडिंग एपीआई अनुरोध करते हैं, तो कुल लागत $0.01632 (4 * $0.00283 ऑटोकंप्लीट प्रति अनुरोध + $0.005 जियोकोडिंग) होगी.1
अगर अनुरोध में देरी होती है, तो औसत प्रोग्राम के हिसाब से अपने-आप पूरे होने वाले अनुरोध, चार से कम हो सकते हैं. ऐसे में, जियोकोडिंग एपीआई की मदद से अपने-आप पूरा होने की सुविधा के लिए परफ़ॉर्मेंस से जुड़े दिशा-निर्देशों का पालन किया जा सकता है. ध्यान दें कि अनुरोध में देरी को उस उपयोगकर्ता के लिए इंतज़ार का समय माना जा सकता है जो हर नए कीस्ट्रोक के लिए अनुमान देखने की उम्मीद कर रहा हो.
परफ़ॉर्मेंस के सबसे सही तरीके अपनाएं. इससे उपयोगकर्ताओं को कम वर्णों में बेहतर अनुमान लगाने में मदद मिलेगी.
-
यहां दी गई कीमतें डॉलर में दी गई हैं. कीमत के बारे में पूरी जानकारी पाने के लिए, कृपया Google Maps Platform के बिलिंग पेज पर जाएं.
परफ़ॉर्मेंस के सबसे सही तरीके
नीचे दिए गए दिशा-निर्देशों में, जगहों के अपने-आप पूरे होने की सुविधा की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के तरीके बताए गए हैं:
- जगह की जानकारी अपने-आप पूरी होने की सुविधा को लागू करने की प्रोसेस में, देश से जुड़ी पाबंदियां, जगह के हिसाब से अनुमान लगाना, और (प्रोग्राम के हिसाब से अपने-आप पूरी होने वाली सुविधा) की भाषा की प्राथमिकता जोड़ें. विजेट के साथ भाषा की प्राथमिकता की ज़रूरत नहीं होती है, क्योंकि ये उपयोगकर्ता के ब्राउज़र या मोबाइल डिवाइस से अपनी पसंद की भाषा चुनते हैं.
- अगर जगह के अपने-आप पूरे होने की सुविधा में मैप शामिल है, तो मैप के व्यूपोर्ट का इस्तेमाल करके, जगह की जानकारी को पूर्वाग्रह के तौर पर सेट किया जा सकता है.
- अगर कोई उपयोगकर्ता, ऑटोकंप्लीट की सुविधा के लिए दिए गए सुझावों में से किसी को भी नहीं चुनता है, तो ज़्यादा काम के नतीजे पाने के लिए, उपयोगकर्ता के मूल इनपुट का फिर से इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि आम तौर पर, इनमें से कोई भी खोज के नतीजे का पता नहीं होता है. ऐसे में, उपयोगकर्ता के इनपुट का फिर से इस्तेमाल किया जा सकता है:
- अगर आपको लगता है कि उपयोगकर्ता सिर्फ़ पते की जानकारी डाले, तो जियोकोडिंग एपीआई की कॉल में मूल उपयोगकर्ता के इनपुट का फिर से इस्तेमाल करें.
- अगर आपको लगता है कि उपयोगकर्ता किसी खास जगह के लिए नाम या पते के आधार पर क्वेरी डाले, तो जगह ढूंढने का अनुरोध का इस्तेमाल करें. अगर नतीजे सिर्फ़ किसी खास इलाके में देखे जा सकते हैं, तो जगह के हिसाब से मापदंड तय करने की सुविधा इस्तेमाल करें.
- उपयोगकर्ता, उन देशों के सब-प्रिमाइस पते डालते हैं जहां सब-प्रिमाइस पते के लिए, ऑटोकंप्लीट की सुविधा की सुविधा उपलब्ध नहीं है. जैसे, चेकिया, एस्टोनिया, और लिथुआनिया. उदाहरण के लिए, चेक पते में "StRopezzडेटा 3191/17, Praha" का इस्तेमाल करने पर, ऑटोकंप्लीट की जगह के बारे में कुछ अनुमान मिलता है.
- उपयोगकर्ता, सड़क के सेगमेंट वाले प्रीफ़िक्स के साथ पते डालते हैं. जैसे, न्यूयॉर्क शहर में "23-30 29th St, Queens" या "47-380 कामेहामेहा Hwy, Kaneohe".
इस्तेमाल करने की सीमाएं और नीतियां
कोटा
कोटा और कीमत की जानकारी के लिए, Places API के इस्तेमाल और बिलिंग के दस्तावेज़ देखें.
नीतियां
Places लाइब्रेरी का इस्तेमाल करते समय, Maps JavaScript API, Places API के लिए बताई गई नीतियों के मुताबिक होना चाहिए.