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

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

প্লেস ডিটেইলস এলিমেন্ট এবং প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্ট হল HTML এলিমেন্ট যা একটি প্লেসের জন্য বিস্তারিত তথ্য প্রদান করে:

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

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

স্থানের বিবরণ উপাদানে স্থানের বিবরণ দেখতে মানচিত্রের একটি মার্কারে ক্লিক করুন।

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

মানচিত্রে স্থানের বিবরণ প্রদর্শনের জন্য, HTML পৃষ্ঠার gmp-map উপাদানে একটি gmp-place-details উপাদান যোগ করুন। স্থান নির্বাচন করতে একটি শিশু উপাদান, gmp-place-details-place-request অন্তর্ভুক্ত করুন। এটি একটি Place অবজেক্ট , একটি Place ID , অথবা একটি Place এর রিসোর্স নাম হতে পারে:

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html
<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-content-config এলিমেন্ট ব্যবহার করে স্থানের বিবরণ নির্বাচন এবং কনফিগার করতে, যেমনটি এই উদাহরণে দেখানো হয়েছে:

<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-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-media lightbox-preferred></gmp-place-media>
        <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

gmp-place-content-config এলিমেন্টটিতে বেশ কিছু চাইল্ড কন্টেন্ট এলিমেন্ট থাকে এবং প্রতিটি এলিমেন্ট প্রদর্শনের জন্য সংশ্লিষ্ট স্থানের বিবরণ নির্বাচন করে: PlaceAddressElement স্থানের ঠিকানা নির্বাচন করে, PlacePriceElement স্থানের মূল্য স্তর নির্বাচন করে, ইত্যাদি। চাইল্ড এলিমেন্টের ক্রম অপ্রাসঙ্গিক, কারণ নির্বাচিত বিবরণ সর্বদা একটি নির্দিষ্ট পূর্বনির্ধারিত ক্রমে রেন্ডার করা হয়।

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

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

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

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

gmp-place-details এলিমেন্টের জন্য প্রস্তাবিত প্রস্থের পরিসর হল 250px-400px। 250px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। আপনার অ্যাপ্লিকেশন অনুসারে উচ্চতা সেট করুন। 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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    (await 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 && placeDetails.place.location) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (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';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

সিএসএস 

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%;
}

h1 {
    font-size: 16px;
    text-align: center;
}

gmp-map {
    height: 500px;
}

gmp-place-details {
    border-radius: 0px;
    margin: 20px;
    width: 400px;
    height: 500px;
    margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
    min-width: 400px;
    overflow-y: none;
    overflow-x: none;
}
style.css

এইচটিএমএল 

<!doctype html>
<html>
    <head>
        <title>Click on the map to view place details</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
            <gmp-advanced-marker></gmp-advanced-marker>
        </gmp-map>
        <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>
        <script>
            ((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: 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8', v: 'weekly' });
        </script>
    </body>
</html>
index.html

স্থানের বিবরণ কম্প্যাক্ট উপাদান

একটি স্থানের বিবরণ কম্প্যাক্ট উপাদানে স্থানের বিবরণ দেখতে মানচিত্রের একটি মার্কারে ক্লিক করুন।

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

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

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <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>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

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

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

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

উল্লম্ব অভিযোজনে gmp-place-details-compact উপাদানের জন্য প্রস্তাবিত প্রস্থ পরিসীমা হল 180px-300px। 160px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। একটি নির্দিষ্ট উচ্চতা সেট করবেন না।

অনুভূমিক অবস্থানে gmp-place-details-compact উপাদানের জন্য প্রস্তাবিত প্রস্থ পরিসীমা হল 180px-500px। 160px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। 350px এর কম প্রস্থে, থাম্বনেইল চিত্রটি প্রদর্শিত হবে না। একটি নির্দিষ্ট উচ্চতা সেট করবেন না।

gmp-place-details-compact উপাদানটি উপাদানের রঙ এবং ফন্ট কনফিগার করার জন্য বিভিন্ন ধরণের কাস্টম CSS বৈশিষ্ট্য সমর্থন করে। আরও বিস্তারিত জানার জন্য Places UI Kit কাস্টম স্টাইলিং দেখুন।

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

এই উদাহরণে দেখানো হয়েছে যে 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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();
index.js

সিএসএস 

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

এইচটিএমএল 

<!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" defer></script>
        <!-- prettier-ignore -->
        <script>
      (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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