Maps Demo Key পান: Maps Demo Key-এর সাহায্যে কোনও খরচ ছাড়াই বাছাই করা Maps JavaScript API এবং Places UI Kit ফিচার ব্যবহার করে দেখুন—কোনও বিলিং তথ্য প্রয়োজন নেই।

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

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

আপনার ব্যবহারের জন্য সঠিক কম্পোনেন্ট বেছে নিন:

জায়গার বিবরণ এলিমেন্ট বেছে নেওয়া জায়গার খোলা থাকার সময়, ওয়েবসাইট ও রিভিউয়ের মতো বিবরণ দেখায়। এটি Essentials টিয়ারে বিল করা হয়।
উন্নত জায়গার বিবরণ এলিমেন্ট জায়গার বিবরণ এলিমেন্টকে আরও উন্নত করে, যার ফলে আপনি অ্যাকশন বোতাম কনফিগার করতে এবং রিভিউ ও মিডিয়াতে সার্চ ও ফিল্টার করার বিকল্প প্রয়োগ করতে পারবেন। এটি Pro টিয়ারে বিল করা হয়।

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

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

প্রপার্টির বিভিন্ন সেট কীভাবে জায়গার বিবরণ এলিমেন্টের চেহারাকে প্রভাবিত করবে তা কল্পনা করতে কাস্টমাইজেশন টুল ব্যবহার করুন এবং 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-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-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-content-config এলিমেন্ট বন্ধ করা হয়েছে। gmp-place-content-config-এর মধ্যে কন্টেন্ট এলিমেন্ট নেস্ট করার পরিবর্তে, সেগুলি সরাসরি gmp-place-details এলিমেন্টে যোগ করুন, যেমনটি আগের উদাহরণে দেখানো হয়েছে। gmp-place-content-config ব্যবহার করে এমন আগে থেকে থাকা কোড কাজ করা চালিয়ে যায়, তবে এলিমেন্টে যদি কন্টেন্ট এলিমেন্টও সরাসরি চিলড্রেন হিসেবে থাকে, তাহলে gmp-place-content-config উপেক্ষা করা হয়।

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

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();index.js

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;
}style.css

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>index.html

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

JSFiddle.net

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

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

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 যোগ করুন। এইসব এলিমেন্টের মধ্যে কিছু এলিমেন্ট কন্টেন্ট-নির্দিষ্ট অ্যাট্রিবিউট ব্যবহার করে আরও কনফিগার করা যেতে পারে।

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

বন্ধ করা হয়েছে: gmp-place-content-config এলিমেন্ট বন্ধ করা হয়েছে। পরিবর্তে, সরাসরি gmp-place-details-compact এলিমেন্টে কন্টেন্ট এলিমেন্ট যোগ করুন।

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

উল্লম্ব ওরিয়েন্টেশনে 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>index.html

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

এই উদাহরণে দেখানো হয়েছে যে কীভাবে 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();index.js

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;
}style.css

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>index.html

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

JSFiddle.net

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

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

জনপ্রিয় সময়গুলি

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

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

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

CSS

HTML

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

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

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

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

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

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

CSS

HTML

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