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

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

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

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

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

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

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

Maps JavaScript API लोड करने की सुविधा को अपडेट करना

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

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

Place Details एलिमेंट को लागू करना

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

लागू करने का मौजूदा तरीका

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

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

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

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

इनमें से कोई एक एलिमेंट चुनें:

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

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

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

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

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

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

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

लागू करने का मौजूदा तरीका

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

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

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

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

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

<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 एलिमेंट को पसंद के मुताबिक बनाना

ओरिएंटेशन

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

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

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

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

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

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

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

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

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

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

ओरिएंटेशन

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

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

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

कॉन्टेंट एलिमेंट का इस्तेमाल करके, यह तय करें कि प्लेस सर्च एलिमेंट में कौनसा कॉन्टेंट रेंडर किया जाए. <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 एलिमेंट, Place Details एलिमेंट, और किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी एलिमेंट के लिए अलग-अलग दस्तावेज़ देखें.

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

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

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

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

Place Search एलिमेंट

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

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

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

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

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

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

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

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