Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

عناصر جزئیات مکان

جزء مناسب را برای مورد استفاده‌تان انتخاب کنید:

عنصر جزئیات مکان جزئیاتی مانند ساعات کاری، وب‌سایت، و مرورهای مکان انتخاب‌شده را ارائه می‌دهد. در سطح Essentials صورت‌حساب صادر می‌شود.
عنصر جزئیات پیشرفته مکان «عنصر جزئیات مکان» را گسترش می‌دهد و به شما امکان می‌دهد دکمه‌های کنش را پیکربندی کنید و گزینه‌های جستجو و فیلتر کردن را برای مرورها و رسانه‌ها اعمال کنید. در سطح Pro صورت‌حساب صادر می‌شود.

«عنصر جزئیات مکان» و «عنصر فشرده جزئیات مکان» عناصر HTML هستند که جزئیات مکان را ارائه می‌دهند:

‫ PlaceDetailsElement از همه داده‌های «مکان» قابل‌تجسم پشتیبانی می‌کند و ممکن است شامل چند عکس باشد.
‫ PlaceDetailsCompactElement طوری طراحی شده است که حداقل فضا را اشغال کند و مجموعه مختصری از اطلاعات مربوط به مکان را نمایش دهد، ازجمله نام، نشانی، رده‌بندی، و غیره. همچنین ممکن است شامل یک عکس باشد.

از ابزار سفارشی‌سازی استفاده کنید تا ببینید مجموعه‌های مختلف ویژگی‌ها چگونه بر ظاهر عنصر «جزئیات مکان‌ها» تأثیر می‌گذارند و به کد در HTML/CSS،‏ Kotlin/XML، و Swift دسترسی پیدا کنید.

عنصر جزئیات جا

روی نشانگری در نقشه کلیک کنید تا جزئیات مکان آن را در «عنصر جزئیات مکان» ببینید.

‫ PlaceDetailsElement از طیف گسترده‌ای از عناصر محتوا پشتیبانی می‌کند، ازجمله ساعت کاری کامل، وب‌سایت، شماره تلفن، خلاصه با پشتیبانی هوش مصنوعی با بازگشت به خلاصه سرمقاله‌ای، نکات برجسته خاص نوع، مرورها، خلاصه مرور با پشتیبانی هوش مصنوعی، Plus Code، و فهرست‌های ویژگی.

برای نمایش جزئیات مکان روی نقشه، عنصر gmp-place-details را به عنصر gmp-map در صفحه HTML اضافه کنید. برای انتخاب مکان، عنصر فرعی gmp-place-details-place-request را اضافه کنید. این می‌تواند شیء مکان، شناسه مکان، یا نام منبع «مکان» باشد:

<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-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 به‌ترتیب خلاصه‌ای با بهره‌گیری از هوش مصنوعی از مکان و مرورهای آن ارائه می‌دهند. ترتیب عناصر فرزند مهم نیست، زیرا جزئیات انتخاب‌شده همیشه با ترتیبی ثابت و ازپیش‌تعریف‌شده ارائه می‌شوند. فقط عناصر محتوایی که اضافه می‌کنید نمایش داده می‌شود، بنابراین gmp-place-name را اضافه کنید تا نام مکان نشان داده شود.

برخی‌از این عناصر را می‌توان بااستفاده از مشخصه‌های مختص محتوا بیشتر پیکربندی کرد:

از عنصر gmp-place-media برای نمایش یک عکس استفاده می‌شود و شامل مشخصه lightbox-preferred است که با کلیک کردن روی آن، عکس در لایت‌باکس باز می‌شود. «لایت‌باکس» به‌طور پیش‌فرض غیرفعال است.
از عنصر gmp-place-attribution برای نمایش منبع عکس استفاده می‌شود. از مشخصه‌های light-scheme-color و dark-scheme-color برای تنظیم رنگ نوشتار انتساب در حالت روشن و تاریک استفاده می‌شود.

برای کسب اطلاعات بیشتر درباره همه عناصر محتوای پشتیبانی‌شده، به سند مرجع سفارشی‌سازی محتوای ابزاره مکان مراجعه کنید.

برای سادگی، می‌توانید از 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 سفارشی برای پیکربندی رنگ‌ها و قلم‌های عنصر پشتیبانی می‌کند. برای جزئیات بیشتر، سبک سفارشی کیت میانای کاربر «جاها» را ببینید.

مشاهده نمونه کد کامل

JavaScript

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

عنصر فشرده جزئیات جا

روی نشانگری در نقشه کلیک کنید تا جزئیات مکان آن را در «عنصر فشرده جزئیات مکان» ببینید.

‫ PlaceDetailsCompactElement جزئیات مکان انتخاب‌شده را بااستفاده از حداقل فضا ارائه می‌دهد. این ممکن است در پنجره اطلاعاتی که مکانی را در نقشه برجسته می‌کند، در تجربه رسانه‌های اجتماعی مانند هم‌رسانی مکان در گپ، به‌عنوان پیشنهادی برای انتخاب مکان فعلی شما، یا در مقاله رسانه‌ای برای ارجاع به مکان در Google Maps مفید باشد. PlaceDetailsCompactElement می‌تواند نام، نشانی، رده‌بندی، نوع، قیمت، نماد دسترس‌پذیری، وضعیت باز بودن، و یک عکس را نمایش دهد. می‌تواند به‌صورت افقی یا عمودی نمایش داده شود، که با مشخصه orientation انتخاب می‌شود.

در قطعه کد زیر، gmp-place-details-compact با orientation تنظیم‌شده روی horizontal پیکربندی شده است. مشخصه دیگری به‌نام truncation-preferred، محتوای خاصی را کوتاه می‌کند تا به‌جای پیچیدن در خط بعدی، در یک خط جا شود. عنصر gmp-place-details-compact حاوی عنصر فرزند gmp-place-details-place-request برای انتخاب مکان است. این می‌تواند یک شیء مکان، یک شناسه مکان، یا نام منبع مکان باشد.

  <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 سفارشی برای پیکربندی رنگ‌ها و قلم‌های عنصر پشتیبانی می‌کند. برای جزئیات بیشتر، سبک سفارشی کیت میانای کاربر «جاها» را ببینید.

توجه داشته باشید که اگر عنصر «جزئیات جا»ی فشرده به پنجره اطلاعات اضافه شود، سبک سفارشی باید مستقیماً به عنصر 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

دیدن نمونه کد کامل

این مثال افزودن PlaceDetailsCompactElement به نقشه را به‌صورت برنامه‌نویسی‌شده بااستفاده از InfoWindow و AdvancedMarkerElement نشان می‌دهد.

JavaScript

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

عناصر جزئیات مکان با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

عنصر جزئیات جا

پیکربندی محتوا

پیکربندی ظاهر

مشاهده نمونه کد کامل

JavaScript

CSS

HTML

عنصر فشرده جزئیات جا

پیکربندی محتوا

پیکربندی ظاهر

دیدن نمونه کد کامل

JavaScript

CSS

HTML

عناصر جزئیات مکان