স্থান বিবরণ উপাদান

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

Place Details Element এবং Place Details Compact Element হলো এমন HTML এলিমেন্ট যা কোনো স্থানের বিবরণ প্রদর্শন করে:

  • PlaceDetailsElement সকল দর্শনযোগ্য স্থানের ডেটা সমর্থন করে এবং এতে একাধিক ছবি অন্তর্ভুক্ত থাকতে পারে।
  • PlaceDetailsCompactElement টি ন্যূনতম স্থান ব্যবহার করার জন্য এবং কোনো স্থান সম্পর্কে নাম, ঠিকানা, রেটিং ইত্যাদি সংক্ষিপ্ত তথ্য প্রদর্শনের জন্য ডিজাইন করা হয়েছে। এতে একটিমাত্র ছবিও অন্তর্ভুক্ত থাকতে পারে।

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

স্থানের বিবরণ উপাদান

মানচিত্রে কোনো মার্কারে ক্লিক করলে, একটি 'প্লেস ডিটেইলস এলিমেন্ট'-এ সেটির স্থানের বিবরণ দেখতে পাবেন।

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

মানচিত্রে স্থানের বিবরণ প্রদর্শন করতে, 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-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 এলিমেন্টগুলো যথাক্রমে স্থানটি এবং এর রিভিউগুলোর একটি এআই-চালিত সারাংশ প্রদান করে। চাইল্ড এলিমেন্টগুলোর ক্রম অপ্রাসঙ্গিক, কারণ নির্বাচিত বিবরণগুলো সর্বদা একটি নির্দিষ্ট পূর্বনির্ধারিত ক্রমে রেন্ডার করা হয়।

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

  • gmp-place-media এলিমেন্টটি একটিমাত্র ছবি প্রদর্শনের জন্য ব্যবহৃত হয় এবং এতে একটি lightbox-preferred অ্যাট্রিবিউট অন্তর্ভুক্ত রয়েছে, যা ক্লিক করলে ছবিটিকে একটি লাইটবক্সে খোলে। ডিফল্টরূপে লাইটবক্স নিষ্ক্রিয় থাকে।
  • gmp-place-attribution এলিমেন্টটি ছবির উৎস প্রদর্শন করতে ব্যবহৃত হয়। light-scheme-color এবং dark-scheme-color অ্যাট্রিবিউটগুলো লাইট এবং ডার্ক মোডে অ্যাট্রিবিউশন টেক্সটের রঙ নির্ধারণ করতে ব্যবহৃত হয়।

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

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

চেহারা কনফিগার করুন

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

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

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

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

// 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();

সিএসএস 

/* 
 * 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;
}

এইচটিএমএল 

<!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 ন্যূনতম স্থান ব্যবহার করে একটি নির্বাচিত স্থানের বিবরণ প্রদর্শন করে। এটি একটি তথ্য উইন্ডোতে মানচিত্রে কোনো স্থান হাইলাইট করার জন্য, চ্যাটে অবস্থান শেয়ার করার মতো সোশ্যাল মিডিয়া অভিজ্ঞতায়, আপনার বর্তমান অবস্থান নির্বাচন করার পরামর্শ হিসেবে, অথবা গুগল ম্যাপসে স্থানটির উল্লেখ করার জন্য কোনো মিডিয়া আর্টিকেলে উপযোগী হতে পারে। PlaceDetailsCompactElement নাম, ঠিকানা, রেটিং, ধরন, মূল্য, অ্যাক্সেসিবিলিটি আইকন, খোলা অবস্থা এবং একটি একক ছবি প্রদর্শন করতে পারে। orientation অ্যাট্রিবিউট দ্বারা নির্বাচিত অনুযায়ী এটি অনুভূমিক বা উল্লম্বভাবে প্রদর্শিত হতে পারে।

নিম্নলিখিত কোড স্নিপেটে, gmp-place-details-compact 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 রেফারেন্স ডকুমেন্টেশন দেখুন।

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

চেহারা কনফিগার করুন

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

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

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

মনে রাখবেন যে, যদি Place Details Compact এলিমেন্টটি কোনো ইনফো উইন্ডোতে যোগ করা হয়, তাহলে কাস্টম স্টাইলিং সরাসরি gmp-place-details-compact এলিমেন্টটিতে প্রয়োগ করতে হবে। এর কারণ হলো, ইনফো উইন্ডোটি ম্যাপের শ্যাডো ডোম (shadow 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();

সিএসএস 

/* 
 * 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;
}

এইচটিএমএল 

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