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

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

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

পূর্বশর্ত

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

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

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

  • অটোমেটিক সম্পূর্ণ করার উইজেট UI আঞ্চলিক লোকালাইজেশন (RTL ভাষা সহ) সমর্থন করে, টেক্সট ইনপুট প্লেসহোল্ডার, পূর্বাভাস তালিকার লোগো এবং স্থানের পূর্বাভাসের জন্য।
  • স্ক্রিন রিডার ও কীবোর্ড ইন্টার‍্যাকশনের জন্য সহায়তা সহ উন্নত অ্যাক্সেসিবিলিটি।
  • অটো-কমপ্লিট উইজেট নতুন Place class (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'],
});

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

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

বেছে নেওয়া জায়গার বিবরণ পেতে, 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 পায় এবং placePrediction.toPlace() কল করে একটি Place ক্লাস (Place রেফারেন্স) ইনস্ট্যান্স পাওয়ার জন্য। আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডেটা ফিল্ড সহ জায়গার বিবরণ পেতে place.fetchFields() কল করুন।

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

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) ডেটা ফিল্ড ফেরত পাওয়া যায়।

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

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

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

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

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

জায়গার বিবরণ (নতুন) সহ সেশন-ভিত্তিক অটোমেটিক সম্পূর্ণ করা (নতুন)

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

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

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

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

Geocoding API-এর সাথে প্রতি-অনুরোধ অটোকমপ্লিট (নতুন)

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

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

শুধুমাত্র ঠিকানা-ভিত্তিক অ্যাপ্লিকেশনের জন্য সেশন-ভিত্তিক অটো-কমপ্লিট (নতুন)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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