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

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

शुरुआती जानकारी

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

रिपोर्ट का इस्तेमाल करना

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

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

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

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

जगहें सेवा में पूरी जानकारी शामिल होती है. यह लाइब्रेरी, 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 class.

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

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

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

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

Autocomplete कंस्ट्रक्टर दो तर्क लेता है:

  • text टाइप का एचटीएमएल input एलिमेंट. यह वह इनपुट फ़ील्ड है जिस पर ऑटोकंप्लीट की सुविधा देने वाली सेवा मॉनिटर करेगी और उसके नतीजों को अटैच करेगी.
  • एक वैकल्पिक AutocompleteOptions तर्क, जिसमें ये प्रॉपर्टी शामिल हो सकती हैं:
    • उपयोगकर्ता के चुने गए PlaceResult के लिए, Place Details रिस्पॉन्स में शामिल होने के लिए, fields डेटा का कलेक्शन. अगर प्रॉपर्टी सेट नहीं की गई है या ['ALL'] को पास किया गया है, तो सभी उपलब्ध फ़ील्ड वापस किए जाते हैं और इसके लिए बिल किया जाता है. हमारा सुझाव है कि प्रोडक्शन डिप्लॉयमेंट के लिए इसका सुझाव न दिया जाए. फ़ील्ड की सूची के लिए, PlaceResult देखें.
    • types का कलेक्शन, जो किसी खास टाइप या किसी खास टाइप के कलेक्शन के बारे में बताता है. इसके बारे में काम करने वाले टाइप की सूची में बताया गया है. अगर कोई टाइप तय नहीं किया गया है, तो सभी टाइप दिखाए जाते हैं.
    • bounds एक google.maps.LatLngBounds ऑब्जेक्ट है, जो जगह के बारे में जानकारी देता है. नतीजे इन सीमाओं में मौजूद जगहों की ओर झुकाव वाले होते हैं, लेकिन इन तक सीमित नहीं होते.
    • strictBounds एक boolean है, जिससे पता चलता है कि एपीआई को सिर्फ़ वे जगहें दिखानी चाहिए जो bounds में बताए गए इलाके के दायरे में आती हों. एपीआई इस इलाके से बाहर के नतीजे नहीं दिखाता, भले ही वे उपयोगकर्ता के इनपुट से मेल खाते हों.
    • कुछ खास ग्रुप के नतीजों को सीमित करने के लिए, componentRestrictions का इस्तेमाल किया जा सकता है. फ़िलहाल, componentRestrictions का इस्तेमाल करके ज़्यादा से ज़्यादा पांच देशों के हिसाब से फ़िल्टर किया जा सकता है. देशों को दो वर्णों के तौर पर पास किया जाना चाहिए. ऐसा ISO 3166-1 Alpha-2 वाले देश कोड के तौर पर होना चाहिए. देश के कोड की सूची के तौर पर, एक से ज़्यादा देशों को पास करना ज़रूरी है.

      ध्यान दें: अगर आपको किसी देश के कोड के साथ उम्मीद से अलग नतीजे मिलते हैं, तो पुष्टि करें कि ऐसे कोड का इस्तेमाल किया जा रहा हो जिसमें देश, अन्य देश/इलाके, और आपकी पसंद के खास इलाके शामिल हों. कोड की जानकारी Wikipedia: ISO 3166 देशों के कोड की सूची या ISO ऑनलाइन ब्राउज़िंग प्लैटफ़ॉर्म पर देखी जा सकती है.

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

  1. place_changed इवेंट के लिए एक इवेंट हैंडलर बनाएं और हैंडलर जोड़ने के लिए Autocomplete ऑब्जेक्ट पर addListener() को कॉल करें.
  2. कोई 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;

उदाहरण देखें

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

ऑटोकंप्लीट की सुविधा देने वाली सेवा के ज़रिए बनाए गए टेक्स्ट फ़ील्ड में, डिफ़ॉल्ट रूप से स्टैंडर्ड प्लेसहोल्डर टेक्स्ट शामिल होता है. टेक्स्ट में बदलाव करने के लिए, placeholder एट्रिब्यूट को input एलिमेंट पर सेट करें:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

ध्यान दें: डिफ़ॉल्ट प्लेसहोल्डर टेक्स्ट का स्थानीय भाषा में अपने-आप अनुवाद होता है. अगर आपने अपनी प्लेसहोल्डर वैल्यू खुद ही तय की है, तो आपको ऐप्लिकेशन में उस वैल्यू को स्थानीय भाषा के मुताबिक बनाना होगा. Google Maps JavaScript API, इस्तेमाल करने के लिए भाषा कैसे चुनता है, इस बारे में जानने के लिए कृपया स्थानीय भाषा के अनुसार दस्तावेज़ पढ़ें.

विजेट को पसंद के मुताबिक दिखाने के लिए, ऑटोकंप्लीट और 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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 विजेट, दोनों पर लागू होती हैं.

ऑटोकंप्लीट की सुविधा और 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 किंग स्ट्रीट'. टेक्स्ट आधारित खोजों, जैसे कि 'pizza in New York' के लिए, इसमें क्वेरी का पूरा टेक्स्ट शामिल होता है. डिफ़ॉल्ट रूप से, 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 के लिए जगहें SDK टूल ऑटोकंप्लीट विजेट, या iOS के लिए Places SDK टूल ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) कंट्रोल का इस्तेमाल करना है
  • जगह की जानकारी के ऑटोकंप्लीट की सुविधा से जुड़े ज़रूरी डेटा फ़ील्ड को शुरू से ही समझना शुरू करें.
  • जगह के हिसाब से चुनने की सुविधा और जगह की जानकारी पर पाबंदी वाले फ़ील्ड ज़रूरी नहीं हैं. हालांकि, ये ऑटोकंप्लीट की परफ़ॉर्मेंस पर काफ़ी असर डाल सकते हैं.
  • गड़बड़ी मैनेज करने की सुविधा का इस्तेमाल करें, ताकि एपीआई से गड़बड़ी मिलने पर, आपका ऐप्लिकेशन ग्रेसफ़ुल तरीके से डिग्रेड हो.
  • पक्का करें कि आपका ऐप्लिकेशन तब हैंडल हो, जब आपने कोई विकल्प न चुना हो और उपयोगकर्ताओं को आगे बढ़ने का तरीका दिया हो.

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

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

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

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

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

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

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

हां, ज़्यादा जानकारी की ज़रूरत है

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

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

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

  1. जगह के अपने-आप पूरे होने की सुविधा के रिस्पॉन्स से मिला जगह का आईडी
  2. ऑटोकंप्लीट की सुविधा के अनुरोध के लिए इस्तेमाल किया गया सेशन टोकन
  3. fields पैरामीटर, जो आपके लिए ज़रूरी जगह के डेटा फ़ील्ड के बारे में बताता है

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

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

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

क्या आपके उपयोगकर्ता औसतन चार या उससे कम अनुरोधों में, 'जगह की जानकारी अपने-आप पूरी होने की सुविधा' के किसी सुझाव को चुनते हैं?

हां

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

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

नहीं

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

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

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

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

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

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

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


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

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

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

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

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

कोटा

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

नीतियां

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