عنصر جزئیات مکان و عنصر فشرده جزئیات مکان، عناصر HTML هستند که جزئیات یک مکان را رندر می‌کنند:
- عنصر
PlaceDetailsElementاز تمام داده‌های قابل نمایش Place پشتیبانی می‌کند و می‌تواند شامل چندین عکس باشد. - عنصر
PlaceDetailsCompactElementبه گونه‌ای طراحی شده است که حداقل فضا را اشغال کند و مجموعه‌ای مختصر از اطلاعات مربوط به یک مکان، شامل نام، آدرس، رتبه‌بندی و غیره را نمایش دهد. همچنین ممکن است شامل یک عکس واحد باشد.
عنصر جزئیات مکان
برای مشاهده جزئیات مکان در عنصر جزئیات مکان، روی یک نشانگر روی نقشه کلیک کنید.
عنصر PlaceDetailsElement از طیف گسترده‌ای از عناصر محتوا، از جمله ساعات کاری کامل، وب‌سایت، شماره تلفن، خلاصه سرمقاله، نکات برجسته مربوط به هر نوع، نقدها، کد پلاس و لیست ویژگی‌ها پشتیبانی می‌کند.
برای نمایش جزئیات مکان روی نقشه، یک عنصر gmp-place-details به عنصر gmp-map در صفحه HTML اضافه کنید. یک عنصر فرزند، gmp-place-details-place-request ، برای انتخاب مکان اضافه کنید. این عنصر می‌تواند یک شیء Place ، یک شناسه place یا نام منبع 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-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است که با کلیک روی آن، عکس در یک lightbox باز می‌شود. Lightbox به طور پیش‌فرض غیرفعال است. - عنصر
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 ، ۲۵۰ پیکسل تا ۴۰۰ پیکسل است. عرض‌های کمتر از ۲۵۰ پیکسل ممکن است به درستی نمایش داده نشوند. ارتفاع را متناسب با برنامه خود تنظیم کنید. عنصر 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'); 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 جزئیات یک مکان انتخاب شده را با استفاده از حداقل فضا نمایش می‌دهد. این عنصر می‌تواند در یک پنجره اطلاعات که مکانی را روی نقشه برجسته می‌کند، در یک تجربه رسانه‌های اجتماعی مانند اشتراک‌گذاری یک مکان در یک چت، به عنوان پیشنهادی برای انتخاب مکان فعلی شما یا در یک مقاله رسانه‌ای برای ارجاع به مکان در نقشه‌های گوگل مفید باشد. PlaceDetailsCompactElement می‌تواند نام، آدرس، رتبه‌بندی، نوع، قیمت، نماد دسترسی، وضعیت باز بودن و یک عکس واحد را نمایش دهد. این عنصر می‌تواند به صورت افقی یا عمودی، بسته به انتخاب ویژگی orientation نمایش داده شود.
در قطعه کد زیر، gmp-place-details-compact درون یک عنصر gmp-map قرار گرفته است که orientation روی horizontal تنظیم شده است. یک ویژگی اضافی، truncation-preferred ، محتوای خاصی را کوتاه می‌کند تا در یک خط قرار گیرد، به جای اینکه در یک خط قرار گیرد. عنصر gmp-place-details-compact شامل یک عنصر فرزند، gmp-place-details-place-request ، برای انتخاب مکان است. این می‌تواند یک شیء Place ، یک شناسه place یا نام منبع 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 در جهت عمودی ۱۸۰px-300px است. عرض‌های کمتر از ۱۶۰px ممکن است به درستی نمایش داده نشوند. ارتفاع ثابتی تعیین نکنید.
محدوده عرض توصیه شده برای عنصر gmp-place-details-compact در جهت افقی ۱۸۰px-500px است. عرض‌های کمتر از ۱۶۰px ممکن است به درستی نمایش داده نشوند. در عرض‌های کمتر از ۳۵۰px، تصویر بندانگشتی نشان داده نمی‌شود. ارتفاع ثابتی تعیین نکنید.
عنصر gmp-place-details-compact همچنین از انواع ویژگی‌های CSS سفارشی برای پیکربندی رنگ‌ها و فونت‌های عنصر پشتیبانی می‌کند. برای جزئیات بیشتر به بخش Places UI Kit Custom Styling مراجعه کنید.
یک نمونه کد کامل را ببینید
این مثال اضافه کردن یک 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();
سی‌اس‌اس
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>