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

Advanced Place Details Element এবং Advanced Place Details Compact Element হল 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-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-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>

Advanced Place Details Compact Element (প্রিভিউ)

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

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 অবজেক্ট, একটি প্লেস আইডি, অথবা কোনও জায়গার রিসোর্স নাম হতে পারে। 

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