মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদান

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

PlaceAutocompleteElement এর তুলনায় Basic Place Autocomplete এলিমেন্টটি প্রয়োগ করা সহজতর, এবং এর পার্থক্যগুলো নিম্নরূপ:

  • বেসিক প্লেস অটোকমপ্লিট এলিমেন্টটি একটি PlacePrediction অবজেক্টের পরিবর্তে শুধুমাত্র প্লেস আইডি সম্বলিত একটি প্লেস অবজেক্ট রিটার্ন করে। আপনি অতিরিক্ত স্থানের বিবরণ পেতে রিটার্ন করা প্লেস আইডিটি সরাসরি প্লেসেস UI কিট ডিটেইলস এলিমেন্টের সাথে ব্যবহার করতে পারেন, যেখানে একটি PlacePrediction অবজেক্টকে প্রথমে প্লেস আইডিতে রূপান্তর করার প্রয়োজন হয়।
  • বেসিক প্লেস অটোকমপ্লিট এলিমেন্টটি ব্যবহার করার জন্য গুগল ক্লাউড কনসোলে প্লেসেস এপিআই (Places API) সক্রিয় করার প্রয়োজন নেই।
  • বেসিক প্লেস অটোকমপ্লিট এলিমেন্টটি ব্যবহারকারী যখন কোনো স্থানের পূর্বাভাস নির্বাচন করেন, তখন ইনপুট ফিল্ডটি খালি করে দেয়।

পূর্বশর্ত

বেসিক প্লেস অটোকমপ্লিট এলিমেন্ট ব্যবহার করতে হলে, আপনাকে আপনার গুগল ক্লাউড প্রজেক্টে প্লেসেস ইউআই কিট (Places UI Kit) সক্রিয় করতে হবে। বিস্তারিত জানতে ‘গেট স্টার্টেড’ (Get started) দেখুন।

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

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

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

একটি ওয়েব পেজে 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);

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

একটি ম্যাপে বেসিক অটোকমপ্লিট এলিমেন্ট যোগ করতে, একটি gmp-map এলিমেন্টের শেষে BasicPlaceAutocompleteElement যুক্ত করুন এবং 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>

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

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

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

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

দেশ অনুযায়ী স্থান অনুসন্ধান সীমাবদ্ধ করুন

স্থান অনুসন্ধান এক বা একাধিক নির্দিষ্ট দেশে সীমাবদ্ধ করতে, নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী 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 দেখুন।

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

ব্যবহারকারী যখন কোনো প্রেডিকশন নির্বাচন করবেন, তখন 'Place Request' এলিমেন্টটি আপডেট করার জন্য একটি লিসেনার যোগ করুন:

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

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

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

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

সিএসএস 

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

এইচটিএমএল 

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