এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

স্থান তালিকা উপাদান

এই পণ্য বা বৈশিষ্ট্যটি পরীক্ষামূলক (প্রি-GA)। প্রাক-GA পণ্য এবং বৈশিষ্ট্যগুলির সীমিত সমর্থন থাকতে পারে এবং প্রাক-GA পণ্য এবং বৈশিষ্ট্যগুলির পরিবর্তনগুলি অন্যান্য প্রাক-GA সংস্করণগুলির সাথে সামঞ্জস্যপূর্ণ নাও হতে পারে। প্রাক-GA অফারগুলি Google মানচিত্র প্ল্যাটফর্ম পরিষেবার নির্দিষ্ট শর্তাবলী দ্বারা আচ্ছাদিত। আরও তথ্যের জন্য, লঞ্চ পর্যায়ের বিবরণ দেখুন।

PlaceListElement হল একটি HTML উপাদান যা একটি তালিকায় একটি স্থান অনুসন্ধানের ফলাফল রেন্ডার করে। gmp-place-list উপাদান কনফিগার করার দুটি উপায় আছে:

একটি কাছাকাছি স্থান অনুসন্ধান থেকে অনুসন্ধান ফলাফল রেন্ডার করতে উইজেট কনফিগার করার জন্য কাছাকাছি অনুসন্ধানের অনুরোধ করুন ৷
একটি স্থান পাঠ্য অনুসন্ধান থেকে অনুসন্ধান ফলাফল রেন্ডার করতে উইজেট কনফিগার করতে পাঠ্য অনুরোধ দ্বারা অনুসন্ধান করুন ৷

কাছাকাছি অনুরোধ অনুসন্ধান করুন

নীচের উদাহরণটি কাছাকাছি অনুসন্ধানের প্রতিক্রিয়া হিসাবে স্থান তালিকা উপাদানটিকে রেন্ডার করে৷ সরলতার জন্য, শুধুমাত্র তিনটি স্থানের ধরন তালিকাভুক্ত করা হয়েছে: ক্যাফে, রেস্তোরাঁ এবং ইভি চার্জিং স্টেশন৷ যখন একটি ফলাফল নির্বাচন করা হয়, নির্বাচিত স্থানের জন্য স্থানের বিবরণ দেখানো একটি তথ্য উইন্ডো প্রদর্শিত হয়। মানচিত্রে স্থান তালিকা উপাদান যোগ করতে, নিম্নলিখিত স্নিপেটে দেখানো হিসাবে HTML পৃষ্ঠায় একটি gmp-place-list উপাদান যোগ করুন:

<gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
  <div class="overlay" slot="control-inline-start-block-start">
    <div class="controls">
      <select name="types" class="type-select">
        <option value="">Select a place type</option>
        <option value="cafe">Cafe</option>
        <option value="restaurant">Restaurant</option>
        <option value="electric_vehicle_charging_station">
          EV charging station
        </option>
      </select>
    </div>
    <div class="list-container">
      <gmp-place-list selectable></gmp-place-list>
    </div>
  </div>
  <gmp-place-details size="large"></gmp-place-details>
</gmp-map>index.html

ইন্টারঅ্যাকশনের জন্য পৃষ্ঠার উপাদান নির্বাচন করতে বেশ কিছু querySelector কল ব্যবহার করা হয়:

const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const typeSelect = document.querySelector(".type-select");
const placeDetails = document.querySelector("gmp-place-details");
let marker = document.querySelector('gmp-advanced-marker');index.js

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

typeSelect.addEventListener("change", (event) => {
    // First remove all existing markers.
    for (marker in markers) {
        markers[marker].map = null;
    }
    markers = {};
    if (typeSelect.value) {
        placeList.configureFromSearchNearbyRequest({
            locationRestriction: getContainingCircle(map.innerMap.getBounds()),
            includedPrimaryTypes: [typeSelect.value],
        }).then(addMarkers);
        // Handle user selection in Place Details.
        placeList.addEventListener("gmp-placeselect", ({ place }) => {
            markers[place.id].click();
        });
    }
});index.js

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

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

const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const typeSelect = document.querySelector(".type-select");
const placeDetails = document.querySelector("gmp-place-details");
let marker = document.querySelector('gmp-advanced-marker');
let markers = {};
let infoWindow;
let mapCenter;
async function initMap() {
    await google.maps.importLibrary("places");
    const { InfoWindow } = await google.maps.importLibrary("maps");
    const { spherical } = await google.maps.importLibrary("geometry");
    infoWindow = new google.maps.InfoWindow;
    function getContainingCircle(bounds) {
        const diameter = spherical.computeDistanceBetween(bounds.getNorthEast(), bounds.getSouthWest());
        const calculatedRadius = diameter / 2;
        const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error.
        return { center: bounds.getCenter(), radius: cappedRadius };
    }
    findCurrentLocation();
    map.innerMap.setOptions({
        mapTypeControl: false,
        clickableIcons: false,
    });
    typeSelect.addEventListener("change", (event) => {
        // First remove all existing markers.
        for (marker in markers) {
            markers[marker].map = null;
        }
        markers = {};
        if (typeSelect.value) {
            placeList.configureFromSearchNearbyRequest({
                locationRestriction: getContainingCircle(map.innerMap.getBounds()),
                includedPrimaryTypes: [typeSelect.value],
            }).then(addMarkers);
            // Handle user selection in Place Details.
            placeList.addEventListener("gmp-placeselect", ({ place }) => {
                markers[place.id].click();
            });
        }
    });
}
async function addMarkers() {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { LatLngBounds } = await google.maps.importLibrary("core");
    const bounds = new LatLngBounds();
    if (placeList.places.length > 0) {
        placeList.places.forEach((place) => {
            let marker = new AdvancedMarkerElement({
                map: map.innerMap,
                position: place.location
            });
            markers[place.id] = marker;
            bounds.extend(place.location);
            marker.addListener('gmp-click', (event) => {
                if (infoWindow.isOpen) {
                    infoWindow.close();
                }
                placeDetails.configureFromPlace(place);
                placeDetails.style.width = "350px";
                infoWindow.setOptions({
                    content: placeDetails
                });
                infoWindow.open({
                    anchor: marker,
                    map: map.innerMap
                });
                placeDetails.addEventListener('gmp-load', () => {
                    map.innerMap.fitBounds(place.viewport, { top: 500, left: 400 });
                });
            });
            map.innerMap.setCenter(bounds.getCenter());
            map.innerMap.fitBounds(bounds);
        });
    }
}
async function findCurrentLocation() {
    const { LatLng } = await google.maps.importLibrary("core");
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
            const pos = new LatLng(position.coords.latitude, position.coords.longitude);
            map.innerMap.panTo(pos);
            map.innerMap.setZoom(14);
        }, () => {
            console.log('The Geolocation service failed.');
            map.innerMap.setZoom(14);
        });
    }
    else {
        console.log("Your browser doesn't support geolocation");
        map.innerMap.setZoom(14);
    }
}
initMap();index.js

সিএসএস

html,
  body {
      height: 100%;
      margin: 0;
  }

  body {
      display: flex;
      flex-direction: column;
      font-family: Arial, Helvetica, sans-serif;
  }

  h1 {
      font-size: 16px;
      text-align: center;
  }

  gmp-map {
      box-sizing: border-box;
      height: 600px;
  }

  .overlay {
      position: relative;
      top: 40px;
      margin: 20px;
      width: 400px;
  }

  .controls {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      height: 32px;
  }

  .search-button {
      background-color: #5491f5;
      color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100px;
      cursor: pointer;
  }

  .type-select {
      border: 1px solid #ccc;
      border-radius: 5px;
      flex-grow: 1;
      padding: 0 10px;
  }

  .list-container {
      height: 400px;
      overflow: auto;
      border-radius: 10px;
  }

  gmp-place-list {
      background-color: #fff;
  }style.css

এইচটিএমএল

<!DOCTYPE html>
<html>
  <head>
    <title>Place List Nearby Search with Google Maps</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="-37.813,144.963" zoom="10" map-id="DEMO_MAP_ID">
      <div class="overlay" slot="control-inline-start-block-start">
        <div class="controls">
          <select name="types" class="type-select">
            <option value="">Select a place type</option>
            <option value="cafe">Cafe</option>
            <option value="restaurant">Restaurant</option>
            <option value="electric_vehicle_charging_station">
              EV charging station
            </option>
          </select>
        </div>
        <div class="list-container">
          <gmp-place-list selectable></gmp-place-list>
        </div>
      </div>
      <gmp-place-details size="large"></gmp-place-details>
    </gmp-map>
    <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: "alpha"});</script>
  </body>
</html>index.html

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

JSFiddle.net

পাঠ্য অনুরোধ দ্বারা অনুসন্ধান করুন

এই উদাহরণটি একটি হার্ড-কোডেড পাঠ্য অনুসন্ধানের প্রতিক্রিয়া হিসাবে স্থান তালিকা উপাদানটিকে রেন্ডার করে। যখন একটি ফলাফল নির্বাচন করা হয়, নির্বাচিত স্থানের জন্য স্থানের বিবরণ দেখানো একটি তথ্য উইন্ডো প্রদর্শিত হয়। মানচিত্রে স্থান তালিকা উপাদান যোগ করতে, HTML পৃষ্ঠায় একটি gmp-place-list উপাদান যোগ করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

<gmp-map center="37.395641,-122.077627" zoom="10" map-id="DEMO_MAP_ID">
  <div class="overlay" slot="control-inline-start-block-start">
    <div class="list-container">
      <gmp-place-list selectable></gmp-place-list>
    </div>
  </div>
  <gmp-place-details size="large"></gmp-place-details>
</gmp-map>index.html

const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const placeDetails = document.querySelector("gmp-place-details");
let marker = document.querySelector('gmp-advanced-marker');index.js

যখন অনুসন্ধান ফাংশনটি পৃষ্ঠা লোডের উপর চালানো হয়, তখন configureFromSearchByTextRequest কল করা হয় এবং স্থান তালিকা উপাদানটি ফলাফলগুলিকে রেন্ডার করে (মার্কারগুলি addMarkers সহায়ক ফাংশনে যোগ করা হয়)। নিম্নলিখিত স্নিপেট ফাংশনের জন্য কোড দেখায়:

async function searchByTextRequest(textQuery) {
    if (textQuery) {
        placeList.configureFromSearchByTextRequest({
            locationRestriction: bounds,
            includedType: "restaurant",
            textQuery: textQuery,
        }).then(addMarkers);
        // Handle user selection in Place Details.
        placeList.addEventListener("gmp-placeselect", ({ place }) => {
            markers[place.id].click();
        });
    }
}index.js

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

নিম্নলিখিত উদাহরণটি configureFromSearchNearbyRequest ব্যবহার করে কাছাকাছি অনুসন্ধানের উপর ভিত্তি করে স্থানগুলি প্রদর্শন করতে স্থান তালিকা UI উপাদান ব্যবহার করে এবং নির্বাচনের পরে স্থানের বিশদ দেখানোর জন্য মানচিত্রে ক্লিকযোগ্য মার্কার যুক্ত করে৷

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

const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const placeDetails = document.querySelector("gmp-place-details");
let marker = document.querySelector('gmp-advanced-marker');
let markers = {};
let infoWindow;
let center = { lat: 37.395641, lng: -122.077627 };
let bounds;
async function initMap() {
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const { Place } = await google.maps.importLibrary("places");
    // Set bounds for location restriction.
    bounds = new google.maps.LatLngBounds({ lat: 37.37808200917261, lng: -122.13741583377849 }, { lat: 37.416676154341324, lng: -122.02261728794109 });
    infoWindow = new google.maps.InfoWindow;
    // Center the map
    let adjustedCenter = offsetLatLngRight(center, -0.005);
    map.innerMap.panTo(adjustedCenter);
    map.innerMap.setZoom(14);
    map.innerMap.setOptions({
        mapTypeControl: false,
        clickableIcons: false,
    });
    searchByTextRequest('tacos in Mountain View');
}
async function searchByTextRequest(textQuery) {
    if (textQuery) {
        placeList.configureFromSearchByTextRequest({
            locationRestriction: bounds,
            includedType: "restaurant",
            textQuery: textQuery,
        }).then(addMarkers);
        // Handle user selection in Place Details.
        placeList.addEventListener("gmp-placeselect", ({ place }) => {
            markers[place.id].click();
        });
    }
}
async function addMarkers() {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { LatLngBounds } = await google.maps.importLibrary("core");
    const bounds = new LatLngBounds();
    if (placeList.places.length > 0) {
        placeList.places.forEach((place) => {
            let marker = new AdvancedMarkerElement({
                map: map.innerMap,
                position: place.location,
            });
            markers[place.id] = marker;
            bounds.extend(place.location);
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.addListener('gmp-click', (event) => {
                if (infoWindow.isOpen) {
                    infoWindow.close();
                }
                placeDetails.configureFromPlace(place);
                placeDetails.style.width = "350px";
                infoWindow.setOptions({
                    content: placeDetails
                });
                infoWindow.open({
                    anchor: marker,
                    map: map.innerMap
                });
                placeDetails.addEventListener('gmp-load', () => {
                    map.innerMap.fitBounds(place.viewport, { top: 400, left: 400 });
                });
            });
            map.innerMap.setCenter(bounds.getCenter());
            map.innerMap.fitBounds(bounds);
        });
    }
}
// Helper function to offset the map center.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng + longitudeOffset;
    return new google.maps.LatLng(latLng.lat, newLng);
}
initMap();index.js

সিএসএস

html,
  body {
      height: 100%;
      margin: 0;
  }

  body {
      display: flex;
      flex-direction: column;
      font-family: Arial, Helvetica, sans-serif;
  }

  h1 {
      font-size: 16px;
      text-align: center;
  }

  gmp-map {
      box-sizing: border-box;
      height: 500px;
  }

  .overlay {
      position: relative;
      top: 20px;
      margin: 20px;
      width: 400px;
  }

  .controls {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      height: 32px;
  }

  .search-button {
      background-color: #5491f5;
      color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100px;
      cursor: pointer;
  }

  .type-select {
      border: 1px solid #ccc;
      border-radius: 5px;
      flex-grow: 1;
      padding: 0 10px;
  }

  .list-container {
      height: 400px;
      overflow: auto;
      border-radius: 10px;
  }

  gmp-place-list {
      background-color: #fff;
  }style.css

এইচটিএমএল

<!DOCTYPE html>
<html>
  <head>
    <title>Place List Text Search with Google Maps</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="37.395641,-122.077627" zoom="10" map-id="DEMO_MAP_ID">
      <div class="overlay" slot="control-inline-start-block-start">
        <div class="list-container">
          <gmp-place-list selectable></gmp-place-list>
        </div>
      </div>
      <gmp-place-details size="large"></gmp-place-details>
    </gmp-map>
    <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: "alpha"});</script>
  </body>
</html>index.html

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

JSFiddle.net