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

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

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

পূর্বশর্ত

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

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

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

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

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

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

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

ওয়েব পেজে 'অটোমেটিক সম্পূর্ণ করা' উইজেট যোগ করতে, একটি নতুন 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 Map-এর সাথে অটো-কমপ্লিট উইজেটও ব্যবহার করতে পারেন।

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

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

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

<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 ইনস্ট্যান্স তৈরি করুন, PlaceAutocompleteElement একটি div-এ যোগ করুন এবং slot অ্যাট্রিবিউটটি div-এ প্রয়োগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে: 

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

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

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

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

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() করে আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডেটা ফিল্ড সহ স্থান সম্পর্কিত বিবরণ পান।

পরের উদাহরণে, লিসনার জায়গার তথ্য জানতে চাইছে এবং সেটি ম্যাপে দেখানো হচ্ছে।

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 Maps-এ অটোফিল উইজেট যোগ করতে হয়।

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 কোনও সমস্যা রিটার্ন করলে, আপনার অ্যাপ যাতে ঠিকভাবে কাজ করা বন্ধ করে দেয় তা নিশ্চিত করতে সমস্যা ম্যানেজ করার সুবিধা ব্যবহার করুন।
  • কোনও কিছু বেছে না নেওয়া হলে আপনার অ্যাপ যেন সেটি ম্যানেজ করতে পারে এবং ব্যবহারকারীকে চালিয়ে যাওয়ার উপায় অফার করে তা নিশ্চিত করুন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

হ্যাঁ

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

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

না

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

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

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

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

অটোকমপ্লিট (নতুন) অনুরোধে দেরি করার কথা বিবেচনা করুন
আপনি এমন কৌশল অবলম্বন করতে পারেন, যেমন ব্যবহারকারী প্রথম তিন বা চারটি অক্ষর টাইপ না করা পর্যন্ত অটোকমপ্লিট (নতুন) অনুরোধে দেরি করা, যাতে আপনার অ্যাপ্লিকেশন কম অনুরোধ করে। যেমন, ব্যবহারকারী তৃতীয় অক্ষর টাইপ করার পরে প্রতিটি অক্ষরের জন্য অটোকমপ্লিট (নতুন) অনুরোধ করার অর্থ হল, ব্যবহারকারী সাতটি অক্ষর টাইপ করে একটি পূর্বাভাস বেছে নিলে, যার জন্য আপনি একটি Geocoding API অনুরোধ করেন, তাহলে মোট খরচ হবে ৪টি অটোকমপ্লিট (নতুন) প্রতি অনুরোধ + 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 প্যারামিটার যোগ করতে হবে। এটি Autocomplete (New)-কে শুধুমাত্র সেই অঞ্চলের মধ্যে ফলাফল দেখানোর নির্দেশ দেয়।