উন্নত জায়গার বিবরণ সংক্রান্ত এলিমেন্ট

উন্নত জায়গার বিবরণ এলিমেন্ট এবং উন্নত জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট হল HTML এলিমেন্ট যা কোনও জায়গার বিবরণ দেখায়:

উন্নত জায়গার বিবরণ এলিমেন্ট এবং উন্নত জায়গার বিবরণ কম্প্যাক্ট এলিমেন্ট, উভয়ই একই উন্নত ফিচার অফার করে, যার মধ্যে অ্যাকশন বোতাম কাস্টমাইজ করা, জায়গার নাম বাদ দেওয়া এবং রিভিউ ও মিডিয়া ফিল্টার করা অন্তর্ভুক্ত।

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

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

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

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

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

<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-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <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-popular-times></gmp-place-popular-times>
                <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-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

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

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

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

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

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

gmp-place-popular-times এলিমেন্ট ওভারভিউ ট্যাবে খোলা থাকার সময়ের নিচে জনপ্রিয় সময় ও ব্যস্ততার তথ্য দেখায়:

  • সপ্তাহের প্রতিটি দিনের জন্য একটি ইন্টার‌্যাক্টিভ ঘণ্টাভিত্তিক ব্যস্ততার হিস্টোগ্রাম, যা ডিফল্ট হিসেবে জায়গার বর্তমান স্থানীয় দিন দেখায়।
  • বর্তমান ব্যস্ততার স্ট্যাটাস (উপলভ্য থাকলে লাইভ ব্যস্ততা, যেমন "লাইভ: স্বাভাবিকের চেয়ে বেশি ব্যস্ত" বা সাধারণত ঐতিহাসিক ব্যস্ততা) এবং বর্তমান ঘণ্টার জন্য সাধারণত অপেক্ষা করার সময়।
  • বেছে নেওয়া দিনে সবচেয়ে বেশি কতক্ষণ অপেক্ষা করতে হবে, উপলভ্য থাকলে।

আপনি যখন gmp-advanced-place-details এলিমেন্টে gmp-place-all-content বা gmp-place-standard-content ব্যবহার করেন, তখন জনপ্রিয় সময় অটোমেটিক যোগ হয়ে যায় অথবা আপনি gmp-advanced-place-details-এর সরাসরি চাইল্ড হিসেবে gmp-place-popular-times যোগ করতে পারেন। gmp-place-popular-times এলিমেন্টটি শুধুমাত্র সম্পূর্ণ AdvancedPlaceDetailsElement এবং PlaceDetailsElement-এ কাজ করে ( AdvancedPlaceDetailsCompactElement বা PlaceDetailsCompactElement-এ নয়)।

সব জায়গার ক্ষেত্রে খুব ভিড়ের সময় সংক্রান্ত ডেটা উপলভ্য থাকে না। কোনও জায়গার জন্য জনপ্রিয় সময়ের ডেটা উপলভ্য না থাকলে, কোনও সমস্যা ছাড়াই বিভাগটি বাদ দেওয়া হয়। জনপ্রিয় সময়ের ডেটা রেন্ডার করা হয়েছে কিনা তা চেক করতে, পেরেন্ট এলিমেন্ট gmp-load ইভেন্ট ফায়ার করার পরে PlacePopularTimesElement-এর শুধু-পড়ার-জন্য rendered প্রপার্টি ব্যবহার করুন: 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const popularTimesElement = detailsElement.querySelector('gmp-place-popular-times');

detailsElement.addEventListener('gmp-load', () => {
  console.log('Popular times rendered:', popularTimesElement.rendered);
});

আপনি --gmp-popular-times-bar-color, --gmp-popular-times-bar-current-hour-color এবং --gmp-popular-times-bar-current-hour-live-color CSS প্রপার্টি ব্যবহার করে জনপ্রিয় সময়ের হিস্টোগ্রাম বার এবং লাইভ ব্যস্ততার সূচকের রঙ কাস্টমাইজ করতে পারবেন। আরও জানতে Places UI Kit কাস্টম স্টাইলিং দেখুন।

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

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

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

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

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${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();

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

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-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.setAttribute(
                'place',
                `places/${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",
                v: "beta"
            });
        </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-advanced-place-details>
                    <gmp-place-details-place-request
                        place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

                    <gmp-place-name></gmp-place-name>
                    <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-advanced-place-details>
            </div>
        </div>
    </body>
</html>

স্যাম্পেল ব্যবহার করে দেখুন

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

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

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

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

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

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

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

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

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

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

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

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

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

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

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

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

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

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

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

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

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

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-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 && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            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",
                v: "beta"
            });
        </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-advanced-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-advanced-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="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <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-advanced-place-details-compact>
    </body>
</html>

স্যাম্পেল ব্যবহার করে দেখুন

উন্নত ফিচার

অ্যাকশন বোতাম কাস্টমাইজ করুন

উন্নত জায়গার বিবরণ কম্পোনেন্টের সরাসরি চাইল্ড হিসেবে অ্যাকশন বোতাম যোগ করুন। স্ট্যান্ডার্ড নেভিগেশনাল কানেকশনের জন্য <gmp-place-link> ব্যবহার করুন এবং স্পষ্টভাবে action অ্যাট্রিবিউট উল্লেখ করুন। আপনি চাইলে slot অ্যাট্রিবিউট নির্দিষ্ট করতে পারেন। সঠিক পূর্বনির্ধারিত অ্যাকশন হল open-website, open-directions, open-map এবং call। slot অ্যাট্রিবিউট বাদ দেওয়া হলে, ডিফল্ট হিসেবে action-main সেট করা হয়। 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

ভিজ্যুয়াল অ্যাট্রিবিউশন সংক্রান্ত প্রয়োজনীয়তা

গুরুত্বপূর্ণ: কাস্টম অ্যাকশন বোতাম Google ছাড়া অন্য কোনও থার্ড-পার্টির সাথে ব্যবহারকারীর তথ্য শেয়ার করলে, আপনাকে অবশ্যই ব্যবহারকারীকে তা স্পষ্টভাবে জানাতে হবে। ভিজ্যুয়াল অ্যাট্রিবিউশন সংক্রান্ত প্রয়োজনীয়তা দেখুন।

জায়গার নাম বাদ দিন

জায়গার নাম বাদ দিতে, আপনার কাস্টম কন্টেন্ট থেকে <gmp-place-name> এলিমেন্টটি বাদ দিন। 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

রিভিউ ও মিডিয়া ফিল্টার করুন

এই কোড স্যাম্পেল শুধুমাত্র সেইসব মিডিয়া ও রিভিউ দেখায় যেখানে "কফি" উল্লেখ করা আছে।

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

এছাড়াও, আপনি জাভাস্ক্রিপ্ট ব্যবহার করে প্রদত্ত সার্চ কোয়েরির সাথে ম্যাচ করা আইটেমের মোট সংখ্যা উদ্ধার করতে পারবেন। এর জন্য আপনাকে searchMediaCount এবং searchReviewsCount প্রপার্টি পড়তে হবে। এইসব প্রপার্টি অ্যাক্সেস করার আগে আপনাকে gmp-load ইভেন্টের জন্য অপেক্ষা করতে হবে। 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});