টেক্সট সার্চ (নতুন)

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript ওয়েব পরিষেবা

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

আপনার বিলিং ঠিকানা ইউরোপীয় অর্থনৈতিক অঞ্চলে হলে, ৮ জুলাই, ২০২৫ থেকে, আপনার পরিষেবা ব্যবহারের ক্ষেত্রে Google Maps Platform EEA পরিষেবার শর্তাবলী প্রযোজ্য হবে। অঞ্চল অনুযায়ী কার্যকারিতা আলাদা আলাদা হয়। আরও জানুন।

'টেক্সট সার্চ (নতুন)' ফিচারটি টেক্সট কোয়েরি নেয় এবং মিলে যাওয়া জায়গার একটি তালিকা রিটার্ন করে।

টেক্সট সার্চ (নতুন) একটি স্ট্রিংয়ের উপর ভিত্তি করে একগুচ্ছ জায়গা সম্পর্কে তথ্য দেয় — যেমন "নিউ ইয়র্কের পিৎজা" বা "অটোয়ার কাছাকাছি জুতার দোকান" অথবা "১২৩ মেইন স্ট্রিট"। পরিষেবাটি টেক্সট স্ট্রিংয়ের সাথে মিলে যাওয়া জায়গার একটি তালিকা এবং সেট করা যেকোনও লোকেশন বায়াস সহ উত্তর দেয়। টেক্সট সার্চ (নতুন) আপনাকে এগুলি সার্চ করতে দেয়: ধরনের ভিত্তিতে জায়গা, ব্যবসার সময় ও রেটিংয়ের মতো নির্ণায়ক ব্যবহার করে ফিল্টার করা এবং ফলাফলকে নির্দিষ্ট লোকেশনে সীমাবদ্ধ করা বা পক্ষপাতদুষ্ট করা।

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

টেক্সট কোয়েরির মাধ্যমে জায়গা খোঁজা

টেক্সট কোয়েরি বা ফোন নম্বর থেকে জায়গার তালিকা পেতে searchByText-এ কল করুন। অনুরোধ ব্যবহার করে সার্চ প্যারামিটার নির্দিষ্ট করুন এবং তারপরে searchByText() কল করুন। ফলাফলগুলি Place অবজেক্টের একটি তালিকা হিসেবে ফেরত দেওয়া হয়, যেখান থেকে আপনি জায়গার বিবরণ পেতে পারেন। নিচে দেওয়া স্নিপেটে searchByText-এর জন্য অনুরোধ ও কলের একটি উদাহরণ দেখানো হয়েছে:

TypeScript

const request = {
    textQuery: query,
    fields: ['displayName', 'location', 'businessStatus'],
    includedType: '', // Restrict query to a specific type (leave blank for any).
    useStrictTypeFiltering: true,
    locationRestriction: map.getBounds(),
    isOpenNow: true,
    language: 'en-US',
    maxResultCount: 8,
    minRating: 1, // Specify a minimum rating.
    region: 'us',
};

const { places } = await Place.searchByText(request);
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

const request = {
    textQuery: query,
    fields: ['displayName', 'location', 'businessStatus'],
    includedType: '', // Restrict query to a specific type (leave blank for any).
    useStrictTypeFiltering: true,
    locationRestriction: map.getBounds(),
    isOpenNow: true,
    language: 'en-US',
    maxResultCount: 8,
    minRating: 1, // Specify a minimum rating.
    region: 'us',
};

const { places } = await Place.searchByText(request);
index.js

• textQuery প্যারামিটার দিয়ে সার্চ করার জন্য টেক্সট কোয়েরি বা ফোন নম্বর নির্দিষ্ট করুন।
• ক্যামেল কেসে কমা দিয়ে আলাদা করা এক বা একাধিক ডেটা ফিল্ড নির্দিষ্ট করতে fields প্যারামিটার (প্রয়োজনীয়) ব্যবহার করুন।
• শুধুমাত্র নির্দিষ্ট ধরনের ফলাফল পেতে includedType প্যারামিটার ব্যবহার করুন।
• নির্দিষ্ট অঞ্চলের জন্য আপনার টেক্সট সার্চ ফলাফলকে পক্ষপাতদুষ্ট বা সীমাবদ্ধ করতে locationBias বা locationRestriction ব্যবহার করুন।

প্রপার্টির সম্পূর্ণ তালিকা দেখুন।

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

ফলাফল Place অবজেক্টের একটি তালিকা হিসেবে দেখানো হয়, যেখান থেকে আপনি জায়গার বিবরণ পেতে পারেন।

উদাহরণ

নিচের উদাহরণটি প্রদত্ত কোয়েরি টেক্সট সহ searchByText-কে কল করে এবং তারপরে ফলাফল দেখানোর জন্য ক্লিক করা যায় এমন মার্কার সহ একটি ম্যাপ পপুলেট করে।

TypeScript

let map: google.maps.Map;
let markers: Record<string, google.maps.marker.AdvancedMarkerElement> = {};
let infoWindow: google.maps.InfoWindow;

async function init() {
    const [{ Map, InfoWindow }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    const center = { lat: 37.4161493, lng: -122.0812166 };
    map = new Map(document.getElementById('map')!, {
        center,
        zoom: 11,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    const textInput = document.getElementById('text-input') as HTMLInputElement;
    const textInputButton = document.getElementById(
        'text-input-button'
    ) as HTMLButtonElement;
    const card = document.getElementById('text-input-card')!;
    map.controls[ControlPosition.TOP_LEFT].push(card);

    textInputButton.addEventListener('click', () => {
        void findPlaces(textInput.value);
    });

    textInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            void findPlaces(textInput.value);
        }
    });

    infoWindow = new InfoWindow();
}

async function findPlaces(query: string) {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
    ]);

    const request = {
        textQuery: query,
        fields: ['displayName', 'location', 'businessStatus'],
        includedType: '', // Restrict query to a specific type (leave blank for any).
        useStrictTypeFiltering: true,
        locationRestriction: map.getBounds(),
        isOpenNow: true,
        language: 'en-US',
        maxResultCount: 8,
        minRating: 1, // Specify a minimum rating.
        region: 'us',
    };

    const { places } = await Place.searchByText(request);

    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary('core');
        const bounds = new LatLngBounds();

        // First remove all existing markers.
        for (const id in markers) {
            markers[id].map = null;
        }
        markers = {};

        // Loop through and get all the results.
        places.forEach((place: google.maps.places.Place) => {
            const marker = new AdvancedMarkerElement({
                map,
                position: place.location,
                title: place.displayName,
                gmpClickable: true,
            });
            markers[place.id] = marker;

            marker.addEventListener('gmp-click', () => {
                map.panTo(place.location!);
                updateInfoWindow(place.displayName!, place.id, marker);
            });

            if (place.location != null) {
                bounds.extend(place.location);
            }
        });

        map.fitBounds(bounds);
    } else {
        console.log('No results');
    }
}

// Helper function to create an info window.
function updateInfoWindow(
    title: string | Element | null,
    content: string | Element | null,
    anchor: google.maps.marker.AdvancedMarkerElement
) {
    infoWindow.setContent(content);
    infoWindow.setHeaderContent(title);
    infoWindow.open({
        map,
        anchor,
        shouldFocus: false,
    });
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

let map;
let markers = {};
let infoWindow;

async function init() {
    const [{ Map, InfoWindow }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    const center = { lat: 37.4161493, lng: -122.0812166 };
    map = new Map(document.getElementById('map'), {
        center,
        zoom: 11,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    const textInput = document.getElementById('text-input');
    const textInputButton = document.getElementById('text-input-button');
    const card = document.getElementById('text-input-card');
    map.controls[ControlPosition.TOP_LEFT].push(card);

    textInputButton.addEventListener('click', () => {
        void findPlaces(textInput.value);
    });

    textInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            void findPlaces(textInput.value);
        }
    });

    infoWindow = new InfoWindow();
}

async function findPlaces(query) {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
    ]);

    const request = {
        textQuery: query,
        fields: ['displayName', 'location', 'businessStatus'],
        includedType: '', // Restrict query to a specific type (leave blank for any).
        useStrictTypeFiltering: true,
        locationRestriction: map.getBounds(),
        isOpenNow: true,
        language: 'en-US',
        maxResultCount: 8,
        minRating: 1, // Specify a minimum rating.
        region: 'us',
    };

    const { places } = await Place.searchByText(request);

    if (places.length) {
        const { LatLngBounds } = await google.maps.importLibrary('core');
        const bounds = new LatLngBounds();

        // First remove all existing markers.
        for (const id in markers) {
            markers[id].map = null;
        }
        markers = {};

        // Loop through and get all the results.
        places.forEach((place) => {
            const marker = new AdvancedMarkerElement({
                map,
                position: place.location,
                title: place.displayName,
                gmpClickable: true,
            });
            markers[place.id] = marker;

            marker.addEventListener('gmp-click', () => {
                map.panTo(place.location);
                updateInfoWindow(place.displayName, place.id, marker);
            });

            if (place.location != null) {
                bounds.extend(place.location);
            }
        });

        map.fitBounds(bounds);
    } else {
        console.log('No results');
    }
}

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

void init();
index.js

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

#text-input-card {
    width: 25%;
    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: large;
    font-weight: bold;
}

#text-input {
    width: 100%;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

#text-input-button {
    display: inline-block;
    margin-top: 0.5rem;
    width: auto;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background-color: #2563eb;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    text-align: center;
}
style.css

HTML

<html>
    <head>
        <title>Text Search</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>
        <div id="text-input-card">
            <input
                type="text"
                id="text-input"
                placeholder="Search for a place" />
            <input type="button" id="text-input-button" value="Search" />
        </div>
        <div id="map"></div>
    </body>
</html>
index.html