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

परिचय

दुनिया भर के लाखों उपयोगकर्ताओं के लिए, Google Maps एक ऐसा प्लैटफ़ॉर्म है जहां उन्हें जगहों के बारे में सटीक और अप-टू-डेट जानकारी मिलती है. Google के पास दुनिया भर की 25 करोड़ से ज़्यादा जगहों का डेटाबेस है. इसमें उपयोगकर्ता की समीक्षाएं, फ़ोटो, और रेटिंग शामिल हैं. इससे आपको किसी जगह के बारे में ज़्यादा जानकारी मिलती है और आप उस पर भरोसा कर पाते हैं. हम हर दिन मैप में 10 करोड़ अपडेट करते हैं, ताकि आपको नया और सटीक डेटा मिल सके.

जगहों की जानकारी देने वाली यूआई किट, इस्तेमाल के लिए तैयार कॉम्पोनेंट की किफ़ायती लाइब्रेरी है. इसमें Google Maps पर मौजूद जगहों की पूरी जानकारी शामिल है. इसकी मदद से, Google के भरोसेमंद और जाने-पहचाने Places के अनुभव को अपने फ़्रंट-एंड के इस्तेमाल के उदाहरणों में इंटिग्रेट किया जा सकता है. ऐसा अपनी पसंद के मैप पर किया जा सकता है.

घटक

Places UI Kit में, यूज़र इंटरफ़ेस (यूआई) के अलग-अलग कॉम्पोनेंट का एक सेट होता है. इनका इस्तेमाल अलग-अलग या एक साथ किया जा सकता है, ताकि जगहों की जानकारी देने वाली सुविधाओं का बेहतर अनुभव मिल सके.

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

• जगह की खोज: यह कॉम्पोनेंट, आस-पास की जगहों की सूची दिखाता है. यह सूची, कैटगरी के हिसाब से या टेक्स्ट के ज़रिए की गई खोज के हिसाब से दिखती है.

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

Places UI Kit के मुख्य फ़ायदे

• इस्तेमाल में आसानी: Google के भरोसेमंद उपयोगकर्ता अनुभव को अपने ऐप्लिकेशन में शामिल करें. इसके लिए, आपको सिर्फ़ कुछ कोड का इस्तेमाल करना होगा.

• किसी भी मैप पर इस्तेमाल करें: पहली बार, Google से बाहर के किसी मैप पर जगहों का कॉन्टेंट इस्तेमाल किया जा सकता है.

• जान-पहचान वाला यूज़र इंटरफ़ेस (यूआई): कॉम्पोनेंट, ऐसा यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराते हैं जो Google Maps के अनुभव के साथ काम करता है. इससे उपयोगकर्ताओं को इसे इस्तेमाल करने में आसानी होती है.

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

• किफ़ायती: Places API का सीधे तौर पर इस्तेमाल करने की तुलना में, Places UI Kit का इस्तेमाल करना ज़्यादा किफ़ायती हो सकता है.

असल दुनिया में इस्तेमाल के उदाहरण

जगहों की जानकारी देने वाली यूआई किट का इस्तेमाल, कई तरह के ऐप्लिकेशन में किया जा सकता है. इससे उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.

• स्थानीय खोज के लिए उपलब्ध ऐप्लिकेशन: "क्या-क्या करें" ऐप्लिकेशन, आस-पास के रेस्टोरेंट, कैफ़े या घूमने की जगहों की सूची दिखाने के लिए, जगह की खोज करने वाली सुविधा का इस्तेमाल कर सकता है. जब कोई उपयोगकर्ता सूची से किसी जगह को चुनता है, तब उस जगह के बारे में ज़्यादा जानकारी दिखाने के लिए, जगह की जानकारी वाले कॉम्पोनेंट का इस्तेमाल किया जा सकता है.

• यात्रा की योजना बनाने वाले ऐप्लिकेशन: यात्रा से जुड़ा कोई ऐप्लिकेशन, जगह की जानकारी खोजने की सुविधा का इस्तेमाल कर सकता है. इससे उपयोगकर्ताओं को किसी शहर में होटल या दिलचस्पी की जगहें खोजने की सुविधा मिलती है. इसके बाद, 'जगह की जानकारी' कॉम्पोनेंट, हर जगह की फ़ोटो, रेटिंग, और समीक्षाएं दिखा सकता है, ताकि आपको प्लान बनाने में मदद मिल सके.

• रीयल एस्टेट और प्रॉपर्टी खोजने वाले पोर्टल: रीयल एस्टेट ऐप्लिकेशन, जगह के हिसाब से खोज करने की सुविधा का इस्तेमाल कर सकता है. इससे, घर खरीदने या किराये पर लेने में दिलचस्पी रखने वाले लोगों को आस-पास की जगहों की अलग-अलग कैटगरी दिखाई जा सकती हैं. इससे वे घर देखने का समय तय करने से पहले, आस-पास के इलाके की लाइफ़स्टाइल के बारे में जान पाते हैं.

• मैसेजिंग और सोशल मीडिया ऐप्लिकेशन: मैसेजिंग और सोशल मीडिया ऐप्लिकेशन, जगह की खोज करने की सुविधा का इस्तेमाल कर सकते हैं. इससे वे आस-पास की जगहों को खोजकर उनके सुझाव दे सकते हैं. इससे लोगों को मीटिंग की जगह आसानी से मिल जाती है. जगह के बारे में ज़्यादा जानकारी देने वाले कॉम्पोनेंट का इस्तेमाल, जगहों के बारे में ज़्यादा जानकारी दिखाने के लिए किया जा सकता है. ऐसा तब किया जाता है, जब उपयोगकर्ता जगहों की जानकारी शेयर करते हैं. Google Maps में पहले से मौजूद बटन का इस्तेमाल करके, उपयोगकर्ता Google Maps पर आसानी से और सटीक तरीके से अन्य जगहों और यात्रा की जानकारी एक्सप्लोर कर सकते हैं.

कस्टमाइज़ेशन

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

कस्टम सीएसएस प्रॉपर्टी का इस्तेमाल करके, कॉम्पोनेंट के लुक और फ़ील को अपने ऐप्लिकेशन के डिज़ाइन के हिसाब से बनाया जा सकता है. उदाहरण के लिए, जगह की जानकारी वाले कॉम्पोनेंट के लिए सीएसएस प्रॉपर्टी. आपके पास रंग, फ़ॉन्ट, और अन्य विज़ुअल एलिमेंट को पसंद के मुताबिक बनाने का विकल्प होता है. विज़ुअल में बदलाव करते समय, एट्रिब्यूशन से जुड़ी ज़रूरी शर्तों का पालन करना ज़रूरी है. उदाहरण के लिए, --gmp-mat-color-primary सीएसएस प्रॉपर्टी का इस्तेमाल करके, लिंक और समीक्षाओं की संख्या के लिए इस्तेमाल किया गया प्राइमरी कलर बदला जा सकता है.

gmp-place-content-config एलिमेंट का इस्तेमाल करके, किसी जगह के लिए दिखाए जाने वाले कॉन्टेंट को कंट्रोल किया जा सकता है. इससे कॉन्टेंट को चुना और कॉन्फ़िगर किया जा सकता है. इसके अलावा, gmp-place-all-content का इस्तेमाल करके, उपलब्ध सभी कॉन्टेंट को दिखाया जा सकता है.

दस्तावेज़ में कस्टम बनाने का टूल उपलब्ध है. इससे आपको अलग-अलग स्टाइल कॉन्फ़िगरेशन को विज़ुअलाइज़ करने में मदद मिलती है.

लागू करने के लिए सलाह

जगहों की जानकारी देने वाली यूआई किट, Maps JavaScript और Places SDK for Android और iOS के ज़रिए उपलब्ध होती है.

शुरू करें

Places UI Kit का इस्तेमाल शुरू करने के लिए, आपको यह तरीका अपनाना होगा:

1. अपना Google Cloud प्रोजेक्ट सेट अप करें: Places UI Kit का इस्तेमाल करने के लिए, आपके पास बिलिंग खाते वाला Cloud प्रोजेक्ट होना चाहिए.

2. जगहों की जानकारी देने वाली यूआई किट चालू करें: आपको अपने प्रोजेक्ट के लिए, जगहों की जानकारी देने वाली यूआई किट चालू करनी होगी.

3. एपीआई पासकोड पाएं: अपने अनुरोधों की पुष्टि करने के लिए, एपीआई पासकोड ज़रूरी है.

प्लैटफ़ॉर्म के हिसाब से ज़्यादा जानकारी के लिए, Places API के यूज़र इंटरफ़ेस (यूआई) किट को इस्तेमाल करने से जुड़े शुरुआती निर्देश देखें. ये निर्देश JavaScript, Android, और iOS के लिए उपलब्ध हैं.

लागू करने का उदाहरण

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

यहां कोड स्निपेट दिए गए हैं. आपको इस GitHub repo पर डेमो और पूरा कोड मिल सकता है.

शुरू करने से पहले, पक्का करें कि आपने JavaScript से जुड़े, ऊपर दिए गए 'शुरू करें' सेक्शन में बताए गए चरण पूरे कर लिए हों.

एचटीएमएल में ज़रूरी लाइब्रेरी लोड करें.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Place Search कॉम्पोनेंट जोड़ें. Place Search कॉम्पोनेंट में हॉरिज़ॉन्टल और वर्टिकल लेआउट उपलब्ध होते हैं. इस उदाहरण में, हमने हॉरिज़ॉन्टल लेआउट का इस्तेमाल किया है. “चुना जा सकता है” एट्रिब्यूट की मदद से, खोज नतीजों की सूची में मौजूद आइटम पर क्लिक किया जा सकता है. इस पर क्लिक करने से, gmp-select इवेंट ट्रिगर होगा.

gmp-place-search एलिमेंट में, हम दो चाइल्ड एलिमेंट जोड़ते हैं:

• gmp-place-all-content का इस्तेमाल, उपलब्ध सभी कॉन्टेंट को दिखाने के लिए किया जाता है
• gmp-place-text-search-request का इस्तेमाल, Place Search एलिमेंट को कॉन्फ़िगर करने के लिए किया जाता है.

इस उदाहरण में, हम JavaScript में कॉन्फ़िगरेशन सेट करेंगे

<div class="list-container">
    <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>
</div>

इसके बाद, जगह की जानकारी वाला कॉम्पोनेंट जोड़ें. यह कॉम्पैक्ट और फ़ुल लेआउट में उपलब्ध होता है. दोनों में वर्टिकल और हॉरिज़ॉन्टल ओरिएंटेशन काम करते हैं. इस उदाहरण में, कॉम्पैक्ट हॉरिज़ॉन्टल लेआउट का इस्तेमाल किया गया है. Place Search कॉम्पोनेंट की तरह ही, हम दो चाइल्ड एलिमेंट जोड़ते हैं:

• gmp-place-all-content से पता चलता है कि उपलब्ध सारा कॉन्टेंट दिखाया जा रहा है
• gmp-place-details-place-request का इस्तेमाल, किसी जगह को चुनने के लिए किया जाता है.

इस उदाहरण में, हम JavaScript में जगह की जानकारी सेट करेंगे

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

JavaScript में, इस उदाहरण के लिए ज़रूरी लाइब्रेरी इंपोर्ट करें. Places लाइब्रेरी, JavaScript के लिए Places UI Kit लाइब्रेरी इंपोर्ट करती है.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

डाइनैमिक मैप बनाएं.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

जगह की जानकारी खोजने की सुविधा शुरू करने के लिए, खोज बटन में क्लिक लिसनर जोड़ें. खोज के नतीजे लोड होने पर, हर जगह के लिए मार्कर बनाएं और उसमें क्लिक लिसनर जोड़ें. इसके बाद, किसी मार्कर पर क्लिक करने से जगह की जानकारी का अनुरोध किया जाएगा और उसे दिखाया जाएगा.

जब जगहों की जानकारी मिल जाती है और Place Search एलिमेंट लोड हो जाता है, तब Place Search एलिमेंट की जगह की जानकारी वाली प्रॉपर्टी में नतीजों का कलेक्शन भर जाता है. हर नतीजे में एक जगह का ऑब्जेक्ट होता है. इसमें जगह का आईडी, कोऑर्डिनेट, और व्यूपोर्ट शामिल होता है. ज़्यादा जानकारी पाने के लिए, Place Details एलिमेंट को Place ID या पूरा Place ऑब्जेक्ट पास करें.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

इस GitHub repo पर मौजूद डेमो और पूरा कोड ज़रूर देखें.

कॉन्टेंट बनाने में आपकी मदद करने वाले सोर्स

• Google Maps Platform का इस्तेमाल शुरू करना
• JavaScript के लिए Places UI Kit
• Android के लिए Places UI Kit
• iOS के लिए Places UI Kit
• Places UI Kit को पसंद के मुताबिक बनाना

योगदानकर्ता

मुख्य लेखक:

टेरेसा किन | Google Maps Platform की सलूशन इंजीनियर