ঘোষণা: নতুন বেসম্যাপ স্টাইলিং শীঘ্রই গুগল ম্যাপ প্ল্যাটফর্মে আসছে। মানচিত্র স্টাইলিংয়ের এই আপডেটে একটি নতুন ডিফল্ট রঙ প্যালেট, আধুনিক পিন এবং মানচিত্রের অভিজ্ঞতা এবং ব্যবহারযোগ্যতার উন্নতি অন্তর্ভুক্ত রয়েছে। সমস্ত মানচিত্রের শৈলী মার্চ 2025-এ স্বয়ংক্রিয়ভাবে আপডেট হবে। প্রাপ্যতা এবং আগে কীভাবে নির্বাচন করবেন সে সম্পর্কে আরও তথ্যের জন্য, Google Maps প্ল্যাটফর্মের জন্য নতুন মানচিত্রের শৈলী দেখুন।

এই পৃষ্ঠাটি 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="2" map-id="DEMO_MAP_ID">
  <div class="overlay" slot="control-inline-start-block-start">
    <div class="controls">
      <input type="text" class="query-input" />
      <button class="search-button">Search</button>
    </div>
    <div class="list-container">
      <gmp-place-list selectable></gmp-place-list>
    </div>
  </div>
  <gmp-place-details size="large"></gmp-place-details>
</gmp-map>

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

const map = document.querySelector('gmp-map');
const placeList = document.querySelector('gmp-place-list');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');

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

searchButton.addEventListener('click', () => {
  for (marker in markers) {
    markers[marker].map = null;
  }
  markers = {};
  if (queryInput.value) {
    placeList
        .configureFromSearchByTextRequest({
          textQuery: queryInput.value,
          locationBias: map.innerMap.getBounds()
        })
        .then(addMarkers);
  }
});

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

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

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

const map = document.querySelector('gmp-map');
const placeList = document.querySelector('gmp-place-list');
const queryInput = document.querySelector('.query-input');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');
let markers = {};
let infowindow = {};
async function init() {
    await google.maps.importLibrary('places');
    const {
        InfoWindow
    } = await google.maps.importLibrary('maps');
    infowindow = new InfoWindow();
    // Call geolocation helper function to center map.
    findCurrentLocation();
    map.innerMap.setOptions({
        mapTypeControl: false,
        clickableIcons: false,
    });
    // Handle click on search button.
    searchButton.addEventListener('click', () => {
        for (marker in markers) {
            markers[marker].map = null;
        }
        markers = {};
        if (queryInput.value) {
            placeList
                .configureFromSearchByTextRequest({
                    textQuery: queryInput.value,
                    locationBias: map.innerMap.getBounds()
                })
                .then(addMarkers);
        }
    });
    // Handle the user's selection on the Place List.
    placeList.addEventListener('gmp-placeselect', ({
        place
    }) => {
        markers[place.id].click();
    });
}
// Helper function to add markers.
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
            });
            marker.metadata = {
                id: place.id
            };
            markers[place.id] = marker;
            bounds.extend(place.location);
            marker.addListener('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: placeDetails.offsetHeight || 206,
                            left: 200
                        });
                });
            });
            map.innerMap.setCenter(bounds.getCenter());
            map.innerMap.fitBounds(bounds);
        });
    }
}
// Helper function to center map on current device location.
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(16);
            },
            () => {
                console.log('The Geolocation service failed.');
                map.innerMap.setZoom(16);
            },
        );
    } else {
        console.log('Your browser doesn\'t support geolocation');
        map.innerMap.setZoom(16);
    }
}

init();

সিএসএস

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;
    padding: 0 20px 20px;
}
.overlay {
    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;
}
.query-input {
    border: 1px solid #ccc;
    border-radius: 5px;
    flex-grow: 1;
    padding: 10px;
}
.list-container {
    height: 600px;
    overflow: auto;
    border-radius: 10px;
}
gmp-place-list {
    background-color: #fff;
}
gmp-place-details {
    width: 320px;
}

এইচটিএমএল

<!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">

  </head>
  <body>
    <h1>Place List Text Search with Google Maps</h1>
    <gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
        <div class="overlay" slot="control-inline-start-block-start">
          <div class="controls">
            <input type="text" class="query-input" />
            <button class="search-button">Search</button>
          </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: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>

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

নীচের উদাহরণটি কাছাকাছি অনুসন্ধানের প্রতিক্রিয়া হিসাবে স্থান তালিকা উপাদানটিকে রেন্ডার করে৷ সরলতার জন্য, শুধুমাত্র তিনটি স্থানের ধরন তালিকাভুক্ত করা হয়েছে: ক্যাফে, রেস্তোরাঁ এবং ইভি চার্জিং স্টেশন৷ যখন একটি ফলাফল নির্বাচন করা হয়, নির্বাচিত স্থানের জন্য স্থানের বিবরণ দেখানো একটি তথ্য উইন্ডো প্রদর্শিত হয়। মানচিত্রে স্থান তালিকা উপাদান যোগ করতে, নিম্নলিখিত স্নিপেটে দেখানো হিসাবে 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>
    <button class="search-button">Search</button>
  </div>
  <div class="list-container">
    <gmp-place-list selectable></gmp-place-list>
  </div>
</div>

<gmp-place-details size="large"></gmp-place-details>
</gmp-map>

const map = document.querySelector("gmp-map");
const placeList = document.querySelector('gmp-place-list');
const typeSelect = document.querySelector('.type-select');
const searchButton = document.querySelector('.search-button');
const placeDetails = document.querySelector('gmp-place-details');

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

searchButton.addEventListener('click', () => {
  for (marker in markers) {
    markers[marker].map = null;
  }
  markers = {};
  if (typeSelect.value) {
    placeList
        .configureFromSearchNearbyRequest({
          locationRestriction: getContainingCircle(map.innerMap.getBounds()),
          includedPrimaryTypes: [typeSelect.value],
        })
        .then(addMarkers);
    placeList.addEventListener('gmp-placeselect', ({place}) => {
      markers[place.id].click();
    });
  }
});

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

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

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

const map = document.querySelector("gmp-map");
const placeList = document.querySelector("gmp-place-list");
const typeSelect = document.querySelector(".type-select");
const searchButton = document.querySelector(".search-button");
const placeDetails = document.querySelector("gmp-place-details");
let markers = {};
let infowindow = {};
let mapCenter;

async function init() {
    await google.maps.importLibrary("places");
    const {InfoWindow} = await google.maps.importLibrary("maps");
    const { spherical } = await google.maps.importLibrary("geometry");

    infowindow = new InfoWindow();

    function getContainingCircle(bounds) {
        const diameter = spherical.computeDistanceBetween(
            bounds.getNorthEast(),
            bounds.getSouthWest()
        );
        return { center: bounds.getCenter(), radius: diameter / 2 };
    }

    findCurrentLocation();

    map.innerMap.setOptions({
        mapTypeControl: false,
        clickableIcons: false,
    });

    searchButton.addEventListener("click", () => {
        for(marker in markers){
            markers[marker].map = null;
        }
        markers = {};

        if (typeSelect.value) {
            placeList.configureFromSearchNearbyRequest({
                locationRestriction: getContainingCircle(
                    map.innerMap.getBounds()
                ),
                includedPrimaryTypes: [typeSelect.value],
            }).then(addMarkers);

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

            marker.metadata = {id: place.id};
            markers[place.id] = marker;
            bounds.extend(place.location);
            // pinMarkers.push(marker);

            marker.addListener('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: placeDetails.offsetHeight || 206, left: 200});
                });

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

}

init();

সিএসএস

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;
      padding: 0 20px 20px;
  }

  .overlay {
      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;
  }

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

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

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

এইচটিএমএল

<!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">
  </head>
  <body>
    <h1>Place List Nearby Search with Google Maps</h1>
    <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>
          <button class="search-button">Search</button>
        </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: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>