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

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

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

انتخاب پلاتفرم: Android iOS JavaScript

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

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

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

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

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

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

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

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

برای نمایش جزئیات مکان در نقشه، عنصر 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-content-config می‌توانید مکان خاصی را که عنصر gmp-place-details نمایش می‌دهد کنترل کنید. برای این کار، جزئیات مکان را انتخاب و پیکربندی کنید، همان‌طور که در این مثال نشان داده شده است:

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

خود عنصر gmp-place-content-config حاوی تعدادی عنصر محتوای فرزند است و هرکدام جزئیات مکان مربوطه را برای نمایش انتخاب می‌کند: gmp-place-address نشانی مکان را انتخاب می‌کند، gmp-place-price سطح قیمت مکان را انتخاب می‌کند، و غیره. عناصر gmp-place-summary و gmp-place-review-summary به‌ترتیب خلاصه با بهره‌گیری از هوش مصنوعی از مکان و مرورهای آن ارائه می‌دهند. ترتیب عناصر کودک نامربوط است، زیرا جزئیات انتخاب‌شده همیشه در ترتیب ازپیش‌تعیین‌شده ثابتی ارائه می‌شود.

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

از عنصر 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 ۲۵۰ تا ۴۰۰ پیکسل است. عرض‌های کمتر از ۲۵۰ پیکسل ممکن است به‌درستی نمایش داده نشوند. ارتفاع را متناسب با برنامه‌تان تنظیم کنید. عنصر «جزئیات مکان» به‌گونه‌ای طراحی شده است که درصورت نیاز در فضای اختصاص‌داده‌شده پیمایش کند.

عنصر 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-content-config را برای انتخاب و پیکربندی جزئیات مکان، همان‌طور که در این گزیده نشان داده شده است، استفاده کنید:

<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>index.html

عنصر gmp-place-content-config خود حاوی تعدادی عنصر محتوای فرزند است و هریک جزئیات مکان مربوطه را برای نمایش انتخاب می‌کند. ترتیب عناصر فرزند نامربوط است، زیرا جزئیات انتخاب‌شده همیشه در ترتیب ازپیش‌تعیین‌شده ثابتی ارائه می‌شود. برخی‌از این عناصر را می‌توان بااستفاده از مشخصه‌های مختص محتوا بیشتر پیکربندی کرد.

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

برای ساده‌تر شدن، عنصر gmp-place-content-config را می‌توان با gmp-place-all-content جایگزین کرد تا همه جزئیات موجود در عنصر «فشرده جزئیات مکان» نشان داده شود، یا با gmp-place-standard-content جایگزین کرد تا پیکربندی استاندارد نمایش داده شود.

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

محدوده عرض توصیه‌شده برای عنصر 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

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