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

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

পূর্বশর্ত

স্থান স্বয়ংসম্পূর্ণ (প্রিভিউ) ব্যবহার করতে, আপনাকে অবশ্যই আপনার Google ক্লাউড প্রকল্পে "Places API" সক্ষম করতে হবে এবং আপনার বুটস্ট্র্যাপ লোডারে বিটা চ্যানেল ( v: "beta" ) নির্দিষ্ট করতে হবে। বিস্তারিত জানার জন্য শুরু করুন দেখুন।

নতুন কি

প্লেস স্বয়ংসম্পূর্ণ (প্রিভিউ) নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

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

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

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

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

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

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

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

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

// Request needed libraries.
//@ts-ignore
await google.maps.importLibrary("places");

// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);

index.js

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

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

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

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

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.ts

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

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.js

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

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

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

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

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

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

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

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

স্থান অনুসন্ধান ম্যাপ সীমানা সীমাবদ্ধ

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

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

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

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

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

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

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

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

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

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

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

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

সমর্থিত প্রকারের একটি সম্পূর্ণ তালিকার জন্য, সারণী 3 দেখুন: স্বয়ংসম্পূর্ণ অনুরোধের জায়গায় সমর্থিত প্রকারগুলি ।

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

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

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

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    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.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});
index.js

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

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

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

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

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

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

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

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

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

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

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

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

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

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

স্বয়ংসম্পূর্ণ উপাদান

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

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

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

  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  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.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

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

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

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

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

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

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

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        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,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

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

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    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,
    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. 
 */
#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>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

প্লেস পিকার কম্পোনেন্ট ব্যবহার করুন

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

একটি কাস্টম প্লেস পিকার কম্পোনেন্টের জন্য এম্বেডযোগ্য কোড তৈরি করতে প্লেস পিকার কনফিগারেশন ব্যবহার করুন, তারপর এটিকে রপ্তানি করুন জনপ্রিয় ফ্রেমওয়ার্ক যেমন রিঅ্যাক্ট এবং অ্যাঙ্গুলার বা কোনো ফ্রেমওয়ার্কের সাথে ব্যবহার করার জন্য।

,

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

পূর্বশর্ত

স্থান স্বয়ংসম্পূর্ণ (প্রিভিউ) ব্যবহার করতে, আপনাকে অবশ্যই আপনার Google ক্লাউড প্রকল্পে "Places API" সক্ষম করতে হবে এবং আপনার বুটস্ট্র্যাপ লোডারে বিটা চ্যানেল ( v: "beta" ) নির্দিষ্ট করতে হবে। বিস্তারিত জানার জন্য শুরু করুন দেখুন।

নতুন কি

প্লেস স্বয়ংসম্পূর্ণ (প্রিভিউ) নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

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

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

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

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

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

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

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

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

// Request needed libraries.
//@ts-ignore
await google.maps.importLibrary("places");

// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);

index.js

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

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

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

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

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.ts

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

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
index.js

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

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

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

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

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

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

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

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

স্থান অনুসন্ধান ম্যাপ সীমানা সীমাবদ্ধ

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

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

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

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

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

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

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

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

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

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

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

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

সমর্থিত প্রকারের একটি সম্পূর্ণ তালিকার জন্য, সারণী 3 দেখুন: স্বয়ংসম্পূর্ণ অনুরোধের জায়গায় সমর্থিত প্রকারগুলি ।

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

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

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

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    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.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});
index.js

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

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

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

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

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

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

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

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

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

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

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

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

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

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

স্বয়ংসম্পূর্ণ উপাদান

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

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

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

  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  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.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

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

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

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

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

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

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

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        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,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

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

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    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,
    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. 
 */
#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>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

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

প্লেস পিকার কম্পোনেন্ট ব্যবহার করুন

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

একটি কাস্টম প্লেস পিকার কম্পোনেন্টের জন্য এম্বেডযোগ্য কোড তৈরি করতে প্লেস পিকার কনফিগারেশন ব্যবহার করুন, তারপর এটিকে রপ্তানি করুন জনপ্রিয় ফ্রেমওয়ার্ক যেমন রিঅ্যাক্ট এবং অ্যাঙ্গুলার বা কোনো ফ্রেমওয়ার্কের সাথে ব্যবহার করার জন্য।