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

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

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

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

YouTube TV का इस्तेमाल शुरू करना

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

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

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

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

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

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

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

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

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

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

  • Autocomplete आपके वेब पेज में टेक्स्ट इनपुट फ़ील्ड जोड़ता है और वर्णों के एंट्री के लिए उस फ़ील्ड को मॉनिटर करता है. जैसे ही उपयोगकर्ता टेक्स्ट डालता है, विकल्प अपने-आप दिखने वाले सुझावों को ड्रॉपडाउन से जगहों की सूची के तौर पर दिखाता है. जब उपयोगकर्ता सूची से कोई जगह चुनता है, तो जगह की जानकारी अपने-आप पूरा होने वाले ऑब्जेक्ट में वापस भेज दी जाती है और आपका ऐप्लिकेशन उसे हासिल कर सकता है. इसके बारे में ज़्यादा जानकारी नीचे देखें.
    अपने-आप पूरा होने वाला टेक्स्ट फ़ील्ड और उपयोगकर्ता के खोज क्वेरी डालने पर, मिलने वाली जगह के
    अनुमानों की चुनी हुई सूची.
    पहली इमेज: टेक्स्ट फ़ील्ड और चुनी गई सूची का अपने-आप पूरा होना
    पते का पूरा फ़ॉर्म भरा हुआ होना चाहिए.
    इमेज 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 देशों के कोड की सूची या आईएसओ ऑनलाइन ब्राउज़िंग प्लैटफ़ॉर्म पर जाएं.

    • placeIdOnly का इस्तेमाल, Autocomplete विजेट को सिर्फ़ प्लेस आईडी पाने के निर्देश देने के लिए किया जा सकता है. Autocomplete ऑब्जेक्ट पर getPlace() को कॉल करने पर, उपलब्ध PlaceResult में सिर्फ़ place id, types, और name प्रॉपर्टी सेट होंगी. आप लौटाए गए जगह के आईडी का इस्तेमाल, जगहों, जियोकोडिंग, दिशा-निर्देश या डिस्टेंस मैट्रिक्स सेवाओं को कॉल करने के लिए कर सकते हैं.

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

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

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

विजेट बनाने की सीमाएं सेट करने के लिए, Autocomplete कंस्ट्रक्टर AutocompleteOptions पैरामीटर को स्वीकार करता है. इस उदाहरण में, bounds, componentRestrictions, और types के लिए विकल्प सेट किए गए हैं, ताकि establishment टाइप की जगहों का अनुरोध किया जा सके. साथ ही, जगहों को तय किए गए भौगोलिक इलाके के हिसाब से प्राथमिकता दी जा रही है. साथ ही, अनुमान को सिर्फ़ अमेरिका की जगहों के हिसाब से सीमित किया गया है. fields विकल्प को सेट करने पर, यह तय होता है कि उपयोगकर्ता की चुनी गई जगह के बारे में कौनसी जानकारी दिखानी है.

किसी मौजूदा विजेट की वैल्यू बदलने के लिए, setOptions() को कॉल करें.

TypeScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};

const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

डेटा फ़ील्ड के बारे में बताएं

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

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

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

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

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

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

मौजूदा ऑटोकंप्लीट की सीमाएं बदलना

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

TypeScript

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

autocomplete.setBounds(newBounds);

JavaScript

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

autocomplete.setBounds(newBounds);
सीमाओं को मैप के व्यूपोर्ट पर सेट करें

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

TypeScript

autocomplete.bindTo("bounds", map);

JavaScript

autocomplete.bindTo("bounds", map);

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

TypeScript

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

JavaScript

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

उदाहरण देखें

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

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

autocomplete.setOptions({ strictBounds: true });
किसी खास देश के लिए सुझावों पर पाबंदी लगाना

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

TypeScript

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

JavaScript

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

उदाहरण देखें

पाबंदी वाली जगहों के टाइप

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

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

  • एक कलेक्शन, जिसमें टेबल 1 या जगह के टाइप से टेबल 2 में दी गई ज़्यादा से ज़्यादा पांच वैल्यू होती हैं. उदाहरण के लिए:

    types: ['hospital', 'pharmacy', 'bakery', 'country']

    या:

    autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
  • टेबल 3 में जगहों के टाइप से जुड़ा कोई भी एक फ़िल्टर. सिर्फ़ एक वैल्यू को टेबल 3 से तय किया जा सकता है.

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

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

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

डेमो देखें

जगह की जानकारी ली जा रही है

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

  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;

उदाहरण देखें

प्लेसहोल्डर टेक्स्ट को कस्टमाइज़ करना

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

<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 किंग स्ट्रीट'. टेक्स्ट आधारित खोजों, जैसे कि 'पिज़्ज़ा इन दिल्ली' में, क्वेरी का पूरा टेक्स्ट शामिल होता है. डिफ़ॉल्ट रूप से, pac-item-query का रंग काला होता है. अगर pac-item में कोई दूसरा टेक्स्ट है, तो वह pac-item-query के बाहर है और उसकी स्टाइल pac-item से इनहेरिट की गई है. इसका रंग डिफ़ॉल्ट रूप से धूसर होता है. आम तौर पर, अतिरिक्त टेक्स्ट में पता दिया जाता है.
pac-matched दिखाए गए सुझाव का वह हिस्सा जो उपयोगकर्ता के इनपुट से मेल खाता है. डिफ़ॉल्ट रूप से, मेल खाने वाला यह टेक्स्ट, बोल्ड टेक्स्ट में हाइलाइट किया जाता है. ध्यान दें कि मेल खाने वाला टेक्स्ट, pac-item में कहीं भी हो सकता है. यह ज़रूरी नहीं है कि यह pac-item-query का हिस्सा हो. यह कुछ हद तक pac-item-query के साथ-साथ pac-item के बाकी टेक्स्ट में भी हो सकता है.

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

ध्यान दें: यह सैंपल, ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. लाइब्रेरी से जुड़ी मदद और सुझाव या राय पाने के लिए, README देखें.

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

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

अपने-आप पूरा होने की सुविधा के लिए ऑप्टिमाइज़ेशन की सुविधा चालू करें

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

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

  • काम करने वाला यूज़र इंटरफ़ेस डेवलप करने का सबसे तेज़ तरीका 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 के बिलिंग पेज पर जाएं.

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

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

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

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

कोटा

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

नीतियां

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