জায়গার বিবরণের এলিমেন্ট

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

প্লেস বিবরণ এলিমেন্ট ও প্লেস বিবরণ কম্প্যাক্ট এলিমেন্ট হল HTML এলিমেন্ট যা কোনও জায়গার বিবরণ রেন্ডার করে:

Places Details এলিমেন্টের চেহারা বিভিন্ন প্রপার্টির সেট কীভাবে প্রভাবিত করবে তা ভিজ্যুয়ালাইজ করতে কাস্টমাইজেশন টুল ব্যবহার করুন এবং HTML/CSS, Kotlin/XML-এ কোড অ্যাক্সেস করুন, এবং Swift.

জায়গার বিবরণ এলিমেন্ট

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

এতে PlaceDetailsElement সম্পূর্ণ খোলা থাকার সময় সহ বিভিন্ন ধরনের কন্টেন্ট এলিমেন্ট, ওয়েবসাইট, ফোন নম্বর, AI-পরিচালিত সারসংক্ষেপ এডিটোরিয়াল সারসংক্ষেপ, ধরন-নির্দিষ্ট হাইলাইট, রিভিউ, AI-পরিচালিত রিভিউয়ের সারসংক্ষেপ, প্লাস কোড ও ফিচার তালিকা থাকে।

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

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

কন্টেন্ট কনফিগার করা

আপনি নেস্ট করা gmp-place-content-config এলিমেন্ট ব্যবহার করে gmp-place-details এলিমেন্ট দ্বারা দেখানো নির্দিষ্ট জায়গার কন্টেন্ট নিয়ন্ত্রণ করতে পারবেন। এর মাধ্যমে জায়গার বিবরণ বেছে নিতে ও কনফিগার করতে পারবেন, যেমনটি এই উদাহরণে দেখানো হয়েছে: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
            </gmp-place-content-config>
        </gmp-place-details>

gmp-place-content-config এলিমেন্টেই একাধিক চাইল্ড কন্টেন্ট এলিমেন্ট থাকে এবং প্রতিটি এলিমেন্ট সংশ্লিষ্ট জায়গার বিবরণ বেছে নিয়ে দেখায়: gmp-place-address জায়গার ঠিকানা বেছে নেয়, gmp-place-price জায়গার প্রাইস লেভেল ইত্যাদি বেছে নেয়। এলিমেন্ট gmp-place-summary ও gmp-place-review-summary জায়গা ও তার রিভিউয়ের AI-চালিত সারসংক্ষেপ প্রদান করে। চাইল্ড এলিমেন্টের ক্রম অপ্রাসঙ্গিক, কারণ বেছে নেওয়া বিবরণ সবসময় আগে থেকে নির্ধারিত ক্রমে রেন্ডার করা হয়।

কন্টেন্ট-নির্দিষ্ট অ্যাট্রিবিউট ব্যবহার করে এইসব এলিমেন্টের কিছু অংশ আরও কনফিগার করা যেতে পারে:

  • একটি ফটো দেখাতে gmp-place-media এলিমেন্ট ব্যবহার করা হয় এবং এতে একটি lightbox-preferred অ্যাট্রিবিউট থাকে, যেটি ক্লিক করলে ফটোটি লাইটবক্সে খোলে। লাইটবক্স ডিফল্ট হিসেবে বন্ধ থাকে।
  • ফটো সোর্স দেখাতে gmp-place-attribution এলিমেন্ট ব্যবহার করা হয়। লাইট ও ডার্ক মোডে অ্যাট্রিবিউশন টেক্সটের রঙ সেট করতে light-scheme-color ও dark-scheme-color অ্যাট্রিবিউট ব্যবহার করা হয়।

সবকটি কাজ করে এমন কন্টেন্ট এলিমেন্ট সম্পর্কে আরও তথ্য পেতে PlaceContentConfigElement রেফারেন্স ডকুমেন্টেশন দেখুন।

সহজ করার জন্য, প্লেস বিবরণ এলিমেন্টে উপলভ্য সব বিবরণ দেখাতে gmp-place-content-config এলিমেন্টের পরিবর্তে gmp-place-all-content ব্যবহার করা যেতে পারে অথবা স্ট্যান্ডার্ড কনফিগারেশন দেখাতে gmp-place-standard-content ব্যবহার করা যেতে পারে।

কেমন দেখাবে তা কনফিগার করা

gmp-place-details এলিমেন্টের সাজেস্ট করা প্রস্থের রেঞ্জ হল ২৫০px-৪০০px. প্রস্থ ২৫০ পিক্সেলের কম হলে সঠিকভাবে নাও দেখাতে পারে। আপনার অ্যাপ্লিকেশনের সাথে মানানসই উচ্চতা সেট করুন। প্রয়োজন অনুযায়ী বরাদ্দ করা স্পেসের মধ্যে স্ক্রল করার জন্য জায়গার বিবরণ এলিমেন্ট ডিজাইন করা হয়েছে।

এছাড়াও, gmp-place-details এলিমেন্টটি এলিমেন্টের রঙ ও ফন্ট কনফিগার করার জন্য বিভিন্ন কাস্টম CSS প্রপার্টিতে কাজ করে। আরও বিবরণের জন্য প্লেসেস UI কিট কাস্টম স্টাইলিং দেখুন।

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

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

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <gmp-place-address></gmp-place-address>
                        <gmp-place-rating></gmp-place-rating>
                        <gmp-place-type></gmp-place-type>
                        <gmp-place-price></gmp-place-price>
                        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                        <gmp-place-opening-hours></gmp-place-opening-hours>
                        <gmp-place-website></gmp-place-website>
                        <gmp-place-phone-number></gmp-place-phone-number>
                        <gmp-place-summary></gmp-place-summary>
                        <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                        <gmp-place-review-summary></gmp-place-review-summary>
                        <gmp-place-reviews></gmp-place-reviews>
                        <gmp-place-feature-list></gmp-place-feature-list>
                    </gmp-place-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>

জায়গার বিবরণের কম্প্যাক্ট এলিমেন্ট

ম্যাপে কোনও মার্কারের উপর ক্লিক করে, 'জায়গার বিবরণ' কমপ্যাক্ট এলিমেন্টে সেই জায়গার বিবরণ দেখুন।

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

নিম্নলিখিত স্নিপেটে, gmp-place-details-compact-এর সাথে orientation কনফিগার করা আছে এবং orientation-এর মান horizontal হিসেবে সেট করা আছে। একটি অতিরিক্ত অ্যাট্রিবিউট, truncation-preferred, মোড়ানোর পরিবর্তে এক লাইনে ফিট করার জন্য নির্দিষ্ট কন্টেন্ট সংক্ষিপ্ত করে। gmp-place-details-compact এলিমেন্টে জায়গা বেছে নেওয়ার জন্য gmp-place-details-place-request চাইল্ড এলিমেন্ট থাকে। এটি প্লেস অবজেক্ট, একটি প্লেস আইডি বা প্লেসের রিসোর্স নাম হতে পারে। 

  <gmp-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

কন্টেন্ট কনফিগার করা

আপনি নেস্ট করা gmp-place-content-config এলিমেন্ট ব্যবহার করে gmp-place-details-compact এলিমেন্ট দ্বারা দেখানো নির্দিষ্ট জায়গার কন্টেন্ট নিয়ন্ত্রণ করতে পারবেন। এর মাধ্যমে জায়গার বিবরণ বেছে নিতে ও কনফিগার করতে পারবেন, যেমনটি এই স্নপেটে দেখানো হয়েছে: 

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-type></gmp-place-type>
    <gmp-place-price></gmp-place-price>
    <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
    <gmp-place-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>

gmp-place-content-config এলিমেন্টের মধ্যে একাধিক চাইল্ড কন্টেন্ট এলিমেন্ট থাকে এবং প্রতিটি এলিমেন্ট দেখানোর জন্য সংশ্লিষ্ট জায়গার বিবরণ বেছে নেয়। চাইল্ড এলিমেন্টের ক্রম অপ্রাসঙ্গিক, কারণ বেছে নেওয়া বিবরণ সবসময় আগে থেকে নির্ধারিত ক্রমেই রেন্ডার করা হয়। এইসব এলিমেন্টের কিছু অংশ কন্টেন্ট-নির্দিষ্ট অ্যাট্রিবিউট ব্যবহার করে আরও কনফিগার করা যেতে পারে।

সবকটি কাজ করে এমন কন্টেন্ট এলিমেন্ট সম্পর্কে আরও তথ্য পেতে PlaceContentConfigElement রেফারেন্স ডকুমেন্টেশন দেখুন।

সহজভাবে বলতে গেলে, Place Details Compact এলিমেন্টে উপলভ্য সব বিবরণ দেখাতে, gmp-place-content-config এলিমেন্টের পরিবর্তে gmp-place-all-content ব্যবহার করা যেতে পারে অথবা স্ট্যান্ডার্ড কনফিগারেশন দেখাতে gmp-place-standard-content ব্যবহার করা যেতে পারে।

কেমন দেখাবে তা কনফিগার করা

উল্লম্ব ওরিয়েন্টেশনে gmp-place-details-compact এলিমেন্টের জন্য সাজেস্ট করা প্রস্থের রেঞ্জ হল ১৮০ পিক্সেল-৩০০ পিক্সেল। প্রস্থ ১৬০ পিক্সেলের কম হলে সঠিকভাবে নাও দেখাতে পারে। নির্দিষ্ট উচ্চতা সেট করবেন না।

অনুভূমিকভাবে সাজানো gmp-place-details-compact এলিমেন্টের সাজেস্ট করা প্রস্থের রেঞ্জ হল ১৮০ পিক্সেল-৫০০ পিক্সেল। প্রস্থ ১৬০ পিক্সেলের কম হলে সঠিকভাবে নাও দেখাতে পারে। ৩৫০ পিক্সেলের কম প্রস্থ হলে, থাম্বনেল ছবি দেখানো হবে না। নির্দিষ্ট উচ্চতা সেট করবেন না।

এছাড়াও, gmp-place-details-compact এলিমেন্ট, এলিমেন্টের রঙ ও ফন্ট কনফিগার করার জন্য বিভিন্ন কাস্টম CSS প্রপার্টিতে কাজ করে। আরও বিবরণের জন্য প্লেসেস UI কিট কাস্টম স্টাইলিং দেখুন।

মনে রাখবেন, কোনও তথ্য উইন্ডোতে 'স্থান সম্পর্কিত বিবরণ কম্প্যাক্ট' এলিমেন্ট যোগ করা হলে, কাস্টম স্টাইলিং অবশ্যই সরাসরি gmp-place-details-compact এলিমেন্টে প্রয়োগ করতে হবে। এর কারণ হল, তথ্য উইন্ডো হল ম্যাপের শ্যাডো DOM-এর অংশ, তাই এক্সটার্নাল CSS স্টাইল প্রয়োগ করা যাবে না। 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

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

এই উদাহরণে, একটি InfoWindow ও একটি AdvancedMarkerElement ব্যবহার করে প্রোগ্রাম্যাটিক উপায়ে ম্যাপে PlaceDetailsCompactElement যোগ করার পদ্ধতি দেখানো হয়েছে।

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

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>