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

Places API या Place Class के मौजूदा सेटअप को Places यूआई किट के कॉम्पोनेंट पर माइग्रेट करने का तरीका जानें.

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

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

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

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

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

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

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

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

Place Details Element लागू करना

The Place Details Element और Place Details Compact Element , एचटीएमएल एलिमेंट हैं. इनकी मदद से, किसी जगह की जानकारी दिखाई जाती है.

मौजूदा सेटअप

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

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

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

उस एचटीएमएल कंटेनर की पहचान करें जहां जगह की जानकारी दिखाई जाती है. अपने कस्टम एचटीएमएल एलिमेंट (नाम, पता, फ़ोटो वगैरह के लिए डिव, स्पैन) की जगह, Place Details Element का एचटीएमएल इस्तेमाल करें.

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

  • Place Details Compact Element
  • Place Details Element

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

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

<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() का इस्तेमाल करना या वेब सेवा कॉल करना.
  • खास डेटा का अनुरोध करने के लिए, फ़ील्ड की कोई अरे (जेएस एपीआई के लिए) या FieldMask (वेब सेवा के लिए) तय करना.
  • कॉलबैक रिज़ॉल्यूशन में, एचटीएमएल एलिमेंट को मैन्युअल तरीके से चुनना और मिले हुए डेटा से उन्हें पॉप्युलेट करना.

यहां एक उदाहरण दिया गया है कि Place Details को कैसे लागू किया जा सकता है:

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);
}
नया लॉजिक

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

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

यहां एक उदाहरण दिया गया है कि JavaScript लॉजिक में, Place Details यूआई किट को कैसे लागू किया जा सकता है. Place Details Element का रेफ़रंस पाएं. अगर यह मौजूद है, तो Place Details Place Request एलिमेंट का रेफ़रंस पाएं और जगह के आईडी का इस्तेमाल करके, जगह की प्रॉपर्टी सेट करें. ऊपर दिए गए एचटीएमएल कोड के उदाहरण में, 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);

Place Search Element, एचटीएमएल एलिमेंट है. इसकी मदद से, जगह की खोज के नतीजे सूची में दिखाए जाते हैं.

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

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

उस एचटीएमएल कंटेनर की पहचान करें जहां जगह की सूची दिखाई जाती है. अपने कस्टम एचटीएमएल एलिमेंट (नाम, पता वगैरह के लिए डिव, स्पैन) की जगह, 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 देने के बाद खोज शुरू होती है.

Basic Place Autocomplete Element लागू करना

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

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

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

मौजूदा सेटअप

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

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

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

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

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

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

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

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

JavaScript लॉजिक में बदलाव करना

आपके JavaScript लॉजिक में, input एचटीएमएल एलिमेंट से अटैच Autocomplete विजेट बनाना शामिल हो सकता है. इसके बाद, यह विजेट 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 लॉजिक, Basic Place Autocomplete Element का रेफ़रंस पाएगा और 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 का इंस्टेंस शुरू करने के लिए, जगह के आईडी का इस्तेमाल किया जा सकता है. इससे चुनी गई जगह की जानकारी दिखाई जा सकती है.

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

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

ओरिएंटेशन

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

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

दिखाने के लिए फ़ील्ड चुनना

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

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

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

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

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

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

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

ओरिएंटेशन

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

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

दिखाने के लिए फ़ील्ड चुनना

Place Search 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>

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

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

Autocomplete Element के लुक ऐंड फ़ील को पसंद के मुताबिक बनाने के लिए, कस्टम सीएसएस प्रॉपर्टी उपलब्ध हैं. उदाहरण के लिए, बैकग्राउंड का रंग हल्का बैंगनी करने के लिए, एलिमेंट पर background-color प्रॉपर्टी सेट करें.

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

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

इवेंट और डेटा को हैंडल करना

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

इवेंट के इनपुट के लिए रीऐक्ट करना

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

चुने जाने का इवेंट

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

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

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

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

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

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

  • Place Search Element और Place Details Element के लिए, यह जानकारी वापस पाई जा सकती है:
    • जगह का आईडी
    • जगह की जानकारी (अक्षांश और देशांतर)
    • व्यूपोर्ट
  • Basic Place Autocomplete Element के लिए, यह जानकारी वापस पाई जा सकती है:
    • जगह का आईडी

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

ज़्यादा जानकारी वाले उदाहरणों के लिए, Place Search Element, Place Details Element, और Basic Place Autocomplete Element के लिए अलग-अलग दस्तावेज़ देखें.

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

Places यूआई किट के एलिमेंट को इंटिग्रेट करने के बाद, जांच करना ज़रूरी है. इससे, एलिमेंट को आसानी से इस्तेमाल किया जा सकेगा और उपयोगकर्ता को बेहतर अनुभव मिलेगा. जांच में, इन मुख्य पहलुओं को शामिल किया जाना चाहिए. साथ ही, लागू किए गए सभी एलिमेंट की जांच की जानी चाहिए: Place Details, Place Search, और Basic Place Autocomplete एलिमेंट.

Place Details Element

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

Place Search Element

अगर Place Search Element लागू किया गया है, तो अलग-अलग खोज के सिनेरियो में, उसके रेंडरिंग और व्यवहार की पुष्टि करें.

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

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

Basic Place Autocomplete Element

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

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

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

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