Places API के मौजूदा उपयोगकर्ताओं के लिए, Places UI Kit का इस्तेमाल करना

लक्ष्य: Places API या Place Class को लागू करने के बजाय, Places UI Kit को लागू करें.

यह गाइड किसके लिए है

ऐसे डेवलपर जो:

  • Places API (नया या लेगसी) के एंडपॉइंट पर एचटीटीपी अनुरोध करना.
  • Maps JavaScript API में Place क्लास का इस्तेमाल करना.
  • एपीआई से मिले जवाब को मैनेज करना, ताकि वेब ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में जगह की जानकारी रेंडर की जा सके.

ज़रूरी शर्तें

अपने Google Cloud प्रोजेक्ट पर Places UI Kit चालू करें. आपके पास अपनी मौजूदा एपीआई पासकोड का इस्तेमाल जारी रखने या जगहों की जानकारी देने वाली यूआई किट के लिए नया एपीआई पासकोड जनरेट करने का विकल्प होता है. ज़्यादा जानकारी के लिए, एपीआई पासकोड का इस्तेमाल करना लेख पढ़ें. इसमें पासकोड को सीमित करने के बारे में भी बताया गया है.

Maps JavaScript API को लोड करने की प्रोसेस अपडेट करना

Places UI Kit के लिए, Maps JavaScript API को लोड करने के डाइनैमिक लाइब्रेरी इंपोर्ट तरीके का इस्तेमाल करना ज़रूरी है. अगर डायरेक्ट स्क्रिप्ट लोडिंग टैग का इस्तेमाल किया जा रहा है, तो इसे अपडेट करना ज़रूरी है.

Maps JavaScript API के लिए स्क्रिप्ट लोड करने की सुविधा को अपडेट करने के बाद, Places UI Kit का इस्तेमाल करने के लिए, ज़रूरी लाइब्रेरी इंपोर्ट करें.

Place Details Element को लागू करना

जगह की जानकारी देने वाला एलिमेंट और जगह की जानकारी देने वाला कॉम्पैक्ट एलिमेंट, एचटीएमएल एलिमेंट होते हैं. ये किसी जगह की जानकारी रेंडर करते हैं.

मौजूदा तरीका

  • एचटीटीपी अनुरोध का इस्तेमाल करके, जगह की जानकारी के लिए कॉल किया जाता है. इसके अलावा, JavaScript API की जगह की क्लास का इस्तेमाल किया जा सकता है.
  • एपीआई से मिले जवाब को पार्स किया जाता है. इसके बाद, एचटीएमएल और सीएसएस का इस्तेमाल करके जगह की जानकारी दिखाई जाती है.

जगह के बारे में ज़्यादा जानकारी देने वाले एलिमेंट पर माइग्रेट करना

एचटीएमएल स्ट्रक्चर में बदलाव करना

उस एचटीएमएल कंटेनर की पहचान करें जहां जगह की जानकारी रेंडर की जाती है. अपने कस्टम एचटीएमएल एलिमेंट (नाम, पता, फ़ोटो वगैरह के लिए div, span) को जगह की जानकारी वाले एलिमेंट के एचटीएमएल से बदलें.

यहां चुनने के लिए दो एलिमेंट हैं:

  • जगह की जानकारी देने वाला कॉम्पैक्ट एलिमेंट
  • जगह की जानकारी देने वाला एलिमेंट

इनमें से किसका इस्तेमाल करना है, इस बारे में ज़्यादा जानने के लिए जगह की जानकारी देने वाला एलिमेंट देखें.

आपका मौजूदा एचटीएमएल कुछ ऐसा दिख सकता है.

<div id="my-place-details-container">
    <h2 id="place-name"></h2>
    <p id="place-address"></p>
    <img id="place-photo" src="" alt="Place photo">
    <!-- ... more custom elements -->
</div>

यहां नए एचटीएमएल का उदाहरण दिया गया है. इसमें साफ़ तौर पर बताया गया है कि कौनसा कॉन्टेंट दिखाना है:

<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
    <gmp-place-details-place-request></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
    </gmp-place-content-config>
</gmp-place-details-compact>

JavaScript लॉजिक को अडैप्ट करना

मौजूदा लॉजिक

आपके मौजूदा लॉजिक में ये शामिल हो सकते हैं:

  • किसी जगह का आईडी वापस पाना.
  • PlacesService().getDetails() का इस्तेमाल करके या वेब सेवा कॉल करके.
  • किसी खास डेटा का अनुरोध करने के लिए, फ़ील्ड ऐरे (JS API के लिए) या FieldMask (वेब सेवा के लिए) तय करना.
  • कॉलबैक रिज़ॉल्यूशन में, अपने एचटीएमएल एलिमेंट को मैन्युअल तरीके से चुनना और उन्हें मिले हुए डेटा से पॉप्युलेट करना.

यहां एक उदाहरण दिया गया है कि आपने जगह की जानकारी को कैसे लागू किया होगा:

async function getPlaceDetails(placeId) {
    const { Place } = await google.maps.importLibrary('places');
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: placeId
    });
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}
नया लॉजिक

आपके नए लॉजिक में ये शामिल होंगे:

  • जगह का आईडी या जगह का ऑब्जेक्ट वापस पाएं.
  • <gmp-place-details-place-request> एलिमेंट का रेफ़रंस पाएं.
  • <gmp-place-details-place-request> एलिमेंट पर मौजूद जगह की प्रॉपर्टी में, जगह का आईडी या जगह का ऑब्जेक्ट पास करें.

यहां दिए गए उदाहरण में बताया गया है कि JavaScript लॉजिक में, जगहों की जानकारी देने वाली यूआई किट को कैसे लागू किया जा सकता है. जगह की जानकारी देने वाले एलिमेंट का रेफ़रंस पाएं. अगर यह मौजूद है, तो Place Details Place Request एलिमेंट का रेफ़रंस पाएं. इसके बाद, Place ID का इस्तेमाल करके जगह की प्रॉपर्टी सेट करें. ऊपर दिए गए एचटीएमएल कोड के उदाहरण में, Place Details Element की स्टाइल को display: none पर सेट किया गया है. इसे display: block पर अपडेट किया गया है.

function displayPlaceDetailsWithUIKit(placeId) {
  const placeDetailsElement = document.querySelector('gmp-place-details-compact');
  if (placeDetailsElement) {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    // Configure the element with the Place ID
    placeDetailsRequest.place = placeId
    placeDetailsElement.style.display = 'block';
    console.log("PlaceDetailsElement configured for place:", placeId);
  } else {
    console.error("PlaceDetailsElement not found in the DOM.");
  }
}

// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);

जगह की खोज करने वाला एलिमेंट एक एचटीएमएल एलिमेंट है. यह किसी जगह की खोज के नतीजों को सूची में दिखाता है.

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

एचटीएमएल स्ट्रक्चर में बदलाव करना

उस एचटीएमएल कंटेनर की पहचान करें जहां आपको जगहों की सूची रेंडर करनी है. अपने कस्टम एचटीएमएल एलिमेंट (नाम, पता वगैरह के लिए div, span) को Place Search Element एचटीएमएल एलिमेंट से बदलें.

आपका मौजूदा एचटीएमएल कुछ ऐसा दिख सकता है:

<div id="search-results-area">
    <h3>Nearby Places:</h3>
    <ul id="manual-places-list">
        <!-- JavaScript would dynamically insert list items here -->
        <!-- Example of what JS might generate:
    <li class="place-entry" data-place-id="SOME_PLACE_ID_1">
      <img class="place-icon" src="icon_url_1.png" alt="Icon">
      <span class="place-name">Place Name One</span> -
      <span class="place-vicinity">123 Main St</span>
    </li>
    <li class="place-entry" data-place-id="SOME_PLACE_ID_2">
      <img class="place-icon" src="icon_url_2.png" alt="Icon">
      <span class="place-name">Place Name Two</span> -
      <span class="place-vicinity">456 Oak Ave</span>
    </li>
    -->
        <li class="loading-message">Loading places...</li>
    </ul>
</div>

Place Search Element को <gmp-place-search> कॉम्पोनेंट का इस्तेमाल करके लागू किया जाता है. खोज का टाइप कॉन्फ़िगर करने के लिए, इनमें से किसी एक स्लॉट किए गए कॉन्फ़िगरेशन कॉम्पोनेंट को शामिल करें:

  • <gmp-place-text-search-request> पर टैप करें.
  • <gmp-place-nearby-search-request> पर क्लिक करें.

नतीजे दिखाने का तरीका तय करने के लिए, <gmp-place-all-content> शॉर्टकट का इस्तेमाल किया जा सकता है. इसके अलावा, प्रज़ेंटेशन के अलग-अलग कॉम्पोनेंट का अपना सेट भी दिया जा सकता है. selectable (सूची वाले आइटम पर क्लिक करने की अनुमति देने के लिए) और orientation (हॉरिज़ॉन्टल या वर्टिकल लेआउट के लिए) जैसे मुख्य एट्रिब्यूट, सीधे पैरंट कॉम्पोनेंट पर सेट किए जा सकते हैं.

आस-पास की जगहों की जानकारी पाने की सुविधा का उदाहरण
<gmp-place-search orientation="horizontal" selectable>
    <gmp-place-all-content> </gmp-place-all-content>
    <gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>
टेक्स्ट सर्च का उदाहरण
<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-all-content> </gmp-place-all-content>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

JavaScript लॉजिक को अडैप्ट करना

अपनी JavaScript में, document.querySelector() का इस्तेमाल करके, सर्च कंट्रोलर कॉम्पोनेंट का रेफ़रंस पाएं. आपके सेटअप के हिसाब से, यह <gmp-place-text-search-request> या <gmp-place-nearby-search-request> एलिमेंट होगा.

इसके बाद, इस कंट्रोलर पर प्रॉपर्टी सेट करें, ताकि आपकी खोज को तय किया जा सके. ज़रूरी प्रॉपर्टी, इस बात पर निर्भर करती हैं कि किस तरह की खोज की जा रही है.

टेक्स्ट खोज (<gmp-place-text-search-request>) के लिए, मुख्य प्रॉपर्टी textQuery है:

const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';

आस-पास की जगहों की जानकारी (<gmp-place-nearby-search-request>) के लिए, आपको locationRestriction का इस्तेमाल करके, खोज के लिए इलाका तय करना होगा. इसके बाद, includedTypes का इस्तेमाल करके, उस इलाके में मौजूद खास तरह की जगहों को फ़िल्टर किया जा सकता है:

const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
    center: { lat: 51.5190, lng: -0.1347 },
    radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];

कंट्रोलर की ज़रूरी प्रॉपर्टी सेट होते ही, पैरंट <gmp-place-search> कॉम्पोनेंट अपने-आप नई खोज शुरू कर देता है.

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

जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा देने वाले बुनियादी एलिमेंट को लागू करना

जिन डेवलपर को Place Search Element के यूज़र इंटरफ़ेस (यूआई) के बिना खोज की सुविधा चाहिए उनके लिए, Basic Place Autocomplete Element उपलब्ध है.

यह एलिमेंट, खोज के लिए इनपुट फ़ील्ड बनाने के लिए सबसे सही है. इससे आपको यह कंट्रोल करने में मदद मिलती है कि आपके कस्टम यूज़र इंटरफ़ेस में नतीजे कैसे दिखें. Autocomplete Element का काम सिर्फ़ इतना है कि वह उपयोगकर्ता के टाइप करते समय जगह के सुझाव दे और प्रोग्राम के हिसाब से चुनी गई जगह के लिए Place ID दिखाए.

यह खुद कोई जानकारी नहीं दिखाता है. साथ ही, प्रोग्राम के हिसाब से ऐक्सेस की जा सकने वाली कोई अन्य जानकारी भी नहीं देता है.

मौजूदा तरीका

आपके मौजूदा लॉजिक में ये शामिल हो सकते हैं:

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

Place Autocomplete Element पर माइग्रेट करना

एचटीएमएल स्ट्रक्चर में बदलाव करना

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

<input id="pac-input" type="text" placeholder="Search for a location" />

यहां वेब कॉम्पोनेंट का इस्तेमाल करके, अपने पेज पर Basic Place Autocomplete एलिमेंट को शुरू करने के लिए, नए एचटीएमएल का उदाहरण दिया गया है.

<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>

JavaScript लॉजिक को अडैप्ट करना

आपके JavaScript लॉजिक में, input एचटीएमएल एलिमेंट से जुड़ा ऑटोकंप्लीट विजेट बनाने की सुविधा शामिल होती है. इसके बाद, यह विजेट place_changed इवेंट के लिए सुनता है और मिले हुए डेटा के साथ कोई कार्रवाई ट्रिगर करता है.

हटाने के लिए मौजूदा JavaScript का उदाहरण:

// Get the input element
const input = document.getElementById("pac-input");

// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
  fields: ["place_id", "geometry", "name"]
});

// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
  // Your logic to get and display place information
  console.log(place.place_id);
});

आपके नए JavaScript लॉजिक को, जगह की जानकारी अपने-आप भरने की सुविधा देने वाले बेसिक एलिमेंट का रेफ़रंस मिलेगा. साथ ही, यह gmp-select इवेंट के लिए सुनेगा:

const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');

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

'अपने-आप भरने की सुविधा' वाले ड्रॉप-डाउन में किसी जगह को चुनने पर, gmp-select इवेंट ट्रिगर होगा. चुनी गई जगह का प्लेस आईडी, event ऑब्जेक्ट से वापस पाया जा सकता है. इसके बाद, चुने गए प्लेस की जानकारी दिखाने के लिए, प्लेस आईडी का इस्तेमाल Place Details Element के इंस्टेंस को शुरू करने के लिए किया जा सकता है.

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

जगह की ज़्यादा जानकारी देने वाले एलिमेंट को पसंद के मुताबिक बनाना

ओरिएंटेशन

जगह की जानकारी देने वाले एलिमेंट को हॉरिज़ॉन्टल और वर्टिकल, दोनों ओरिएंटेशन में रेंडर किया जा सकता है. वर्टिकल और हॉरिज़ॉन्टल में से किसी एक को चुनने के लिए, gmp-place-details-compact पर orientation एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए:

<gmp-place-details-compact orientation="vertical">

रेंडर करने के लिए फ़ील्ड चुनें

PlaceDetails एलिमेंट में रेंडर किए जाने वाले कॉन्टेंट के बारे में बताने के लिए, कॉन्टेंट एलिमेंट का इस्तेमाल करें. उदाहरण के लिए, कॉन्टेंट एलिमेंट <gmp-place-type> को बाहर रखने से, जगह की जानकारी देने वाला एलिमेंट, चुनी गई जगह की कैटगरी को रेंडर नहीं करेगा. कॉन्टेंट एलिमेंट की पूरी सूची देखने के लिए, PlaceContentConfigElement रेफ़रंस दस्तावेज़ देखें.

जगह की जानकारी वाले एलिमेंट में फ़ील्ड जोड़ने या हटाने से, पेज पर एलिमेंट को रेंडर करने की लागत में कोई बदलाव नहीं होता.

सीएसएस स्टाइल सेट करना

कस्टम सीएसएस प्रॉपर्टी का इस्तेमाल करके, एलिमेंट के रंग और फ़ॉन्ट कॉन्फ़िगर किए जा सकते हैं. उदाहरण के लिए, एलिमेंट के बैकग्राउंड को हरा रंग पर सेट करने के लिए, सीएसएस की यह प्रॉपर्टी सेट करें:

gmp-place-details-compact {
  --gmp-mat-color-surface: green;
}

ज़्यादा जानकारी के लिए, PlaceDetailsCompactElement के रेफ़रंस दस्तावेज़ देखें.

Place Search Element को पसंद के मुताबिक बनाना

ओरिएंटेशन

जगह की जानकारी खोजने वाले एलिमेंट को हॉरिज़ॉन्टल और वर्टिकल, दोनों ओरिएंटेशन में रेंडर किया जा सकता है. वर्टिकल और हॉरिज़ॉन्टल में से किसी एक को चुनने के लिए, <gmp-place-search> पर orientation एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए:

<gmp-place-search orientation="horizontal" selectable>

रेंडर करने के लिए फ़ील्ड चुनें

कॉन्टेंट एलिमेंट का इस्तेमाल करके, उस कॉन्टेंट के बारे में बताएं जिसे PlaceSearch Element में रेंडर करना है. <gmp-place-all-content> एलिमेंट का इस्तेमाल करके, पूरा कॉन्टेंट दिखाया जा सकता है. इसके अलावा, रेंडर किए गए कॉन्टेंट को कॉन्फ़िगर करने के लिए, एचटीएमएल टैग के किसी विकल्प का इस्तेमाल किया जा सकता है.

<gmp-place-content-config> में <gmp-place-address> को शामिल करने से, सिर्फ़ हर जगह का पता दिखेगा. उदाहरण के लिए:

<gmp-place-search orientation="horizontal" selectable>
  <gmp-place-content-config>
    <gmp-place-address></gmp-place-address>
  </gmp-place-content-config>
  <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा के एलिमेंट को बुनियादी तौर पर पसंद के मुताबिक बनाना

सीएसएस स्टाइल सेट करना

ऑटोकंप्लीट एलिमेंट के लुक और फ़ील को कस्टमाइज़ करने के लिए, कस्टम सीएसएस प्रॉपर्टी उपलब्ध हैं. उदाहरण के लिए, बैकग्राउंड के रंग को हल्का बैंगनी रंग पर सेट करने के लिए, आपको एलिमेंट पर background-color प्रॉपर्टी सेट करनी होगी.

gmp-basic-place-autocomplete {
  background-color: #d993e6;
}

ज़्यादा जानकारी के लिए, BasicPlaceAutocompleteElement रेफ़रंस दस्तावेज़ देखें.

इवेंट और डेटा मैनेज करना

Places UI Kit के एलिमेंट, इंटरैक्टिव कॉम्पोनेंट होते हैं. इनकी मदद से, इवेंट के बारे में सुना जा सकता है और प्रोग्राम के हिसाब से डेटा वापस पाया जा सकता है.

इवेंट सुनना

उपयोगकर्ता के इंटरैक्शन या एलिमेंट की स्थिति के आधार पर कार्रवाइयां ट्रिगर करने के लिए, एलिमेंट में इवेंट लिसनर जोड़े जा सकते हैं.

चुने गए इवेंट

  • gmp-select: यह इवेंट तब ट्रिगर होता है, जब कोई उपयोगकर्ता कोई विकल्प चुनता है.
    • जगह की खोज करने वाले एलिमेंट पर, यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता नतीजों की सूची में किसी जगह पर क्लिक करता है.
    • बेसिक प्लेस ऑटोकंप्लीट एलिमेंट पर, यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता ड्रॉप-डाउन सूची में किसी सुझाव पर क्लिक करता है.

सामान्य इवेंट

Place Search, Place Details, और Basic Place Autocomplete एलिमेंट, इन इवेंट के साथ काम करते हैं:

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

प्रोग्राम के हिसाब से, एलिमेंट का डेटा ऐक्सेस करना

उपयोगकर्ता के इंटरैक्ट करने या लोड होने के बाद, प्रोग्राम के ज़रिए एलिमेंट से खास डेटा वापस पाया जा सकता है.

  • जगह की खोज करने वाले एलिमेंट और जगह के बारे में ज़्यादा जानकारी देने वाले एलिमेंट के लिए, यह जानकारी वापस पाई जा सकती है:
    • जगह का आईडी
    • जगह की जानकारी (अक्षांश और देशांतर)
    • व्यूपोर्ट
  • बेसिक प्लेस ऑटोकंप्लीट एलिमेंट के लिए, यह जानकारी वापस पाई जा सकती है:
    • जगह का आईडी

इन एलिमेंट में मौजूद अन्य डेटा को प्रोग्राम के ज़रिए ऐक्सेस नहीं किया जा सकता.

ज़्यादा जानकारी वाले उदाहरणों के लिए, जगह की खोज करने वाला एलिमेंट, जगह की जानकारी देने वाला एलिमेंट, और जगह की जानकारी अपने-आप भरने वाला बेसिक एलिमेंट के लिए अलग-अलग दस्तावेज़ देखें.

जांच करना और बेहतर बनाना

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

जगह की जानकारी देने वाला एलिमेंट

जगह की जानकारी देने वाले एलिमेंट के लिए, सबसे पहले यह पुष्टि करें कि अलग-अलग जगहों की जानकारी सही तरीके से दिख रही है. <gmp-place-details-place-request> एलिमेंट की .place प्रॉपर्टी को अलग-अलग जगह के आईडी पास करके टेस्ट करें. अलग-अलग तरह के कारोबारों (ज़्यादा जानकारी वाले कारोबार, दिलचस्पी की जगहें, बुनियादी पते) और अलग-अलग इलाकों या भाषाओं में मौजूद जगहों के लिए आईडी का इस्तेमाल करें. फ़ॉर्मैटिंग, लेआउट, और कॉन्टेंट की मौजूदगी पर ध्यान दें.

जगह के हिसाब से खोज करने की सुविधा देने वाला एलिमेंट

अगर आपने जगह के हिसाब से खोज करने की सुविधा लागू की है, तो अलग-अलग खोज के उदाहरणों में यह पुष्टि करें कि वह सही तरीके से काम कर रही है या नहीं.

  • टेक्स्ट खोज के लिए, textQuery एलिमेंट पर textQuery प्रॉपर्टी को अलग-अलग इनपुट के साथ सेट करके देखें. जैसे, ब्रॉड क्वेरी, खास पते, और लोकेशन के हिसाब से क्वेरी.<gmp-place-text-search-request>
  • आस-पास की जगहों के लिए खोज की सुविधा को टेस्ट करने के लिए, <gmp-place-nearby-search-request> एलिमेंट पर locationRestriction और includedTypes प्रॉपर्टी सेट करें. जगह के अलग-अलग साइज़ और टाइप फ़िल्टर का इस्तेमाल करें.

पुष्टि करें कि सूची में काम के नतीजे दिख रहे हों और चुने जाने पर gmp-select इवेंट सही तरीके से ट्रिगर हो रहा हो.

जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा देने वाला बुनियादी एलिमेंट

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

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

गड़बड़ी ठीक करना

सभी कॉम्पोनेंट में, गड़बड़ी ठीक करने की सुविधा की अच्छी तरह से जांच करना ज़रूरी है. Place Details Element को अमान्य या मौजूद नहीं प्लेस आईडी पास करने या Place Search Element के लिए अमान्य खोज पैरामीटर इस्तेमाल करने की प्रोसेस को सिम्युलेट करें. नेटवर्क की समस्याओं का सिम्युलेट करके या अमान्य एपीआई कुंजी का इस्तेमाल करके, gmp-requesterror इवेंट को ट्रिगर करें. इससे यह पक्का किया जा सकेगा कि आपका ऐप्लिकेशन इसे सही तरीके से हैंडल करता है. उपयोगकर्ताओं के लिए आसान गड़बड़ी के मैसेज और लॉगिंग लागू करें, ताकि यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी या भ्रम की स्थिति न हो.