স্থানের বিশদ উপাদান এবং স্থানের বিবরণ কমপ্যাক্ট উপাদান হল HTML উপাদান যা একটি স্থানের জন্য বিশদ রেন্ডার করে:
-
PlaceDetailsElementসমস্ত ভিজ্যুয়ালাইজযোগ্য স্থান ডেটা সমর্থন করে এবং একাধিক ফটো অন্তর্ভুক্ত করতে পারে। -
PlaceDetailsCompactElementন্যূনতম স্থান ব্যবহার করার জন্য ডিজাইন করা হয়েছে এবং নাম, ঠিকানা, রেটিং ইত্যাদি সহ একটি স্থান সম্পর্কে তথ্যের একটি সংক্ষিপ্ত সেট প্রদর্শন করার জন্য ডিজাইন করা হয়েছে। এতে একটি একক ছবিও থাকতে পারে।
স্থান বিবরণ উপাদান
একটি স্থানের বিশদ উপাদানে এর স্থানের বিশদ বিবরণ দেখতে মানচিত্রে একটি চিহ্নিতকারীতে ক্লিক করুন৷
PlaceDetailsElement সম্পূর্ণ খোলার সময়, ওয়েবসাইট, ফোন নম্বর, সম্পাদকীয় সারাংশ, টাইপ-নির্দিষ্ট হাইলাইট, পর্যালোচনা, প্লাস কোড এবং বৈশিষ্ট্য তালিকা সহ বিষয়বস্তুর উপাদানগুলির একটি বিস্তৃত পরিসর সমর্থন করে৷
মানচিত্রে স্থানের বিশদ বিবরণ প্রদর্শন করতে, HTML পৃষ্ঠায় gmp-map উপাদানটিতে একটি gmp-place-details উপাদান যোগ করুন। স্থান নির্বাচন করতে একটি শিশু উপাদান, gmp-place-details-place-request অন্তর্ভুক্ত করুন। এটি 'places/{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><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-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-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অ্যাট্রিবিউট ব্যবহার করা হয় আলো এবং গাঢ় মোডে অ্যাট্রিবিউশন টেক্সটের রঙ সেট করতে।
PlaceContentConfigElement রেফারেন্স ডকুমেন্টেশন দেখুন। সরলতার জন্য, gmp-place-content-config উপাদানটিকে gmp-place-all-content দিয়ে প্রতিস্থাপিত করা যেতে পারে প্লেস ডিটেইলস এলিমেন্টে উপলব্ধ সমস্ত বিবরণ দেখানোর জন্য, অথবা একটি স্ট্যান্ডার্ড কনফিগারেশন প্রদর্শনের জন্য gmp-place-standard-content দিয়ে।
চেহারা কনফিগার করুন
gmp-place-details উপাদানের জন্য প্রস্তাবিত প্রস্থের পরিসর হল 250px-400px। 250px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। আপনার আবেদন অনুসারে উচ্চতা সেট করুন। স্থানের বিবরণ উপাদানটি প্রয়োজন অনুসারে বরাদ্দকৃত স্থানের মধ্যে স্ক্রোল করার জন্য ডিজাইন করা হয়েছে।
gmp-place-details উপাদানটি উপাদানের রঙ এবং ফন্ট কনফিগার করতে বিভিন্ন ধরনের কাস্টম CSS বৈশিষ্ট্য সমর্থন করে। আরও বিস্তারিত জানার জন্য স্থান UI কিট কাস্টম স্টাইলিং দেখুন।
সম্পূর্ণ কোড উদাহরণ দেখুন
জাভাস্ক্রিপ্ট
// 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();
সিএসএস
/* * 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; }
এইচটিএমএল
<!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>স্থান বিবরণ কমপ্যাক্ট উপাদান
স্থানের বিবরণ কমপ্যাক্ট এলিমেন্টে স্থানের বিশদ বিবরণ দেখতে মানচিত্রে একটি চিহ্নিতকারীতে ক্লিক করুন।
PlaceDetailsCompactElement ন্যূনতম স্থান ব্যবহার করে একটি নির্বাচিত স্থানের জন্য বিশদ রেন্ডার করে। এটি একটি তথ্য উইন্ডোতে একটি মানচিত্রে একটি স্থান হাইলাইট করে, একটি সামাজিক মিডিয়া অভিজ্ঞতা যেমন একটি চ্যাটে একটি অবস্থান ভাগ করে নেওয়ার জন্য, আপনার বর্তমান অবস্থান নির্বাচন করার জন্য একটি পরামর্শ হিসাবে বা Google মানচিত্রে স্থানটি উল্লেখ করার জন্য একটি মিডিয়া নিবন্ধের মধ্যে উপযোগী হতে পারে৷ PlaceDetailsCompactElement নাম, ঠিকানা, রেটিং, প্রকার, মূল্য, অ্যাক্সেসিবিলিটি আইকন, খোলা স্থিতি এবং একটি ফটো প্রদর্শন করতে পারে৷ orientation বৈশিষ্ট্য দ্বারা নির্বাচিত হিসাবে এটি অনুভূমিকভাবে বা উল্লম্বভাবে প্রদর্শিত হতে পারে।
নিম্নলিখিত স্নিপেটে, gmp-place-details-compact একটি gmp-map উপাদানের মধ্যে নেস্ট করা হয়েছে, orientation horizontal তে সেট করা আছে। একটি অতিরিক্ত বৈশিষ্ট্য, truncation-preferred , মোড়ানোর পরিবর্তে এক লাইনে ফিট করার জন্য নির্দিষ্ট বিষয়বস্তুকে ছেঁটে দেয়। স্থান নির্বাচন করার জন্য gmp-place-details-compact এলিমেন্টে একটি চাইল্ড এলিমেন্ট, gmp-place-details-place-request থাকে। এটি 'places/{place_id}' ফরম্যাটে একটি প্লেস অবজেক্ট , একটি স্থান আইডি বা একটি স্থানের সংস্থানের নাম হতে পারে:
<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-content-config উপাদান ব্যবহার করে gmp-place-details-compact উপাদান দ্বারা প্রদর্শিত নির্দিষ্ট স্থানের বিষয়বস্তু নিয়ন্ত্রণ করতে পারেন। gmp-place-content-config উপাদানটিতেই অনেকগুলি শিশু বিষয়বস্তুর উপাদান রয়েছে এবং প্রতিটি প্রদর্শনের জন্য একটি সংশ্লিষ্ট স্থানের বিশদ নির্বাচন করে। চাইল্ড উপাদানের ক্রম অপ্রাসঙ্গিক, কারণ নির্বাচিত বিবরণ সর্বদা একটি নির্দিষ্ট পূর্বনির্ধারিত ক্রমে রেন্ডার করা হয়। এই উপাদানগুলির মধ্যে কিছু বিষয়বস্তু-নির্দিষ্ট বৈশিষ্ট্য ব্যবহার করে আরও কনফিগার করা যেতে পারে।
PlaceContentConfigElement রেফারেন্স ডকুমেন্টেশন দেখুন। সরলতার জন্য, gmp-place-content-config উপাদানটিকে gmp-place-all-content দিয়ে প্রতিস্থাপিত করা যেতে পারে প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্টে উপলব্ধ সমস্ত বিবরণ দেখানোর জন্য, অথবা একটি স্ট্যান্ডার্ড কনফিগারেশন প্রদর্শন করতে gmp-place-standard-content দিয়ে।
চেহারা কনফিগার করুন
উল্লম্ব অভিযোজনে gmp-place-details-compact উপাদানের জন্য প্রস্তাবিত প্রস্থ পরিসীমা হল 180px-300px। 160px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। একটি নির্দিষ্ট উচ্চতা সেট করবেন না।
অনুভূমিক অভিযোজনে gmp-place-details-compact উপাদানের জন্য প্রস্তাবিত প্রস্থের পরিসর হল 180px-500px। 160px এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। 350px এর কম প্রস্থে, থাম্বনেইল ছবি দেখানো হবে না। একটি নির্দিষ্ট উচ্চতা সেট করবেন না।
gmp-place-details-compact উপাদানটি উপাদানের রং এবং ফন্ট কনফিগার করতে বিভিন্ন ধরনের কাস্টম CSS বৈশিষ্ট্য সমর্থন করে। আরও বিস্তারিত জানার জন্য স্থান UI কিট কাস্টম স্টাইলিং দেখুন।
একটি সম্পূর্ণ কোড উদাহরণ দেখুন
এই উদাহরণটি একটি AdvancedMarkerElement ব্যবহার করে প্রোগ্রাম্যাটিকভাবে একটি মানচিত্রে একটি PlaceDetailsCompactElement যোগ করা দেখায়।
জাভাস্ক্রিপ্ট
// Use querySelector to select elements for interaction. const mapContainer = document.getElementById("map-container"); const placeDetails = document.querySelector("gmp-place-details-compact"); const placeDetailsRequest = document.querySelector("gmp-place-details-place-request"); let gMap; let marker; async function initMap() { const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places"); const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' }); marker = new AdvancedMarkerElement({ map: gMap }); // Hide the map type control. gMap.setOptions({ mapTypeControl: false }); // Set up map, marker, and infowindow once widget is loaded. placeDetails.style.visibility = 'visible'; placeDetails.addEventListener('gmp-load', (event) => { console.log("placeDetails initialized!"); updateMapAndMarker(); }); // Add an event listener to handle clicks. gMap.addListener("click", async (event) => { event.stop(); // Fire when the user clicks on a POI. if (event.placeId) { console.log("clicked on POI"); console.log(event.placeId); placeDetailsRequest.place = event.placeId; updateMapAndMarker(); } else { // Fire when the user clicks the map (not on a POI). console.log('No place was selected.'); } ; }); // Function to update map, marker, and infowindow based on place details const updateMapAndMarker = () => { console.log("function called"); if (placeDetails.place && placeDetails.place.location) { marker.gMap = null; let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002); gMap.panTo(adjustedCenter); gMap.setZoom(16); // Set zoom after panning if needed marker.content = placeDetails; marker.position = placeDetails.place.location; } else { console.log("else"); } }; } // Helper function to offset marker placement for better visual appearance. function offsetLatLngRight(latLng, latitudeOffset) { const newLat = latLng.lat() + latitudeOffset; return new google.maps.LatLng(newLat, latLng.lng()); } initMap();
সিএসএস
html, body { display: flex; width: 100%; height: 400px; margin: 0; } h1 { font-size: 16px; text-align: center; } #map-container { box-sizing: border-box; width: 100%; } gmp-place-details-compact { /* Sets the color for text and icons on the surface */ /* Adapts automatically to the user's system light/dark mode preference */ --gmp-mat-color-on-surface: light-dark(black, white); /* Sets the background color of the surface */ /* Adapts automatically to the user's system light/dark mode preference */ --gmp-mat-color-surface: light-dark(white, black); /* Defines the primary font stack used within the component */ --gmp-mat-font-family: Google Sans Text, sans-serif; /* Defines the style for medium body text (e.g., address, descriptions) */ --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text'); width: 360px; border: none; padding: 0; margin: 0; position: relative; transform: translate(0, calc(-20px)); } /* This creates the pointer attached to the bottom of the element. */ gmp-place-details-compact::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black)); }
এইচটিএমএল
<!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>
<div id = "map-container"></div>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details-compact>
<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>