عنصر Place Details و Place Details Compact Element عناصر HTML هستند که جزئیات یک مکان را ارائه می کنند:
-
PlaceDetailsElementاز تمام داده‌های قابل مشاهده مکان پشتیبانی می‌کند و ممکن است شامل چندین عکس باشد. -
PlaceDetailsCompactElementطوری طراحی شده است که کمترین فضا را مصرف کند و مجموعه ای مختصر از اطلاعات یک مکان، از جمله نام، آدرس، رتبه بندی و غیره را نمایش دهد. همچنین ممکن است شامل یک عکس باشد.
عنصر جزئیات مکان
روی یک نشانگر روی نقشه کلیک کنید تا جزئیات مکان آن را در یک عنصر جزئیات مکان ببینید.
PlaceDetailsElement طیف گسترده ای از عناصر محتوا را پشتیبانی می کند، از جمله ساعات کاری کامل، وب سایت، شماره تلفن، خلاصه سرمقاله، نکات برجسته نوع خاص، نظرات، کد به اضافه، و لیست ویژگی ها.
برای نمایش جزئیات مکان روی نقشه، یک عنصر gmp-place-details را به عنصر gmp-map در صفحه HTML اضافه کنید. یک عنصر فرزند، gmp-place-details-place-request برای انتخاب مکان اضافه کنید. این می تواند یک شی مکان ، یک شناسه مکان یا نام منبع مکان در قالب "places/{place_id}" باشد:
<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-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-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 جایگزین کرد تا تمام جزئیات موجود در عنصر Place Details را نشان دهد، یا با gmp-place-standard-content برای نمایش یک پیکربندی استاندارد جایگزین شود.
ظاهر را پیکربندی کنید
محدوده عرض توصیه شده برای عنصر gmp-place-details 250px-400px است. عرض کمتر از 250 پیکسل ممکن است به درستی نمایش داده نشود. ارتفاع را متناسب با برنامه خود تنظیم کنید. عنصر Place Details برای حرکت در فضای اختصاص داده شده در صورت نیاز طراحی شده است.
عنصر gmp-place-details همچنین از انواع ویژگی های CSS سفارشی برای پیکربندی رنگ ها و فونت های عنصر پشتیبانی می کند. برای جزئیات بیشتر به استایل سفارشی کیت UI Places مراجعه کنید.
نمونه کد کامل را ببینید
جاوا اسکریپت
// 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();
CSS
/* * 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; }
HTML
<!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 Maps مفید باشد. 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-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 است. عرض های کمتر از 160 پیکسل ممکن است به درستی نمایش داده نشوند. ارتفاع ثابت را تعیین نکنید.
محدوده عرض توصیه شده برای عنصر gmp-place-details-compact در جهت افقی 180px-500px است. عرض های کمتر از 160 پیکسل ممکن است به درستی نمایش داده نشوند. در عرض کمتر از 350 پیکسل، تصویر کوچک نشان داده نخواهد شد. ارتفاع ثابت را تعیین نکنید.
عنصر gmp-place-details-compact نیز از انواع ویژگی‌های CSS سفارشی برای پیکربندی رنگ‌ها و فونت‌های عنصر پشتیبانی می‌کند. برای جزئیات بیشتر به استایل سفارشی کیت UI Places مراجعه کنید.
نمونه کد کامل را ببینید
این مثال اضافه کردن PlaceDetailsCompactElement به نقشه را به صورت برنامه‌ریزی با استفاده از AdvancedMarkerElement نشان می‌دهد.
جاوا اسکریپت
// 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();
CSS
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)); }
HTML
<!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>