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

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

परिचय

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

शुरू करना

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

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

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

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

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

<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 का संदर्भ देखें: ऑटोकंप्लीटसर्विस क्लास).

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

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

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

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

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

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

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

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

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

किसी मौजूदा डिवाइस पर, खोज करने की जगह बदलने के लिए 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);
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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 इवेंट के लिए एक इवेंट हैंडलर बनाएं और addListener() को कॉल करें हैंडलर जोड़ने के लिए Autocomplete ऑब्जेक्ट पर.
  2. Autocomplete.getPlace() पर कॉल करें Autocomplete ऑब्जेक्ट पर, PlaceResult को वापस पाने के लिए ऑब्जेक्ट है, जिसका उपयोग आप चयनित जगह.

डिफ़ॉल्ट रूप से, जब कोई उपयोगकर्ता किसी जगह को चुनता है, तो ऑटोकंप्लीट की सुविधा उपलब्ध डेटा फ़ील्ड का इस्तेमाल करता है और आपको इसके मुताबिक बिल भेजा जाएगा. 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 इवेंट सक्रिय करती है. आप getPlaces() को SearchBox ऑब्जेक्ट पर कॉल करें कई पूर्वानुमान वाली श्रेणी को फिर से पाएं, जिनमें से हर 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, टेक्स्ट वाला एक आइडेंटिफ़ायर है, जो कोई जगह. स्थान के बारे में जानकारी पुनर्प्राप्त करने के लिए, इस पहचानकर्ता को a का placeId फ़ील्ड स्थान विवरण request. जानें कि किसी जगह का रेफ़रंस देते हैं स्थान आईडी के साथ.
  • terms एक कलेक्शन है जिसमें क्वेरी के एलिमेंट शामिल होते हैं. इसके लिए कोई जगह है, तो हर एलिमेंट आम तौर पर पते का एक हिस्सा बनेगा.
    • offset वर्ण ऑफ़सेट है, जिसे इससे मापा जाता है विवरण स्ट्रिंग की शुरुआत, जिससे मिलान की गई सबस्ट्रिंग दिखाई देता है.
    • value मिलता-जुलता शब्द है.

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

TypeScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

JavaScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
  const displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सीएसएस

एचटीएमएल

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

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

उदाहरण देखें

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

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

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

हर नए सेशन के लिए, एक यूनीक सेशन टोकन पास करना न भूलें. से ज़्यादा समय के लिए एक ही टोकन का इस्तेमाल करना एक ऑटोकंप्लीट सेशन, ऑटोकंप्लीट की सुविधा वाले उन सेशन को अमान्य कर देगा. साथ ही, ऑटोकंप्लीट की सुविधा देने वाले सभी अनुरोध अमान्य हो जाएंगे अमान्य सेशन में आपसे अलग-अलग शुल्क लिया जाएगा. इसके लिए, ऑटोकंप्लीट सुविधा का इस्तेमाल करें हर अनुरोध 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 में.

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

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

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

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

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

इस सेक्शन में, उन सबसे सही तरीकों के बारे में बताया गया है जिनकी मदद से, ऑटोकंप्लीट सेवा शामिल करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

हां

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

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

नहीं

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

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

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

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

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

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

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


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

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

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

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

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

कोटा

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

नीतियां

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