প্রাথমিক জায়গা অটোমেটিক সম্পূর্ণ করার এলিমেন্ট

BasicPlaceAutocompleteElement একটি টেক্সট ইনপুট ফিল্ড তৈরি করে, UI পিক লিস্টে জায়গার পূর্বাভাস প্রদান করে এবং বেছে নেওয়া জায়গার জন্য একটি জায়গা আইডি রিটার্ন করে।

বেসিক প্লেস অটো-কমপ্লিট এলিমেন্ট PlaceAutocompleteElement-এর থেকে প্রয়োগ করা সহজ এবং এটি নিম্নলিখিত উপায়ে আলাদা:

• বেসিক প্লেস অটো-কমপ্লিট এলিমেন্ট একটি Place অবজেক্ট রিটার্ন করে যার মধ্যে শুধু জায়গার আইডি থাকে, PlacePrediction অবজেক্ট থাকে না। আপনি সরাসরি Places UI Kit Details এলিমেন্টের সাথে রিটার্ন করা প্লেস আইডি ব্যবহার করে জায়গার অতিরিক্ত বিবরণ পেতে পারেন, যেখানে PlacePrediction অবজেক্টের ক্ষেত্রে প্রথমে প্লেস আইডিতে কনভার্ট করতে হবে।
• বেসিক প্লেস অটো-কমপ্লিট এলিমেন্টের জন্য আপনাকে Google Cloud Console-এ Places API চালু করতে হবে না।
• ব্যবহারকারী কোনও জায়গার পূর্বাভাস বেছে নিলে, বেসিক প্লেস অটোমেটিক সম্পূর্ণ করার এলিমেন্ট ইনপুট ফিল্ড মুছে দেয়।

পূর্বশর্ত

বেসিক জায়গা অটোমেটিক সম্পূর্ণ করার এলিমেন্ট ব্যবহার করতে, আপনার Google Cloud প্রোজেক্টে Places UI Kit চালু করতে হবে। আরও বিবরণের জন্য শুরু করা যাক বিকল্প দেখুন।

মনে রাখবেন: বেসিক Place Autocomplete এলিমেন্টের বিল SKU: Places UI Kit - Autocomplete per Session ব্যবহার করে করা হয়, স্ট্যান্ডার্ড Autocomplete অনুরোধ বা Autocomplete সেশন SKU ব্যবহার করে নয়।

একটি বেসিক জায়গা অটোমেটিক সম্পূর্ণ করার এলিমেন্ট যোগ করুন

এই বিভাগ থেকে আপনি জানতে পারবেন যে কীভাবে কোনও ওয়েব পেজ বা ম্যাপে বেসিক অটো-কমপ্লিট এলিমেন্ট যোগ করতে হয়।

ওয়েব পেজে বেসিক অটো-কমপ্লিট এলিমেন্ট যোগ করা

ওয়েব পেজে BasicAutocomplete এলিমেন্ট যোগ করতে, একটি নতুন google.maps.places.BasicPlaceAutocompleteElement তৈরি করুন এবং নিম্নলিখিত উদাহরণের মতো এটি পেজে যোগ করুন:

// Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

ম্যাপে একটি বেসিক অটোকমপ্লিট এলিমেন্ট যোগ করুন

ম্যাপে বেসিক অটোকমপ্লিট এলিমেন্ট যোগ করতে, BasicPlaceAutocompleteElement-কে gmp-map এলিমেন্টের সাথে যোগ করুন এবং slot অ্যাট্রিবিউট ব্যবহার করে এর পজিশন সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

<gmp-map
    zoom="12"
    center="37.4220656,-122.0840897"
    map-id="DEMO_MAP_ID">
    <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>
index.html

মনে রাখবেন:ম্যাপ আইডি অ্যাট্রিবিউট Google Cloud-এ ম্যাপ স্টাইলিং ও কনফিগারেশন সেটিংস স্টোর করার অনুমতি দেয় এবং এই উদাহরণের জন্য এটি প্রয়োজন। DEMO_MAP_ID আইডিটি টেস্টিংয়ের জন্য ব্যবহার করা যেতে পারে এবং Cloud-এ এটি চালু করার প্রয়োজন নেই।

অটোমেটিক সম্পূর্ণ করার পূর্বাভাষ সীমাবদ্ধ করুন

ডিফল্ট হিসেবে, বেসিক প্লেস অটো-কমপ্লিট সব ধরনের জায়গা দেখায়, ব্যবহারকারীর লোকেশনের কাছাকাছি জায়গার পূর্বাভাসের জন্য পক্ষপাতদুষ্ট। আরও প্রাসঙ্গিক অনুমান দেখানোর জন্য BasicPlaceAutocompleteElementOptions সেট করুন ফলাফল সীমাবদ্ধ বা পক্ষপাতদুষ্ট করে।

ফলাফল সীমাবদ্ধ করার ফলে, বেসিক অটোকমপ্লিট এলিমেন্ট সীমাবদ্ধ এলাকার বাইরে থাকা যেকোনও ফলাফলকে উপেক্ষা করে। সাধারণত ম্যাপ বাউন্ডে ফলাফল সীমাবদ্ধ করা হয়। ফলাফল বায়াস করলে BasicAutocomplete এলিমেন্ট নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখায়, তবে কিছু মিল সেই এলাকার বাইরেও হতে পারে।

আপনি কোনও বাউন্ড বা ম্যাপ ভিউপোর্ট না দিলে, API ব্যবহারকারীর IP অ্যাড্রেস থেকে তার লোকেশন শনাক্ত করার চেষ্টা করবে এবং সেই লোকেশনের উপর ভিত্তি করে ফলাফল দেখাবে। সম্ভব হলে বাউন্ড সেট করুন। অন্যথায়, বিভিন্ন ব্যবহারকারী বিভিন্ন পূর্বাভাস পেতে পারেন। এছাড়াও, সাধারণভাবে পূর্বাভাস উন্নত করতে, একটি সংবেদনশীল ভিউপোর্ট প্রদান করা গুরুত্বপূর্ণ, যেমন আপনি ম্যাপে প্যানিং বা জুমিং করে সেট করেন অথবা ডিভাইসের লোকেশন এবং ব্যাসার্ধের উপর ভিত্তি করে ডেভেলপার-সেট ভিউপোর্ট। ব্যাসার্ধ উপলভ্য না থাকলে, বেসিক প্লেস অটো-কমপ্লিট এলিমেন্টের জন্য ৫ কিমিকে একটি যুক্তিসঙ্গত ডিফল্ট হিসেবে বিবেচনা করা হয়। শূন্য ব্যাসার্ধ (একটি একক বিন্দু), মাত্র কয়েক মিটার জুড়ে (১০০ মিটারের কম) বা সমগ্র বিশ্ব জুড়ে বিস্তৃত ভিউপোর্ট সেট করবেন না।

দেশ অনুযায়ী জায়গা সার্চ করার সুবিধা সীমাবদ্ধ করুন

এক বা একাধিক নির্দিষ্ট দেশে জায়গা সার্চ করার সুবিধা সীমাবদ্ধ করতে, includedRegionCodes প্রপার্টি ব্যবহার করে দেশের কোড উল্লেখ করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

ম্যাপ বাউন্ডে জায়গা সার্চ করার সুবিধা সীমাবদ্ধ করুন

কোনও ম্যাপের সীমার মধ্যে জায়গা সার্চ করার সুবিধা সীমাবদ্ধ করতে, locationRestrictions প্রপার্টি ব্যবহার করে সীমা যোগ করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

ম্যাপ বাউন্ডে সীমাবদ্ধ করার সময়, বাউন্ড পরিবর্তন হলে তা আপডেট করার জন্য লিসেনার যোগ করতে ভুলবেন না:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

locationRestriction সরাতে, এটি null-এ সেট করুন।

সার্চ ফলাফলে পক্ষপাতদুষ্ট জায়গা

locationBias প্রপার্টি ব্যবহার করে এবং ব্যাসার্ধ পাস করে, এখানে দেখানো হিসাবে, একটি বৃত্তাকার এলাকায় স্থান অনুসন্ধান ফলাফল পক্ষপাতিত্ব করুন:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

locationBias সরাতে, এটি null-এ সেট করুন।

নির্দিষ্ট কিছু ধরনের জন্য জায়গা সার্চ ফলাফল সীমিত করুন

includedPrimaryTypes প্রপার্টি ব্যবহার করে এবং এখানে দেখানো হিসাবে এক বা একাধিক প্রকার নির্দিষ্ট করে নির্দিষ্ট ধরনের জায়গায় জায়গা সার্চ ফলাফল সীমাবদ্ধ করুন:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

কাজ করে এমন ধরনের সম্পূর্ণ তালিকার জন্য, জায়গার ধরন সংক্রান্ত টেবিল A এবং B দেখুন।

অনুরোধ করার এলিমেন্ট কনফিগার করুন

ব্যবহারকারী কোনও পূর্বাভাস বেছে নিলে, প্লেস রিকোয়েস্ট এলিমেন্ট আপডেট করার জন্য একটি লিসেনার যোগ করুন:

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();

    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector(
        'gmp-place-details-place-request'
    );
    placeDetailsRequest.place = event.place.id;
});
index.js

এই উদাহরণে দেখানো হয়েছে যে কীভাবে Google Maps-এ একটি বেসিক অটো-কমপ্লিট এলিমেন্ট যোগ করতে হয়।

জাভাস্ক্রিপ্ট

const placeAutocompleteElement = document.querySelector(
    'gmp-basic-place-autocomplete'
);
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');

async function init() {
    // Asynchronously load required libraries from the Google Maps JS API.
    const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
        await Promise.all([
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('core'),
            google.maps.importLibrary('places'),
        ]);

    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;

    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;

    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map,
        collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
    });

    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new Size(0, -10),
    });

    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();

        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector(
            'gmp-place-details-place-request'
        );
        placeDetailsRequest.place = event.place.id;
    });

    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place?.location;
        if (!location) {
            advancedMarkerElement.position = null;
            return;
        }

        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });

    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });

    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();

        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new Circle({
            center: newCenter,
            radius: 10000, // 10km in meters.
        });
    });
}

void init();
index.js

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

gmp-map {
    height: 100%;
}

gmp-basic-place-autocomplete {
    position: absolute;
    height: 30px;
    width: 500px;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
    color-scheme: light;
    border-radius: 10px;
}
style.css

HTML

<html>
    <head>
        <title>Basic Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="37.4220656,-122.0840897"
            map-id="DEMO_MAP_ID">
            <gmp-basic-place-autocomplete
                slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
        </gmp-map>
        <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
        <gmp-place-details-compact
            orientation="horizontal"
            style="
                width: 400px;
                display: none;
                border: none;
                padding: 0;
                margin: 0;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>
            <gmp-place-standard-content></gmp-place-standard-content>
        </gmp-place-details-compact>
    </body>
</html>
index.html