প্লেসেস UI কিট কি এবং আকর্ষক সমাধান তৈরি করতে আপনি কীভাবে এটি ব্যবহার করতে পারেন?

ভূমিকা

বিশ্বব্যাপী লক্ষ লক্ষ ব্যবহারকারীর জন্য, Google Maps হল সঠিক এবং আপ-টু-ডেট স্থানের তথ্যের জন্য যাওয়ার উৎস। ব্যবহারকারীর পর্যালোচনা, ফটো এবং রেটিং সহ বিশ্বব্যাপী 250 মিলিয়নেরও বেশি স্থানের Google এর সমৃদ্ধ ডাটাবেস একটি অতুলনীয় স্তরের বিশদ এবং বিশ্বাস প্রদান করে৷ নতুন এবং বাস্তব তথ্য প্রদানের জন্য, আমরা প্রতিদিন মানচিত্রে 100 মিলিয়ন আপডেট করি।

Places UI Kit হল একটি রেডি-টু-ব্যবহারের, সাশ্রয়ী কম্পোনেন্ট লাইব্রেরি এবং Google Maps-এর জায়গাগুলির বিস্তৃত তথ্য দ্বারা চালিত। এটি আপনাকে Google-এর বিশ্বস্ত এবং পরিচিত স্থানের অভিজ্ঞতাকে আপনার পছন্দের মানচিত্রে আপনার ফ্রন্ট-এন্ড ব্যবহারের ক্ষেত্রে সংহত করতে সক্ষম করে।

উপাদান

প্লেস UI কিট পৃথক UI উপাদানগুলির একটি সেট অফার করে যা একটি নির্বিঘ্ন স্থান অভিজ্ঞতা তৈরি করতে স্বাধীনভাবে বা একসাথে ব্যবহার করা যেতে পারে।

  • স্থানের বিবরণ: এই উপাদানটি একটি স্থান সম্পর্কে বিস্তারিত তথ্য প্রদান করে, যেমন তার নাম, ঠিকানা, ফোন নম্বর, ওয়েবসাইট, খোলার সময় এবং ব্যবহারকারীর পর্যালোচনা।

  • স্থান অনুসন্ধান: এই উপাদানটি স্পষ্টভাবে বা বিনামূল্যে পাঠ্য অনুসন্ধানের মাধ্যমে কাছাকাছি স্থানগুলির একটি তালিকা প্রদর্শন করে।

  • বেসিক প্লেস স্বয়ংসম্পূর্ণ: এই উপাদানটি একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, যা ইনপুটের সাথে মেলে এমন পূর্বাভাসিত স্থানগুলির একটি ড্রপডাউন তালিকা উপস্থাপন করে।

UI কিট কম্পোনেন্ট রাখে

স্থান UI কিট এর মূল সুবিধা

  • ব্যবহারের সহজলভ্যতা: ন্যূনতম কোড সহ আপনার অ্যাপগুলিতে স্থানগুলির জন্য Google এর বিশ্বস্ত ব্যবহারকারীর অভিজ্ঞতা অন্তর্ভুক্ত করুন৷

  • যেকোনো মানচিত্রে ব্যবহার করুন: প্রথমবারের মতো, আপনি একটি নন-Google মানচিত্রে স্থান সামগ্রী ব্যবহার করতে পারেন।

  • পরিচিত UI: উপাদানগুলি একটি ব্যবহারকারী ইন্টারফেস প্রদান করে যা Google মানচিত্রের অভিজ্ঞতার সাথে সামঞ্জস্যপূর্ণ, এটি ব্যবহারকারীদের জন্য স্বজ্ঞাত করে তোলে।

  • কাস্টমাইজেশন: প্লেস UI কিট কোনো অতিরিক্ত চার্জ ছাড়াই ব্যাপক ভিজ্যুয়াল কাস্টমাইজেশন বিকল্প অফার করে। আপনি প্রদর্শন উপাদান কনফিগার করতে বিভিন্ন সেটিংস এবং কাস্টম CSS বৈশিষ্ট্য ব্যবহার করতে পারেন।

  • খরচ-কার্যকর: Places UI কিট সরাসরি Places API ব্যবহার করার তুলনায় আরও সাশ্রয়ী সমাধান হতে পারে।

বাস্তব-বিশ্ব ব্যবহারের ক্ষেত্রে

প্লেস ইউআই কিট ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে বিভিন্ন অ্যাপ্লিকেশনে ব্যবহার করা যেতে পারে।

  • লোকাল ডিসকভারি অ্যাপ্লিকেশান: একটি "থিংস টু ডু" অ্যাপ্লিকেশনটি আশেপাশের রেস্তোরাঁ, ক্যাফে বা আকর্ষণগুলির একটি তালিকা দেখানোর জন্য স্থান অনুসন্ধান উপাদান ব্যবহার করতে পারে৷ যখন একজন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করেন, তখন স্থানের বিবরণ উপাদানটি সেই অবস্থান সম্পর্কে আরও তথ্য প্রদর্শন করতে ব্যবহার করা যেতে পারে।

  • ভ্রমণ পরিকল্পনা অ্যাপ্লিকেশন: একটি ভ্রমণ অ্যাপ্লিকেশন ব্যবহারকারীদের একটি নির্দিষ্ট শহরে হোটেল বা আগ্রহের পয়েন্টগুলি অনুসন্ধান করার অনুমতি দেওয়ার জন্য স্থান অনুসন্ধান ব্যবহার করতে পারে। প্লেস ডিটেইলস কম্পোনেন্ট তারপর পরিকল্পনা করতে সাহায্য করার জন্য প্রতিটি লোকেশনের ফটো, রেটিং এবং রিভিউ দেখাতে পারে।

  • রিয়েল এস্টেট এবং সম্পত্তি অনুসন্ধান পোর্টাল: একটি রিয়েল এস্টেট অ্যাপ্লিকেশন একটি সম্ভাব্য বাড়ির ক্রেতা বা ভাড়াটিয়াকে তাদের দেখার সময় নির্ধারণ করার আগে আশেপাশের জীবনধারার সাথে মানানসই বুঝতে সাহায্য করার জন্য কাছাকাছি স্থানগুলির বিভিন্ন বিভাগ দেখানোর জন্য একটি স্থান অনুসন্ধান উপাদান ব্যবহার করতে পারে।

  • মেসেজিং এবং সোশ্যাল মিডিয়া অ্যাপ্লিকেশান: একটি মেসেজিং এবং সোশ্যাল মিডিয়া অ্যাপ্লিকেশান প্লেস সার্চ ব্যবহার করে কাছাকাছি জায়গাগুলি অনুসন্ধান করতে এবং পরামর্শ দিতে পারে যাতে ব্যবহারকারীদের সহজে একটি মিলনস্থল খুঁজে পেতে সহায়তা করে৷ স্থানের বিশদ উপাদানটি সমৃদ্ধ স্থানের তথ্য দেখানোর জন্য ব্যবহার করা যেতে পারে যখন ব্যবহারকারীরা স্থানগুলি ভাগ করে। পূর্ব-নির্মিত Google Maps বোতাম ব্যবহার করে, ব্যবহারকারীরা সহজে এবং সঠিকভাবে Google Maps-এ আরও অবস্থান এবং ভ্রমণ সংক্রান্ত তথ্য অন্বেষণ করতে পারে।

কাস্টমাইজেশন

স্থান UI কিট কাস্টমাইজেশন

জায়গাগুলির UI কিট উপাদানগুলির সামগ্রীর সমৃদ্ধি এবং শৈলীগুলি আপনার প্রয়োজন অনুসারে কাস্টমাইজ করা যেতে পারে৷

কাস্টম CSS বৈশিষ্ট্যগুলি ব্যবহার করে, উদাহরণস্বরূপ, স্থানের বিবরণ উপাদানের জন্য CSS বৈশিষ্ট্যগুলি , আপনাকে আপনার অ্যাপ্লিকেশনের নকশার সাথে মেলে উপাদানগুলির চেহারা এবং অনুভূতিকে টেইলার করার অনুমতি দেয়৷ আপনি রং, ফন্ট, এবং অন্যান্য চাক্ষুষ দিক কাস্টমাইজ করতে পারেন. চাক্ষুষ পরিবর্তন করার সময় অ্যাট্রিবিউশন প্রয়োজনীয়তাগুলি মেনে চলা গুরুত্বপূর্ণ। উদাহরণ স্বরূপ, আপনি --gmp-mat-color-primary CSS প্রপার্টি দিয়ে লিঙ্ক এবং পর্যালোচনা গণনার জন্য ব্যবহৃত প্রাথমিক রঙ পরিবর্তন করতে পারেন।

আপনি বিষয়বস্তু নির্বাচন এবং কনফিগার করতে একটি নেস্টেড gmp-place-content-config উপাদান ব্যবহার করে প্রদর্শিত নির্দিষ্ট স্থানের সামগ্রী নিয়ন্ত্রণ করতে পারেন, অথবা সমস্ত উপলব্ধ সামগ্রী দেখানোর জন্য Gmp-place-all-content ব্যবহার করে।

আপনাকে বিভিন্ন শৈলী কনফিগারেশন কল্পনা করতে সাহায্য করার জন্য একটি কাস্টমাইজেশন টুল ডকুমেন্টেশনে উপলব্ধ।

বাস্তবায়ন নির্দেশিকা

Places UI Kit Maps JavaScript এবং Places SDK-এর মাধ্যমে Android এবং iOS-এর জন্য উপলব্ধ।

শুরু করা

Places UI কিট ব্যবহার শুরু করতে, আপনাকে এই পদক্ষেপগুলি অনুসরণ করতে হবে:

  1. আপনার Google ক্লাউড প্রজেক্ট সেট আপ করুন : Places UI কিট ব্যবহার করার জন্য আপনার একটি বিলিং অ্যাকাউন্ট সহ একটি ক্লাউড প্রকল্প প্রয়োজন৷

  2. Places UI কিট সক্ষম করুন : আপনার প্রকল্পের জন্য আপনাকে অবশ্যই Places UI কিট সক্ষম করতে হবে।

  3. একটি API কী পান : আপনার অনুরোধগুলি প্রমাণীকরণের জন্য একটি API কী প্রয়োজন৷

আরও প্ল্যাটফর্মের নির্দিষ্ট বিশদ বিবরণের জন্য, JavaScript , Android , এবং iOS-এর জন্য শুরুর নির্দেশিকা পেতে স্থান UI কিটটি দেখুন।

বাস্তবায়ন উদাহরণ

গতিশীল জাভাস্ক্রিপ্ট মানচিত্র সহ একটি স্থান অনুসন্ধান এবং স্থানের বিবরণ বাস্তবায়নের একটি উদাহরণ এখানে রয়েছে৷ একজন ব্যবহারকারী বিনামূল্যে পাঠ্যের উপর ভিত্তি করে কাছাকাছি স্থানগুলি অনুসন্ধান করতে পারেন। অনুসন্ধান ফলাফল তালিকায় একটি স্থানে ক্লিক করার সময়, স্থানের বিবরণ উপাদানটি গতিশীল মানচিত্রে প্রদর্শিত হবে।

নীচে কোড স্নিপেট আছে. আপনি এই GitHub রেপোতে ডেমো এবং সম্পূর্ণ কোড খুঁজে পেতে পারেন।

আপনি শুরু করার আগে, নিশ্চিত করুন যে আপনি জাভাস্ক্রিপ্টের সাথে প্রাসঙ্গিক শুরু করার উপরের ধাপগুলি সম্পূর্ণ করেছেন।

HTML এ প্রয়োজনীয় লাইব্রেরি লোড করুন।

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

HTML এ, একটি মানচিত্র ধারক, পাঠ্য ইনপুট ক্ষেত্র এবং একটি অনুসন্ধান বোতাম যোগ করুন। এই মানচিত্রের ধারকটি গতিশীল মানচিত্রগুলিকে ধরে রাখবে যা জাভাস্ক্রিপ্টে তৈরি করা হবে। ইনপুট বক্স ব্যবহারকারীদের অনুসন্ধান ক্যোয়ারী টাইপ করতে অনুমতি দেয়.

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

স্থান অনুসন্ধান উপাদান যোগ করুন. স্থান অনুসন্ধান উপাদান অনুভূমিক এবং উল্লম্ব লেআউট প্রদান করে। এই উদাহরণে, আমরা অনুভূমিক বিন্যাস ব্যবহার করি। "নির্বাচনযোগ্য" বৈশিষ্ট্যটি অনুসন্ধান ফলাফলের তালিকা আইটেমটিকে ক্লিকযোগ্য হতে সক্ষম করে (জিএমপি-সিলেক্ট ইভেন্টটি ক্লিক করা হলে ট্রিগার করা হবে)।

জিএমপি-প্লেস-সার্চ উপাদানের মধ্যে, আমরা দুটি চাইল্ড উপাদান যোগ করি:

  • gmp-place-all-content ব্যবহার করা হয় সমস্ত উপলব্ধ সামগ্রী দেখানোর জন্য
  • স্থান অনুসন্ধান উপাদান কনফিগার করতে gmp-place-text-search-request ব্যবহার করা হয়।

আমরা এই উদাহরণে জাভাস্ক্রিপ্টে কনফিগারেশন সেট করব

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

এরপরে, স্থানের বিশদ উপাদান যোগ করুন, যা কমপ্যাক্ট এবং পূর্ণ বিন্যাসে উপলব্ধ, প্রতিটি উল্লম্ব এবং অনুভূমিক অভিযোজন সমর্থন করে। এই উদাহরণটি কমপ্যাক্ট অনুভূমিক বিন্যাস ব্যবহার করে। স্থান অনুসন্ধান উপাদানের মত, আমরা দুটি শিশু উপাদান যোগ করি:

  • gmp-place-all-content নির্দেশ করে যে সমস্ত উপলব্ধ সামগ্রী দেখানো হচ্ছে
  • gmp-place-details-place-request একটি স্থান নির্বাচন করতে ব্যবহৃত হয়।

আমরা এই উদাহরণে জাভাস্ক্রিপ্টে স্থান নির্ধারণ করব

<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 UI কিট লাইব্রেরি আমদানি করে।

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);

একটি স্থান অনুসন্ধান শুরু করতে অনুসন্ধান বোতামে একটি ক্লিক শ্রোতা যোগ করুন৷ যখন অনুসন্ধান ফলাফল লোড হয়, প্রতিটি স্থানের জন্য মার্কার তৈরি করুন এবং এতে ক্লিক শ্রোতা যোগ করুন। একটি মার্কার ক্লিক করা তারপর অনুরোধ করবে এবং সংশ্লিষ্ট স্থানের বিবরণ প্রদর্শন করবে।

যখন স্থানগুলি খুঁজে পাওয়া যায় এবং স্থান অনুসন্ধান উপাদানটি লোড হয়, তখন স্থান অনুসন্ধান উপাদানের স্থান বৈশিষ্ট্যগুলি ফলাফলের একটি বিন্যাসে পপুলেট হয়৷ প্রতিটি ফলাফল তার স্থান আইডি, স্থানাঙ্ক, এবং ভিউপোর্ট ধারণকারী একটি স্থান বস্তু। বিস্তারিত আনতে, স্থানের আইডি বা সম্পূর্ণ স্থান বস্তুটি স্থানের বিবরণ উপাদানে পাস করুন।

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 রেপোতে ডেমো এবং সম্পূর্ণ কোড পরীক্ষা করে দেখুন।

উত্সগুলি আপনাকে তৈরি করতে সহায়তা করবে

অবদানকারী

প্রধান লেখক:

তেরেসা কিন | গুগল ম্যাপ প্ল্যাটফর্ম সলিউশন ইঞ্জিনিয়ার