ऑटोकंप्लीट विजेट के नए वर्शन पर माइग्रेट करना

यह माइग्रेशन गाइड उन डेवलपर के लिए है जिन्होंने वर्शन 3.59.8 से पहले, Place Autocomplete Widget (Preview) के साथ इंटिग्रेशन किया है. इस गाइड में, सबसे नए वर्शन का इस्तेमाल करने के लिए किए जाने वाले बदलावों के बारे में बताया गया है.

बदलाव

  • gmp-placeselect इवेंट का नाम बदलकर gmp-select कर दिया गया है.
  • gmp-select इवेंट अब place इंस्टेंस के बजाय placePrediction इंस्टेंस दिखाता है. PlacePrediction.toPlace() सही Place ऑब्जेक्ट दिखाता है.
  • gmp-requesterror इवेंट का नाम बदलकर अब gmp-error कर दिया गया है.

माइग्रेशन के चरण

Place Autocomplete Widget इंटिग्रेशन को नए वर्शन पर माइग्रेट करने के लिए, यह तरीका अपनाएं:

  1. पुष्टि करें कि Cloud Console में, आपके प्रोजेक्ट के लिए Places API (New) चालू हो.
  2. एपीआई कुंजी के लिए, एपीआई से जुड़ी पाबंदियों की सूची में Places API (नया) जोड़ें.
  3. अपने डेवलपमेंट एनवायरमेंट में, ये बदलाव करें और उनकी जांच करें:

इवेंट लिसनर अपडेट करें

नीचे दिए गए स्निपेट में दिखाए गए तरीके से, gmp-placeselect को gmp-select में बदलें:

पहले

autocompleteElement.addEventListener('gmp-placeselect', (event) => {
  console.log(event.place);
});

बाद में

autocompleteElement.addEventListener('gmp-select', (event) => {
  console.log(event.placePrediction.toPlace());
});

componentRestrictions को includedRegionCodes में बदलें

componentRestrictions के इंस्टेंस बदलकर, includedRegionCodes फ़ील्ड का इस्तेमाल करें. इसके लिए, यहां दिए गए स्निपेट देखें.

पहले

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['US']},
  ...
});

बाद में

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['US'],
  ...

types को includedPrimaryTypes में बदलें

types के इंस्टेंस को बदलकर includedPrimaryTypes फ़ील्ड का इस्तेमाल करें. इसके लिए, यहां दिए गए स्निपेट देखें.

पहले

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  types: ['restaurant'],
});

बाद में

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['restaurant'],
});

gmp-requesterror को gmp-error में बदलें

यहां दिए गए स्निपेट में दिखाए गए तरीके से, gmp-requesterror के इंस्टेंस को gmp-error में बदलें:

पहले

autocompleteElement.addEventListener('gmp-requesterror', (event) => {
  console.log('an error occurred');
});

बाद में

autocompleteElement.addEventListener('gmp-error', (event) => {
  console.log('an error occurred');
});