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

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

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

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

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

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

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

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

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

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

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

Place Details एलिमेंट और Place Details Compact एलिमेंट, एचटीएमएल एलिमेंट होते हैं. ये किसी जगह की जानकारी रेंडर करते हैं.

मौजूदा तरीका

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

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

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

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

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

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

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

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

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

यहां एक उदाहरण दिया गया है कि 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);
}
नया लॉजिक

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

  • जगह का आईडी या जगह का ऑब्जेक्ट वापस पाएं.
  • <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);

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

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

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

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

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

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

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

<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 के इंस्टेंस को शुरू करने के लिए किया जा सकता है.

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

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

ओरिएंटेशन

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

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

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

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

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

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

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

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

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

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

ओरिएंटेशन

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

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

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

कॉन्टेंट एलिमेंट का इस्तेमाल करके, यह तय करें कि PlaceSearch एलिमेंट में कौनसा कॉन्टेंट रेंडर किया जाना है. <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 का रेफ़रंस दस्तावेज़ देखें.

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

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

इवेंट सुनना

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

चुना गया इवेंट

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

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

Place Search, Place Details, और किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट, इन इवेंट के साथ काम करते हैं:

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

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

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

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

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

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

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

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

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

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

Place Search एलिमेंट

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

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

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

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

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

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

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

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