सुरक्षा नोटिस: हमें सुरक्षा से जुड़ी एक समस्या का पता चला है. यह समस्या तीसरे पक्ष की कुछ लाइब्रेरी (इसमें polyfill.io शामिल है) का इस्तेमाल करने वाली वेबसाइटों पर असर डाल सकती है. इस समस्या की वजह से, वेबसाइट पर आने वाले लोगों को कभी-कभी अपनी वेबसाइट के मालिक की जानकारी या अनुमति के बिना ही, दूसरी वेबसाइट पर रीडायरेक्ट कर दिया जाता है. हमारे कई JavaScript सैंपल में, पहले से polyfill.io स्क्रिप्ट का एलान शामिल था. हमने इसे अपने सैंपल से हटा दिया है. अगर आपने हमारे JavaScript सैंपल का इस्तेमाल किया है और इनमें यह एलान शामिल है, तो हमारा सुझाव है कि आप इस एलान को हटा दें.

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

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

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

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

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

परिचय

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

शुरू करना

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

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

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

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

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 Alpha-2 फ़ॉर्मैट में होने चाहिए. एक से ज़्यादा देशों को देश के कोड की सूची के तौर पर पास करना ज़रूरी है.
  ध्यान दें: अगर आपको किसी देश कोड के साथ अनचाहे नतीजे मिलते हैं, तो पुष्टि करें कि आपने ऐसे कोड का इस्तेमाल किया है जिसमें आपके हिसाब से, टारगेट किए जाने वाले देश, उनसे जुड़े इलाके, और खास भौगोलिक इलाके शामिल हों. कोड की जानकारी पाने के लिए, Wikipedia: ISO 3166 देश के कोड की सूची या ISO ऑनलाइन ब्राउज़िंग प्लैटफ़ॉर्म पर जाएं.
- placeIdOnly का इस्तेमाल सिर्फ़ जगह के आईडी वापस पाने के लिए Autocomplete विजेट. Autocomplete ऑब्जेक्ट पर getPlace() को कॉल करने पर, उपलब्ध कराया गया PlaceResult सिर्फ़ place id, types, और name प्रॉपर्टी सेट करेगा. जगह का आईडी पाने के बाद, उसे Places, जियोकोडिंग, निर्देश या डिस्टेंस मैट्रिक सेवाओं के कॉल के साथ इस्तेमाल किया जा सकता है.
  ध्यान दें: name प्रॉपर्टी में स् थान ऑटोकंप्लीट अनुमानों से description. यहां दी गई जानकारी पाने के लिए, description AutocompleteService दस्तावेज़.
  
  सूचना: placeIdOnly का इस्तेमाल 15 जनवरी, 2019 से नहीं किया जा सकता. इसे 15 जनवरी, 2020 से बंद कर दिया जाएगा. इसका इस्तेमाल करें fields कलेक्शन इसके बजाय AutocompleteOptions इंटरफ़ेस: fields: ['place_id', 'name', 'types'].

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

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

निर्माण के दौरान विकल्प सेट करना

Autocomplete कंस्ट्रक्टर, AutocompleteOptions को स्वीकार करता है पैरामीटर का इस्तेमाल करें. इस उदाहरण में, establishment टाइप की जगहों के लिए अनुरोध करने के लिए, bounds, componentRestrictions, और types विकल्प सेट किए गए हैं. साथ ही, यह भी तय किया गया है कि सुझाव, तय किए गए भौगोलिक इलाके में मौजूद जगहों के लिए ही दिखाए जाएं. इसके अलावा, सुझाव सिर्फ़ अमेरिका में मौजूद जगहों के लिए दिखाए जाएं. सेट करना 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

डेटा फ़ील्ड चुनें

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

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

पक्षपात और खोज-क्षेत्र की सीमाएं परिभाषित करें ऑटोकंप्लीट

ऑटोकंप्लीट की सुविधा के नतीजों को, किसी जगह या इलाके के हिसाब से दिखाया जा सकता है. इसके लिए, ये तरीके अपनाएं:

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

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

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

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

किसी मौजूदा डिवाइस पर, खोज करने की जगह बदलने के लिए setBounds() पर कॉल करें Autocomplete आयताकार सीमाओं के लिए.

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);index.ts

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
index.js

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

मैप के व्यूपोर्ट में नतीजों को तय करने के लिए bindTo() का इस्तेमाल करें, भले ही वह व्यूपोर्ट बदल रहा हो.

TypeScript

autocomplete.bindTo("bounds", map);index.ts

JavaScript

autocomplete.bindTo("bounds", map);
index.js

मैप के व्यूपोर्ट से ऑटोकंप्लीट की सुविधा से मिलने वाले सुझावों को अनबाइंड करने के लिए, unbind() का इस्तेमाल करें.

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });index.ts

JavaScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });index.js

उदाहरण देखें

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

नतीजों को मौजूदा सीमाओं तक सीमित करने के लिए, strictBounds विकल्प सेट करें. भले ही, वह मैप व्यूपोर्ट पर आधारित हो या आयताकार सीमाओं पर.

autocomplete.setOptions({ strictBounds: true });

अनुमानों को किसी खास देश के हिसाब से दिखाना

इन्हें सीमित करने के लिए, componentRestrictions विकल्प का इस्तेमाल करें या setComponentRestrictions() पर कॉल करें ऑटोकंप्लीट खोज की सुविधा का इस्तेमाल करें. इसमें ज़्यादा से ज़्यादा पांच देशों के लिए खोज के विकल्प शामिल हैं.

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});index.ts

JavaScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});
index.js

उदाहरण देखें

जगह के टाइप पर पाबंदी लगाना

सीमित करने के लिए, types विकल्प का इस्तेमाल करें या setTypes() को कॉल करें खोज के लिए जगह के सुझाव दिखाता है. यह कंस्ट्रेंट किसी टाइप या टाइप कलेक्शन के बारे में बताता है, जैसा कि जगह के टाइप में बताया गया है. अगर कोई शर्त नहीं दी गई है, तो सभी टाइप के आइटम दिखाए जाते हैं.

types विकल्प की वैल्यू या setTypes() को पास की जाने वाली वैल्यू के लिए, आप इनमें से किसी एक को तय कर सकता है:

ऐसा ऐरे जिसमें जगह के टाइप की टेबल 1 या टेबल 2 से, ज़्यादा से ज़्यादा पांच वैल्यू शामिल हों. उदाहरण के लिए:
```
types: ['hospital', 'pharmacy', 'bakery', 'country']
```
या:
```
autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
```
जगह के टाइप में मौजूद, टेबल 3 में से कोई एक फ़िल्टर. टेबल 3 में से सिर्फ़ एक वैल्यू दी जा सकती है.

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

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

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

डेमो पेज पर जाएं

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

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

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

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

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

name प्रॉपर्टी में, जगहों के नाम के लिए ऑटोकंप्लीट की सुविधा से मिलने वाले सुझावों में से description शामिल होता है. यहां दी गई जानकारी पाने के लिए, description स्थान ऑटोकंप्लीट की सुविधा से जुड़ा दस्तावेज़.

पते के फ़ॉर्म के लिए, पते को स्ट्रक्चर्ड फ़ॉर्मैट में पाना फ़ायदेमंद होता है. यहां की यात्रा पर हूं चुनी गई जगह का स्ट्रक्चर्ड पता दिखाएं, कॉल करें Autocomplete.setFields() और address_components फ़ील्ड तय करें.

नीचे दिए गए उदाहरण में, पते वाले फ़ॉर्म में फ़ील्ड भरने के लिए, ऑटोमैटिक भरने की सुविधा का इस्तेमाल किया गया है.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}index.ts

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

उदाहरण देखें

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

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 है उस क्षेत्र को बताने वाला ऑब्जेक्ट है जिसमें स्थानों को खोजना है. नतीजे में शामिल स्थानों के प्रति पक्षपातपूर्ण हैं, लेकिन इन तक सीमित नहीं हैं ये सीमाएं हैं.

यह कोड, बाउंड पैरामीटर का इस्तेमाल करके नतीजों को तय करता है किसी विशेष भौगोलिक क्षेत्र के स्थानों के लिए, जिनके माध्यम से निर्दिष्ट किया गया है अक्षांश/देशांतर निर्देशांक.

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

उदाहरण देखें

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

प्रोग्राम के हिसाब से, जगह की जानकारी अपने-आप पूरा करने वाली सेवा के सुझावों को प्रोग्राम की मदद से वापस पाना

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

AutocompleteService ये तरीके एक्सपोज़र करता है:

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

ऊपर दिए गए दोनों तरीके सुझाव ऑब्जेक्ट होने चाहिए:

description का अनुमान मेल खाने वाला अनुमान है.
distance_meters, बताई गई AutocompletionRequest.origin से जगह की दूरी मीटर में है.
matched_substrings में सबस्ट्रिंग का एक सेट ऐसी जानकारी जो उपयोगकर्ता के इनपुट में मौजूद एलिमेंट से मेल खाती हो. यह आपके ऐप्लिकेशन में उन सबस्ट्रिंग को हाइलाइट करने के लिए काम का है. कई मामलों में, क्वेरी, ब्यौरे वाले फ़ील्ड की सबस्ट्रिंग के तौर पर दिखेगी.
- length, सबस्ट्रिंग की लंबाई है.
- offset वर्ण ऑफ़सेट है, जिसे इससे मापा जाता है विवरण स्ट्रिंग की शुरुआत, जिससे मिलान की गई सबस्ट्रिंग दिखाई देता है.
place_id एक टेक्स्ट आइडेंटिफ़ायर है, जो प्रॉडक्ट की खास तौर पर पहचान करता है कोई जगह. स्थान के बारे में जानकारी पुनर्प्राप्त करने के लिए, इस पहचानकर्ता को a का placeId फ़ील्ड स्थान विवरण request. जगह के आईडी की मदद से, किसी जगह का रेफ़रंस देने के तरीके के बारे में ज़्यादा जानें.
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

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

JSFiddle.net Google Cloud Shell

उदाहरण देखें

सेशन के लिए टोकन

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

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

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

इस उदाहरण में, सेशन टोकन बनाने के बाद, उसे AutocompleteService में पास करने का तरीका बताया गया है. कम शब्दों में बताने के लिए, displaySuggestions() फ़ंक्शन को शामिल नहीं किया गया है:

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

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

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

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

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

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

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

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

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

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

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

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

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

स्थान ऑटोकंप्लीट की सुविधा का इस्तेमाल करने की लागत को ऑप्टिमाइज़ करने के लिए सेवा में है, तो स्थान विवरण और स्थान ऑटोकंप्लीट विजेट में फ़ील्ड मास्क का उपयोग करें, ताकि केवल अपनी ज़रूरत के डेटा फ़ील्ड डालें.

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

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

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

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

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

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

जगह की जानकारी के साथ, सेशन के हिसाब से जगह की जानकारी अपने-आप पूरी होने की सुविधा का इस्तेमाल करें.
आपके ऐप्लिकेशन को जगह की जानकारी की ज़रूरत होती है, जैसे कि जगह का नाम, कारोबार की स्थिति या खुले होने का समय. इसलिए, जगह की जानकारी अपने-आप भरने की सुविधा को लागू करने के लिए, सेशन टोकन का इस्तेमाल किया जाना चाहिए. यह प्रोग्राम के हिसाब से या JavaScript, Android या iOS विजेट में पहले से मौजूद होता है. इसके लिए, हर सेशन के लिए 0.017 डॉलर और Places Data के SKU की लागत चुकाई जाती है. यह लागत, जगह की जानकारी के उन फ़ील्ड पर निर्भर करती है जिनका अनुरोध किया जाता है.¹

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

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

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

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

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

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

क्या आपके उपयोगकर्ता औसतन चार या उससे कम अनुरोधों में, किसी जगह के लिए ऑटोकंप्लीट की सुविधा का अनुमान लगाते हैं?

हां

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

परफ़ॉर्मेंस के सबसे सही तरीके इस्तेमाल करने के बारे में सोचें. इससे आपके उपयोगकर्ता और भी कम वर्णों में अनुमान लगा पाने में मदद कर पाएंगे.

नहीं

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

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

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

जगह के अपने-आप पूरे होने वाले जवाब से मिला जगह का आईडी
जगह की जानकारी अपने-आप भरने के अनुरोध में इस्तेमाल किया गया सेशन टोकन
पता और ज्यामिति जैसे बेसिक डेटा फ़ील्ड को बताने वाला fields पैरामीटर

किसी जगह के लिए, जगह के अपने-आप पूरे होने की सुविधा देने वाले अनुरोधों में देरी करना
जब तक उपयोगकर्ता पहले तीन या चार वर्ण टाइप न कर ले, तब तक आप एक स् थान ऑटोकंप्लीट अनुरोध में देरी जैसी रणनीतियां लागू कर सकते हैं, ताकि आपका ऐप्लिकेशन कम अनुरोध करे. उदाहरण के लिए, उपयोगकर्ता के तीसरा वर्ण टाइप करने के बाद, हर वर्ण के लिए ऑटोकंप्लीट की सुविधा देने का अनुरोध करने का मतलब है कि अगर उपयोगकर्ता सात वर्ण टाइप करता है और एक अनुमान के लिए एक अनुमान चुनता है जिसके लिए जियोकोडिंग एपीआई अनुरोध किया जाता है, तो कुल लागत 0.01632 (4 * $0.00283 ऑटोकंप्लीट प्रति अनुरोध + $0.005 जियोकोडिंग) होगी.¹

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

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

यहां बताई गई लागत डॉलर में है. कीमत की पूरी जानकारी के लिए, कृपया Google Maps Platform की बिलिंग पेज पर जाएं.

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

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

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

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

कोटा

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

नीतियां

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

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

परिचय

शुरू करना

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

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

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

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

निर्माण के दौरान विकल्प सेट करना

TypeScript

JavaScript

डेटा फ़ील्ड चुनें

पक्षपात और खोज-क्षेत्र की सीमाएं परिभाषित करें ऑटोकंप्लीट

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

TypeScript

JavaScript

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

TypeScript

JavaScript

TypeScript

JavaScript

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

अनुमानों को किसी खास देश के हिसाब से दिखाना

TypeScript

JavaScript

जगह के टाइप पर पाबंदी लगाना

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

TypeScript

JavaScript

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

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

SearchBox के लिए खोज के दायरे को बदलना

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

TypeScript

JavaScript

प्रोग्राम के हिसाब से, जगह की जानकारी अपने-आप पूरा करने वाली सेवा के सुझावों को प्रोग्राम की मदद से वापस पाना

TypeScript

JavaScript

सीएसएस

एचटीएमएल

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

सेशन के लिए टोकन

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

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

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

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

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

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

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

हां

नहीं

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

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

कोटा

नीतियां