عناصر تفاصيل المكان

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

عنصر "تفاصيل المكان" وعنصر "تفاصيل المكان" المضغوط هما عنصران من عناصر HTML يعرضان تفاصيل حول مكان معيّن:

عنصر "تفاصيل المكان"

انقر على محدّد موقع على الخريطة للاطّلاع على تفاصيل المكان في "عنصر تفاصيل المكان".

تتيح 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">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html
 
<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-review-summary></gmp-place-review-summary>
        <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 غير مفعّلة تلقائيًا.
  • يُستخدم العنصر gmp-place-attribution لعرض مصدر الصورة. تُستخدَم السمتان light-scheme-color وdark-scheme-color لضبط لون نص تحديد المصدر في الوضعَين الفاتح والداكن.
يمكنك الاطّلاع على PlaceContentConfigElement المستندات المرجعية للحصول على مزيد من المعلومات حول جميع عناصر المحتوى المتوافقة.

لتبسيط الأمر، يمكن استبدال العنصر gmp-place-content-config بالعنصر gmp-place-all-content لعرض جميع التفاصيل المتاحة في العنصر &quot;تفاصيل المكان&quot;، أو بالعنصر gmp-place-standard-content لعرض إعدادات عادية.

ضبط المظهر

نطاق العرض المقترَح للعنصر gmp-place-details هو 250-400 بكسل. قد لا يتم عرض العروض التي تقلّ عن 250 بكسل بشكلٍ صحيح. اضبط الارتفاع بما يناسب تطبيقك. تم تصميم عنصر "تفاصيل المكان" ليتم تمريره داخل المساحة المخصّصة حسب الحاجة.

يتوافق العنصر gmp-place-details أيضًا مع مجموعة متنوعة من خصائص CSS المخصّصة لضبط ألوان العنصر وخطوطه. راجِع مقالة تخصيص نمط Places UI Kit للحصول على مزيد من التفاصيل.

الاطّلاع على مثال الرمز البرمجي الكامل

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');
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();
index.js

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;
}
style.css

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

العنصر المدمج لتفاصيل المكان

انقر على محدّد موقع على الخريطة للاطّلاع على تفاصيل المكان في "عنصر مضغوط لتفاصيل المكان".

تعرض PlaceDetailsCompactElement تفاصيل حول مكان محدّد باستخدام مساحة قليلة. قد يكون هذا مفيدًا في نافذة معلومات تسلّط الضوء على مكان ما على الخريطة، أو في تجربة على وسائل التواصل الاجتماعي مثل مشاركة موقع جغرافي في محادثة، أو كاقتراح لاختيار موقعك الجغرافي الحالي، أو في مقالة إعلامية للإشارة إلى المكان على &quot;خرائط Google&quot;. يمكن أن تعرض PlaceDetailsCompactElement الاسم والعنوان والتقييم والنوع والسعر ورمز تسهيل الوصول وحالة التوفّر وصورة واحدة. ويمكن عرضها أفقيًا أو عموديًا، حسب ما تحدّده السمة orientation.

في المقتطف التالي، يتم تضمين gmp-place-details-compact ضمن العنصر gmp-map، مع ضبط orientation على horizontal. سمة إضافية، truncation-preferred، تعمل على اقتطاع محتوى معيّن ليناسب سطرًا واحدًا بدلاً من التفافه. يحتوي العنصر gmp-place-details-compact على عنصر ثانوي، gmp-place-details-place-request، لاختيار المكان. يمكن أن يكون هذا المعرّف عنصر مكان أو معرّف مكان أو اسم مورد خاص بمكان. 

<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 لعرض جميع التفاصيل المتاحة في العنصر "التفاصيل الموجزة عن المكان"، أو بالعنصر gmp-place-standard-content لعرض إعدادات عادية.

ضبط المظهر

نطاق العرض المقترَح للعنصر gmp-place-details-compact في الاتجاه الرأسي هو 180-300 بكسل. قد لا يتم عرض العروض التي تقل عن 160 بكسل بشكل صحيح. لا تحدّد ارتفاعًا ثابتًا.

نطاق العرض المقترَح لعنصر gmp-place-details-compact في الوضع الأفقي هو 180 إلى 500 بكسل. قد لا يتم عرض العروض التي تقل عن 160 بكسل بشكل صحيح. عندما يكون العرض أقل من 350 بكسل، لن يتم عرض الصورة المصغّرة. لا تحدّد ارتفاعًا ثابتًا.

يتوافق العنصر gmp-place-details-compact أيضًا مع مجموعة متنوعة من خصائص CSS المخصّصة لضبط ألوان العنصر وخطوطه. راجِع مقالة تخصيص نمط Places UI Kit للحصول على مزيد من التفاصيل.

الاطّلاع على مثال كامل للرمز البرمجي

يوضّح هذا المثال كيفية إضافة PlaceDetailsCompactElement إلى خريطة بشكل آلي باستخدام 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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();
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" defer></script>
        <!-- prettier-ignore -->
        <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>
    </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