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

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

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

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

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

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

ম্যাপে জায়গার বিবরণ দেখাতে, HTML পৃষ্ঠায় gmp-map এলিমেন্টে gmp-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-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-details এলিমেন্টের মাধ্যমে দেখানো নির্দিষ্ট জায়গার কন্টেন্ট নিয়ন্ত্রণ করতে পারবেন। এর জন্য আপনাকে চাইল্ড এলিমেন্ট নেস্ট করতে হবে যাতে জায়গার বিবরণ বেছে নেওয়া ও কনফিগার করা যায়, যেমন এই উদাহরণে দেখানো হয়েছে: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="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-details>

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

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

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

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

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

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

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

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

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

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

// 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-এর সাথে কনফিগার করা হয়েছে যা horizontal-এ সেট করা আছে। একটি অতিরিক্ত অ্যাট্রিবিউট, truncation-preferred, নির্দিষ্ট কন্টেন্টকে র‌্যাপ করার পরিবর্তে এক লাইনে ফিট করার জন্য ট্রাঙ্কেট করে। জায়গা বেছে নেওয়ার জন্য gmp-place-details-compact এলিমেন্টে একটি চাইল্ড এলিমেন্ট, gmp-place-details-place-request, রয়েছে। এটি Place অবজেক্ট, প্লেস আইডি অথবা কোনও জায়গার রিসোর্স নাম হতে পারে। 

  <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-details-compact এলিমেন্টের মাধ্যমে দেখানো নির্দিষ্ট জায়গার কন্টেন্ট নিয়ন্ত্রণ করতে পারবেন। এর জন্য আপনাকে চাইল্ড এলিমেন্ট নেস্ট করতে হবে যাতে জায়গার বিবরণ বেছে নেওয়া ও কনফিগার করা যায়, যেমন এই স্নিপেটে দেখানো হয়েছে: 

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-details-compact>

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

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

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

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

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

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

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

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