স্বয়ংসম্পূর্ণ উইজেট রাখুন

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

প্লেস অটোকম্পলিট উইজেট একটি টেক্সট ইনপুট ফিল্ড তৈরি করে, একটি UI পিক লিস্টে প্লেস ভবিষ্যদ্বাণী সরবরাহ করে এবং ব্যবহারকারীর নির্বাচনের প্রতিক্রিয়ায় প্লেস বিশদ প্রদান করে। আপনার ওয়েব পৃষ্ঠায় একটি সম্পূর্ণ স্বয়ংসম্পূর্ণ অটোকম্পলিট ইউজার ইন্টারফেস এম্বেড করতে প্লেস অটোকম্পলিট উইজেট ব্যবহার করুন।

পূর্বশর্ত

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

নতুন কী?

প্লেস অটোকম্পলিট নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

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

একটি স্বয়ংক্রিয় সম্পূর্ণ উইজেট যোগ করুন

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

একটি ওয়েব পৃষ্ঠায় একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করুন

একটি ওয়েব পৃষ্ঠায় Autocomplete উইজেট যোগ করতে, একটি নতুন google.maps.places.PlaceAutocompleteElement তৈরি করুন এবং নিম্নলিখিত উদাহরণে দেখানো পৃষ্ঠায় এটি যুক্ত করুন:

টাইপস্ক্রিপ্ট 

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

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

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

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

একটি মানচিত্রে একটি স্বয়ংক্রিয় সম্পূর্ণ উইজেট যোগ করুন

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

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

টাইপস্ক্রিপ্ট 

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

// 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();
});
index.ts

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

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// 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();
});
index.js

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

স্বয়ংক্রিয়ভাবে সম্পূর্ণ ভবিষ্যদ্বাণী সীমাবদ্ধ করুন

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

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

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

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

এক বা একাধিক নির্দিষ্ট দেশে স্থান অনুসন্ধান সীমাবদ্ধ করতে, নিম্নলিখিত স্নিপেটে দেখানো দেশের কোড(গুলি) নির্দিষ্ট করতে includedRegionCodes প্রপার্টি ব্যবহার করুন:

const pac = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

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

স্থান অনুসন্ধানকে মানচিত্রের সীমানায় সীমাবদ্ধ করতে, locationRestrictions বৈশিষ্ট্য ব্যবহার করে সীমানা যোগ করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

ম্যাপ বাউন্ডে সীমাবদ্ধ করার সময়, বাউন্ড পরিবর্তন হলে আপডেট করার জন্য একজন শ্রোতা যোগ করতে ভুলবেন না:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

locationRestriction অপসারণ করতে, এটি null এ সেট করুন।

পক্ষপাতমূলক স্থান অনুসন্ধান ফলাফল

locationBias প্রোপার্টি ব্যবহার করে এবং একটি ব্যাসার্ধ অতিক্রম করে, এখানে দেখানো হয়েছে, Bias অনুসন্ধান ফলাফলগুলিকে একটি বৃত্ত এলাকায় স্থাপন করে:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

locationBias মুছে ফেলার জন্য, এটি null এ সেট করুন।

স্থান অনুসন্ধানের ফলাফল নির্দিষ্ট ধরণের মধ্যে সীমাবদ্ধ রাখুন

includedPrimaryTypes প্রপার্টি ব্যবহার করে এবং এখানে দেখানো এক বা একাধিক প্রকার উল্লেখ করে স্থান অনুসন্ধানের ফলাফল নির্দিষ্ট ধরণের স্থানের মধ্যে সীমাবদ্ধ করুন:

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

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

স্থানের বিবরণ পান

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

টাইপস্ক্রিপ্ট 

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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);
});
index.ts

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

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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);
});
index.js

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

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

পরবর্তী উদাহরণে শ্রোতা স্থানের তথ্য অনুরোধ করে এবং এটি একটি মানচিত্রে প্রদর্শন করে।

টাইপস্ক্রিপ্ট 

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

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

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

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

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

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // 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);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});
index.js

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

উদাহরণ মানচিত্র

এই বিভাগে এই পৃষ্ঠায় প্রদর্শিত নমুনা মানচিত্রের সম্পূর্ণ কোড রয়েছে।

স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়া উপাদান

এই উদাহরণটি একটি ওয়েব পৃষ্ঠায় একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করে এবং প্রতিটি নির্বাচিত স্থানের ফলাফল প্রদর্শন করে।

টাইপস্ক্রিপ্ট 

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}

initMap();
index.ts

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

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}
initMap();
index.js

সিএসএস 

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

style.css

এইচটিএমএল 

<html>
    <head>
        <title>Place Autocomplete element</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>
index.html

নমুনা চেষ্টা করুন

স্বয়ংক্রিয়ভাবে সম্পূর্ণ মানচিত্র

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

টাইপস্ক্রিপ্ট 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    infoWindow = new google.maps.InfoWindow({});

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

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

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      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,
    });
}

initMap();
index.ts

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

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // 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);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        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,
    });
}
initMap();
index.js

সিএসএস 

/* 
 * 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: large;
    font-weight: bold;
}

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

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

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

style.css

এইচটিএমএল 

<html>
    <head>
        <title>Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

নমুনা চেষ্টা করুন

স্বয়ংক্রিয় (নতুন) অপ্টিমাইজেশন

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

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

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

খরচ অপ্টিমাইজেশনের সেরা অনুশীলন

মৌলিক খরচ অপ্টিমাইজেশন

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

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

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

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

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

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

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

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

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

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

না, শুধুমাত্র ঠিকানা এবং অবস্থান প্রয়োজন।

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

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

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

হাঁ

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

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

না

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

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

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

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

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

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

আপনার ব্যবহারকারীদের কম অক্ষরের মাধ্যমে তাদের কাঙ্ক্ষিত ভবিষ্যদ্বাণী পেতে সাহায্য করার জন্য পারফর্ম্যান্সের সেরা অনুশীলনগুলি ব্যবহার করার কথা বিবেচনা করুন।

  1. খরচের জন্য, Google Maps প্ল্যাটফর্মের মূল্য তালিকা দেখুন।

কর্মক্ষমতা সংক্রান্ত সর্বোত্তম অনুশীলন

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

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

অবস্থান পক্ষপাত

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

অবস্থান সীমাবদ্ধকরণ

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

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