প্লেস অটোকমপ্লিট উইজেট

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA)-এর ডেভেলপার

'জায়গা অটোমেটিক সম্পূর্ণ করা' উইজেট একটি টেক্সট ইনপুট ফিল্ড তৈরি করে, UI পিক লিস্টে জায়গার পূর্বাভাস প্রদান করে এবং ব্যবহারকারীর বেছে নেওয়া বিকল্পের ভিত্তিতে জায়গার বিবরণ ফেরত পাঠায়। আপনার ওয়েব পেজে সম্পূর্ণ স্বয়ংসম্পূর্ণ ইউজার ইন্টারফেস এম্বেড করতে 'প্লেস অটোকমপ্লিট' উইজেট ব্যবহার করুন। সম্পূর্ণ API রেফারেন্সের জন্য, PlaceAutocompleteElement দেখুন।

পূর্বশর্ত

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

নতুন কী রয়েছে

'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচারটি নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

  • অটোমেটিক সম্পূর্ণ করার উইজেট UI আঞ্চলিক লোকালাইজেশন (RTL ভাষা সহ) সমর্থন করে, টেক্সট ইনপুট প্লেসহোল্ডার, পূর্বাভাস তালিকার লোগো এবং স্থানের পূর্বাভাসের জন্য।
  • স্ক্রিন রিডার ও কীবোর্ড ইন্টার‍্যাকশনের জন্য সহায়তা সহ উন্নত অ্যাক্সেসিবিলিটি।
  • অটো-কমপ্লিট উইজেট নতুন Place ক্লাস (Place রেফারেন্স) ফিরিয়ে দেয় যাতে ফিরিয়ে দেওয়া অবজেক্ট সহজে ম্যানেজ করা যায়।
  • মোবাইল ডিভাইস ও ছোট স্ক্রিনের জন্য আরও ভাল সহায়তা।
  • আরও ভালো পারফর্ম্যান্স ও উন্নত গ্রাফিক্স।

অটো-কমপ্লিট উইজেট যোগ করা

অটোমেটিক পূরণ করার উইজেট একটি টেক্সট ইনপুট ফিল্ড তৈরি করে, UI পিক লিস্টে জায়গার পূর্বাভাস প্রদান করে এবং gmp-select লিসেনার ব্যবহার করে ব্যবহারকারীর ক্লিকের উত্তরে জায়গার বিবরণ ফেরত দেয়। এই বিভাগে, কীভাবে কোনও ওয়েব পেজ বা Google Maps-এ অটোফিল উইজেট যোগ করতে হয় তা দেখানো হয়েছে।

ওয়েব পেজে 'অটোমেটিক সম্পূর্ণ করুন' উইজেট যোগ করা

কোনও ওয়েব পেজে 'অটোমেটিক সম্পূর্ণ' উইজেট যোগ করতে, একটি নতুন google.maps.places.PlaceAutocompleteElement তৈরি করুন, এবং নিম্নলিখিত উদাহরণে দেখানো পদ্ধতি অনুযায়ী এটি পেজে যোগ করুন:

TypeScript

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

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

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

সম্পূর্ণ কোডের উদাহরণ দেখুন

ম্যাপে 'অটোকমপ্লিট' উইজেট যোগ করা

আপনার বিলিং ঠিকানা যদি ইউরোপীয় অর্থনৈতিক অঞ্চলের (EEA) বাইরে হয়, তাহলে আপনি Google Maps-এর সাথে অটোফিল উইজেটও ব্যবহার করতে পারেন।

ম্যাপে 'অটোমেটিক সম্পূর্ণ করুন' উইজেট যোগ করতে, প্রথমে প্রয়োজনীয় লাইব্রেরির জন্য অনুরোধ করুন, যেমন এখানে দেখানো হয়েছে:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

তারপর আপনার HTML-এ, একটি div-এর মধ্যে একটি নতুন gmp-place-autocomplete এলিমেন্ট নেস্ট করুন এবং নিচের উদাহরণে দেখানো অনুযায়ী, একটি gmp-map-এর মধ্যে সেই div নেস্ট করুন:

<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <div
        class="place-autocomplete-card"
        slot="control-inline-start-block-start">
        <gmp-place-autocomplete
            placeholder="Search for a place..."></gmp-place-autocomplete>
    </div>
</gmp-map>

কোনও ম্যাপে প্রোগ্রাম্যাটিক উপায়ে 'অটোফিল' উইজেট যোগ করতে, একটি নতুন google.maps.places.PlaceAutocompleteElement ইনস্ট্যান্স তৈরি করুন, div-এ PlaceAutocompleteElement যোগ করুন এবং div-এ slot অ্যাট্রিবিউট প্রয়োগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে: 

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

// Get the map element.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

// Create the PlaceAutocompleteElement instance.
const placeAutocomplete = new PlaceAutocompleteElement({});

// Create a div and append the PlaceAutocompleteElement to it.
const card = document.createElement("div");
card.appendChild(placeAutocomplete);

// Apply the slot attribute to the div.
// This positions the control in the top-left corner of the map.
card.setAttribute("slot", "control-inline-start-block-start");

// Append the div to the map element (check for null).
if (mapElement) {
    mapElement.appendChild(card);
}

সম্পূর্ণ কোডের উদাহরণ দেখুন

প্লেসহোল্ডার টেক্সট যোগ করুন

প্লেসহোল্ডার টেক্সট যোগ করতে placeholder প্রপার্টি ব্যবহার করুন। HTML-এ প্লেসহোল্ডার টেক্সট সেট করার বিষয়টি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

<gmp-place-autocomplete
  placeholder="Search for a place..."
></gmp-place-autocomplete>

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

placeAutocomplete.placeholder = 'Search for a place...';

অটোকমপ্লিট পূর্বানুমান সীমাবদ্ধ করা

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

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

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

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

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

placeAutocomplete.includedRegionCodes = ['us', 'au'];;

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

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

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});

locationRestriction সরিয়ে দিতে, null হিসেবে সেট করুন।

পক্ষপাতদুষ্ট স্থান সংক্রান্ত সার্চ ফলাফল

এখানে দেখানো হয়েছে সেইভাবে locationBias প্রপার্টি ব্যবহার করে বৃত্তাকার এলাকার জন্য পক্ষপাতদুষ্ট স্থান সার্চ ফলাফল পান:

placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};

locationBias সরিয়ে দিতে, এটি null-এ সেট করুন।

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

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

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

কাজ করে এমন ধরনের সম্পূর্ণ তালিকা দেখতে, প্লেস ধরনের টেবিল ক ও খ দেখুন।

জায়গার বিবরণ পান

বেছে নেওয়া জায়গার বিবরণ পেতে, PlaceAutocompleteElement-এ gmp-select লিসেনার যোগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

TypeScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({
        placePrediction,
    }: google.maps.places.PlacePredictionSelectEvent) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);

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

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);

সম্পূর্ণ কোডের উদাহরণ দেখুন

আগের উদাহরণে, ইভেন্ট লিসেনার PlacePredictionSelectEvent পায় এবং Place class (Place রেফারেন্স) ইনস্ট্যান্স পেতে placePrediction.toPlace() কল করে। আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডেটা ফিল্ড সহ জায়গার বিবরণ পেতে place.fetchFields() কল করুন।

পরের উদাহরণে, শ্রোতা displayName, formattedAddress, location, এবং viewport ফিল্ডে place.fetchFields()-এর অনুরোধ করেন, তারপর place.viewport ব্যবহার করে fitBounds() ম্যাপে বেছে নেওয়া জায়গাটি দেখান।

TypeScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location!);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);

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

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);

সম্পূর্ণ কোডের উদাহরণ দেখুন

উদাহরণ হিসেবে ম্যাপ

এই বিভাগে, এই পৃষ্ঠায় ফিচার করা উদাহরণ ম্যাপের সম্পূর্ণ কোড রয়েছে।

অটোমেটিক সম্পূর্ণ করার এলিমেন্ট

এই উদাহরণটি একটি ওয়েবপেজে 'অটোফিল' উইজেট যোগ করে এবং বেছে নেওয়া প্রতিটি জায়গার ফলাফল দেখায়।

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({
            placePrediction,
        }: google.maps.places.PlacePredictionSelectEvent) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();

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

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

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

HTML

<html>
    <head>
        <title>Place Autocomplete element</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>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>
    </body>
</html>

অটো-কমপ্লিট ম্যাপ

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(
    content: string | Element | Text | null | undefined,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();

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

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}

HTML

<html>
    <head>
        <title>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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Search for a place..."></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>

অটো-কমপ্লিট (নতুন) অপ্টিমাইজেশন

এই বিভাগে, অটোকমপ্লিট (নতুন) পরিষেবা থেকে সর্বাধিক সুবিধা পেতে আপনাকে সাহায্য করার জন্য পেশাদার পদ্ধতিগুলি বর্ণনা করা হয়েছে।

এখানে কিছু সাধারণ নির্দেশিকা দেওয়া হল:

  • কাজ করে এমন ইউজার ইন্টারফেস ডেভেলপ করার সবচেয়ে দ্রুত উপায় হল Maps JavaScript API অটোকমপ্লিট (নতুন) উইজেট, Android-এর জন্য Places SDK অটোকমপ্লিট (নতুন) উইজেট, অথবা iOS-এর জন্য Places SDK অটোকমপ্লিট (নতুন) উইজেট ব্যবহার করা।
  • শুরু থেকেই প্রয়োজনীয় অটোমেটিক সম্পূর্ণ হওয়া (নতুন) ডেটা ফিল্ড সম্পর্কে জানুন।
  • লোকেশন বায়াসিং এবং লোকেশন সংক্রান্ত বিধিনিষেধের ফিল্ডগুলি ঐচ্ছিক হলেও, অটো-কমপ্লিট পারফর্ম্যান্সের উপর উল্লেখযোগ্য প্রভাব ফেলতে পারে।
  • API কোনও সমস্যা দেখালে, আপনার অ্যাপ যাতে ভালোভাবে কাজ করা বন্ধ করতে পারে তা নিশ্চিত করতে সমস্যা হ্যান্ডেল করার সুবিধা ব্যবহার করুন।
  • কোনও কিছু বেছে না নেওয়া হলে আপনার অ্যাপ যেন সেটি ম্যানেজ করতে পারে এবং ব্যবহারকারীকে চালিয়ে যাওয়ার উপায় অফার করে তা নিশ্চিত করুন।

খরচ অপ্টিমাইজ করার পেশাদার পদ্ধতি

খরচ কমানোর প্রাথমিক পদ্ধতি

Autocomplete (New) পরিষেবা ব্যবহারের খরচ অপ্টিমাইজ করতে, জায়গার বিবরণ (New) এবং Autocomplete (New) উইজেটে ফিল্ড মাস্ক ব্যবহার করুন যাতে শুধু আপনার প্রয়োজনীয় Autocomplete (New) ডেটা ফিল্ড ফেরত পাওয়া যায়।

উন্নত খরচ অপ্টিমাইজেশন

'অটোমেটিক সম্পূর্ণ হওয়া' (নতুন) ফিচারের প্রোগ্রাম্যাটিক প্রয়োগ বিবেচনা করে SKU: অটোমেটিক সম্পূর্ণ হওয়ার অনুরোধের মূল্য অ্যাক্সেস করুন এবং 'জায়গার বিবরণ' (নতুন) ফিচারের পরিবর্তে বেছে নেওয়া জায়গা সম্পর্কে জিওকোডিং API ফলাফল অনুরোধ করুন। Geocoding API-এর সাথে পেয়ার করা প্রতি-অনুরোধের মূল্য সেশন-ভিত্তিক (সেশন-ভিত্তিক) মূল্যের চেয়ে বেশি সাশ্রয়ী হয় যদি নিম্নলিখিত দুটি শর্তই পূরণ হয়:

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

আপনার অ্যাপ্লিকেশনে কি বেছে নেওয়া পূর্বাভাসের ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ ছাড়া অন্য কোনও তথ্যের প্রয়োজন আছে?

হ্যাঁ, আরও বিবরণ প্রয়োজন

'স্থান সম্পর্কিত বিবরণ' (নতুন) সহ সেশন-ভিত্তিক অটোমেটিক সম্পূর্ণ করা (নতুন) ফিচার ব্যবহার করুন।
যেহেতু আপনার অ্যাপ্লিকেশনে প্লেস বিবরণ (নতুন) প্রয়োজন, যেমন জায়গার নাম, ব্যবসার স্ট্যাটাস, বা খোলার সময়, তাই অটো-কমপ্লিট (নতুন) প্রয়োগ করার সময় সেশন টোকেন ব্যবহার করতে হবে (প্রোগ্রামাটিক বা JavaScript, Android, বা iOS উইজেটে বিল্ট-ইন) প্রতি সেশন এবং প্রযোজ্য Places SKUs, আপনি কোন প্লেস ডেটা ফিল্ডের অনুরোধ করছেন তার উপর নির্ভর করে।১

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android, অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে অটোকমপ্লিট (নতুন) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর ভিত্তি করে জায়গার বিবরণ (নতুন) অনুরোধ অন্তর্ভুক্ত। আপনার প্রয়োজনীয় fields প্যারামিটার উল্লেখ করতে ভুলবেন না, যাতে আপনি শুধু Autocomplete (নতুন) ডেটা ফিল্ড অনুরোধ করছেন তা নিশ্চিত করা যায়।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার অটো-কমপ্লিট (নতুন) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য Place Details (New) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

  1. অটোমেটিক সম্পূর্ণ করা (নতুন) উত্তর থেকে পাওয়া জায়গার আইডি
  2. অটোকমপ্লিট (নতুন) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
  3. fields প্যারামিটারটি আপনার প্রয়োজনীয় অটোফিল (নতুন) ডেটা ফিল্ড নির্দিষ্ট করে

না, শুধু ঠিকানা ও লোকেশন প্রয়োজন

আপনার Autocomplete (New) ব্যবহারের পারফর্ম্যান্সের উপর নির্ভর করে, আপনার অ্যাপ্লিকেশনের জন্য Geocoding API, Place Details (New)-এর চেয়ে বেশি সাশ্রয়ী বিকল্প হতে পারে। ব্যবহারকারী কী লিখছেন, অ্যাপ্লিকেশনটি কোথায় ব্যবহার করা হচ্ছে এবং পারফর্ম্যান্স অপ্টিমাইজেশন সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করা হয়েছে কিনা তার উপর নির্ভর করে প্রতিটি অ্যাপ্লিকেশনের অটো-কমপ্লিট (নতুন) ফিচারের কার্যকারিতা পরিবর্তিত হয়।

নিম্নলিখিত প্রশ্নের উত্তর দিতে, আপনার অ্যাপ্লিকেশনে অটোকমপ্লিট (নতুন) পূর্বাভাস বেছে নেওয়ার আগে একজন ব্যবহারকারী গড়ে কতগুলি অক্ষর টাইপ করেন তা বিশ্লেষণ করুন।

আপনার ব্যবহারকারীরা কি গড়ে চারটি বা তার কম অনুরোধে একটি অটোকমপ্লিট (নতুন) সাজেশন বেছে নেন?

হ্যাঁ

সেশন টোকেন ছাড়া প্রোগ্রামাটিক পদ্ধতিতে 'অটোফিল' (নতুন) ফিচার প্রয়োগ করুন এবং বেছে নেওয়া জায়গার পূর্বাভাসের জন্য জিওকোডিং API কল করুন।
Geocoding API, ঠিকানা ও অক্ষাংশ/দ্রাঘিমাংশ কোঅর্ডিনেট প্রদান করে। চারটি অটোমেটিক সম্পূর্ণ করার অনুরোধ অনুরোধ এবং বেছে নেওয়া জায়গার পূর্বাভাসের জন্য Geocoding API কল করার খরচ সেশন প্রতি অটোমেটিক সম্পূর্ণ করার (নতুন) খরচের চেয়ে কম।১

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

না

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

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে অটোকমপ্লিট (নতুন) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর জায়গার বিবরণ (নতুন) অনুরোধ অন্তর্ভুক্ত। আপনার প্রয়োজনীয় ফিল্ডের জন্য অনুরোধ করছেন কিনা তা নিশ্চিত করতে fields প্যারামিটার উল্লেখ করতে ভুলবেন না।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার অটো-কমপ্লিট (নতুন) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য জায়গার বিবরণ (নতুন) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

  1. অটোমেটিক সম্পূর্ণ করা (নতুন) উত্তর থেকে পাওয়া জায়গার আইডি
  2. অটোকমপ্লিট (নতুন) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
  3. fields প্যারামিটার যা উল্লেখ করে ফিল্ড যেমন ঠিকানা ও জ্যামিতি

অটোকমপ্লিট (নতুন) অনুরোধে দেরি করার কথা বিবেচনা করুন
ব্যবহারকারী প্রথম তিনটি বা চারটি অক্ষর টাইপ না করা পর্যন্ত অটোকমপ্লিট (নতুন) অনুরোধে দেরি করার মতো কৌশল আপনি প্রয়োগ করতে পারেন, যাতে আপনার অ্যাপ্লিকেশন কম অনুরোধ করে। যেমন, ব্যবহারকারী তৃতীয় অক্ষর টাইপ করার পরে প্রতিটি অক্ষরের জন্য অটোকমপ্লিট (নতুন) অনুরোধ করার অর্থ হল, ব্যবহারকারী সাতটি অক্ষর টাইপ করে একটি পূর্বাভাস বেছে নিলে, যার জন্য আপনি একটি Geocoding API অনুরোধ করেন, তাহলে মোট খরচ হবে ৪টি অটোকমপ্লিট (নতুন) প্রতি অনুরোধ + Geocoding-এর জন্য।১

অনুরোধে দেরি করার ফলে আপনার গড় প্রোগ্র্যামাটিক অনুরোধ চারটির কম হলে, আপনি Geocoding API-এর সাথে পারফর্ম্যান্ট অটোমেটিক সম্পূর্ণ (নতুন) প্রয়োগ করার নির্দেশিকা অনুসরণ করতে পারেন। মনে রাখবেন, অনুরোধে দেরি হলে, ব্যবহারকারী এটিকে লেটেন্সি হিসেবে দেখতে পারেন, কারণ তিনি প্রতিটি নতুন কীস্ট্রোকের সাথে সাথে ভবিষ্যদ্বাণী দেখতে পাওয়ার আশা করতে পারেন।

আপনার ব্যবহারকারীরা যাতে কম অক্ষর টাইপ করেই তাদের প্রয়োজনীয় পূর্বাভাস পেতে পারেন, তার জন্য পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করার কথা বিবেচনা করুন।

  1. খরচের জন্য, Google Maps Platform-এর দামের তালিকা দেখুন।

পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি

নিচে দেওয়া নির্দেশিকা থেকে অটোকমপ্লিট (নতুন) পারফর্ম্যান্স অপ্টিমাইজ করার উপায় সম্পর্কে জানতে পারবেন:

  • আপনার Autocomplete (নতুন) ইমপ্লিমেন্টেশনে দেশ সংক্রান্ত বিধিনিষেধ, লোকেশন বায়াসিং, এবং (প্রোগ্রামাটিক ইমপ্লিমেন্টেশনের জন্য) ভাষার অগ্রাধিকার যোগ করুন। উইজেটের ক্ষেত্রে ভাষার পছন্দ সেট করার প্রয়োজন নেই কারণ এটি ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষার পছন্দ বেছে নেয়।
  • অটোমেটিক সম্পূর্ণ (নতুন) ফিচারের সাথে ম্যাপ থাকলে, আপনি ম্যাপ ভিউপোর্ট অনুযায়ী লোকেশন বায়াস করতে পারবেন।
  • এমন পরিস্থিতিতে যখন কোনও ব্যবহারকারী অটোকমপ্লিট (নতুন) পূর্বাভাসের মধ্যে থেকে কোনও একটি বেছে নেন না, সাধারণত কারণ সেইসব পূর্বাভাসের মধ্যে কোনওটিই কাঙ্ক্ষিত ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করতে ব্যবহারকারীর আসল ইনপুট আবার ব্যবহার করতে পারবেন:
    • আপনি যদি ব্যবহারকারীর থেকে শুধুমাত্র ঠিকানা সংক্রান্ত তথ্য আশা করেন, তাহলে Geocoding API-তে কল করার সময় মূল ব্যবহারকারীর ইনপুট আবার ব্যবহার করুন।
    • ব্যবহারকারী নাম বা ঠিকানা দিয়ে নির্দিষ্ট কোনও জায়গা সার্চ করবেন বলে আপনি আশা করলে, 'জায়গার বিবরণ (নতুন)' সংক্রান্ত অনুরোধ ব্যবহার করুন। ফলাফল শুধুমাত্র নির্দিষ্ট অঞ্চলে প্রত্যাশিত হলে, লোকেশন বায়াসিং ব্যবহার করুন।
    Geocoding API-তে ফিরে যাওয়ার জন্য উপযুক্ত অন্যান্য পরিস্থিতিগুলির মধ্যে এগুলি অন্তর্ভুক্ত:
    • ব্যবহারকারীরা সাবপ্রিমাইজ ঠিকানা ইনপুট করছেন, যেমন কোনও বিল্ডিংয়ের মধ্যে নির্দিষ্ট ইউনিট বা অ্যাপার্টমেন্টের ঠিকানা। যেমন, চেক প্রজাতন্ত্রের ঠিকানা "Stroupežnického 3191/17, Praha" অটোমেটিক সম্পূর্ণ (নতুন) ফিচারে আংশিক পূর্বাভাস দেখায়।
    • ব্যবহারকারীরা নিউ ইয়র্ক সিটিতে "23-30 29th St, Queens" বা হাওয়াইয়ের কাউয়াই দ্বীপে "47-380 Kamehameha Hwy, Kaneohe"-এর মতো রোড-সেগমেন্ট প্রিফিক্স সহ ঠিকানা ইনপুট করছেন।

লোকেশন বায়াসিং

location প্যারামিটার এবং radius প্যারামিটার পাস করে নির্দিষ্ট এলাকার জন্য পক্ষপাতমূলক ফলাফল। এটি Autocomplete (নতুন) ফিচারকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখানোর জন্য অগ্রাধিকার দিতে নির্দেশ দেয়। নির্দিষ্ট করা এলাকার বাইরের ফলাফল এখনও দেখানো হতে পারে। আপনি includedRegionCodes প্যারামিটার ব্যবহার করে ফলাফল ফিল্টার করতে পারেন যাতে শুধুমাত্র নির্দিষ্ট দেশের মধ্যে থাকা জায়গাগুলি দেখানো হয়।

লোকেশন সংক্রান্ত বিধিনিষেধ

locationRestriction প্যারামিটার পাস করে ফলাফলকে নির্দিষ্ট এলাকায় সীমাবদ্ধ করুন।

এছাড়াও, আপনি location এবং radius প্যারামিটার দ্বারা নির্ধারিত অঞ্চলে ফলাফল সীমাবদ্ধ করতে পারেন, এর জন্য locationRestriction প্যারামিটার যোগ করতে হবে। এটি অটোকমপ্লিট (নতুন) ফিচারকে সেই অঞ্চলের মধ্যে শুধুমাত্র ফলাফল দেখাতে নির্দেশ দেয়।