شارِك ملاحظاتك حول حزمة واجهة مستخدم "الأماكن" للمساعدة في تطوير "منصة Google للتسويق" في المستقبل.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

ضبط المظهر

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

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

الاطّلاع على مثال الرمز الكامل

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 تفاصيل حول مكان محدّد باستخدام مساحة محدودة. قد يكون هذا مفيدًا في نافذة معلومات تسلّط الضوء على مكان ما على الخريطة، أو في تجربة على وسائل التواصل الاجتماعي مثل مشاركة موقع جغرافي في محادثة، أو كاقتراح لاختيار موقعك الجغرافي الحالي، أو ضمن مقالة إعلامية للإشارة إلى المكان على "خرائط Google". يمكن أن تعرض 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 نفسه على عدد من عناصر المحتوى الثانوية، ويختار كل عنصر تفاصيل المكان المناسبة لعرضها. لا يهم ترتيب العناصر الفرعية، لأنّ التفاصيل المحدّدة يتم عرضها دائمًا بترتيب ثابت ومحدّد مسبقًا. يمكن ضبط بعض هذه العناصر بشكل أكبر باستخدام سمات خاصة بالمحتوى.

لتبسيط الأمر، يمكن استبدال العنصر gmp-place-content-config بالعنصر gmp-place-all-content لعرض جميع التفاصيل المتاحة في العنصر Place Details Compact، أو بالعنصر 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 Custom Styling لمزيد من التفاصيل.

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

يوضّح هذا المثال كيفية إضافة PlaceDetailsCompactElement إلى خريطة آليًا باستخدام AdvancedMarkerElement.

JavaScript

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

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));
}
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>
    <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>index.html

عناصر تفاصيل المكان تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

ضبط المحتوى

ضبط المظهر

الاطّلاع على مثال الرمز الكامل

JavaScript

CSS

HTML

العنصر المضغوط لتفاصيل المكان

ضبط المحتوى

ضبط المظهر

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

JavaScript

CSS

HTML

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