حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

صور المكان

المطوّرون في المنطقة الاقتصادية الأوروبية

تتيح لك ميزة "الصور في الأماكن" إضافة محتوى فوتوغرافي عالي الجودة إلى صفحات الويب. يمكنك الوصول إلى ملايين الصور المخزّنة في قاعدة بيانات "الأماكن"، والحصول على صور قابلة لتغيير الحجم باستخدام Find Place وNearby Search وText Search وAutocomplete وPlace Details.

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

تعرض لوحة العرض الدوّارة البدائية هذه صورًا للمكان المحدّد، بما في ذلك الإشارات المطلوبة إلى المؤلفين (تظهر في أعلى يمين الصورة).

TypeScript

async function init() {
    const { Place } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;

    // Use a place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'photos', 'editorialSummary'] });

    // Get the various HTML elements.
    let heading = document.getElementById('heading') as HTMLElement;
    let summary = document.getElementById('summary') as HTMLElement;
    let gallery = document.getElementById('gallery') as HTMLElement;
    let expandedImageDiv = document.getElementById('expanded-image') as HTMLElement;
    let attributionLabel;

    // Show the display name and summary for the place.
    heading.textContent = place.displayName as string;
    summary.textContent = place.editorialSummary as string;

    // Add photos to the gallery.
    if (place.photos) {
        place.photos?.forEach((photo) => {
            const img = document.createElement('img');
            const expandedImage = document.createElement('img');
            img.src = photo.getURI({maxHeight: 380});
            img.addEventListener('click', (event) => {
                event.preventDefault();
                expandedImage.src = img.src;
                expandedImageDiv.innerHTML = '';
                expandedImageDiv.appendChild(expandedImage);
                attributionLabel = createAttribution(photo.authorAttributions);
                expandedImageDiv.appendChild(attributionLabel);
            });

            gallery.appendChild(img);
        });
    }

    // Display the first photo.
    const img = document.createElement('img');
    img.src = place.photos![0].getURI();
    expandedImageDiv.appendChild(img);
    attributionLabel = createAttribution(place.photos![0].authorAttributions);
    expandedImageDiv.appendChild(attributionLabel);

    // Helper function to create attribution DIV.
    function createAttribution(attribution) {
        attributionLabel = document.createElement("a");
        attributionLabel.classList.add('attribution-label');
        attributionLabel.textContent = attribution[0].displayName;
        attributionLabel.href = attribution[0].uri;
        attributionLabel.target = '_blank;'
        return attributionLabel;
    }
}

init();index.ts

JavaScript

async function init() {
  const { Place } = await google.maps.importLibrary("places");
  // Use a place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJydSuSkkUkFQRsqhB-cEtYnw", // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "photos", "editorialSummary"],
  });

  // Get the various HTML elements.
  let heading = document.getElementById("heading");
  let summary = document.getElementById("summary");
  let gallery = document.getElementById("gallery");
  let expandedImageDiv = document.getElementById("expanded-image");
  let attributionLabel;

  // Show the display name and summary for the place.
  heading.textContent = place.displayName;
  summary.textContent = place.editorialSummary;
  // Add photos to the gallery.
  if (place.photos) {
    place.photos?.forEach((photo) => {
      const img = document.createElement("img");
      const expandedImage = document.createElement("img");

      img.src = photo.getURI({ maxHeight: 380 });
      img.addEventListener("click", (event) => {
        event.preventDefault();
        expandedImage.src = img.src;
        expandedImageDiv.innerHTML = "";
        expandedImageDiv.appendChild(expandedImage);
        attributionLabel = createAttribution(photo.authorAttributions);
        expandedImageDiv.appendChild(attributionLabel);
      });
      gallery.appendChild(img);
    });
  }

  // Display the first photo.
  const img = document.createElement("img");

  img.src = place.photos[0].getURI();
  expandedImageDiv.appendChild(img);
  attributionLabel = createAttribution(place.photos[0].authorAttributions);
  expandedImageDiv.appendChild(attributionLabel);

  // Helper function to create attribution DIV.
  function createAttribution(attribution) {
    attributionLabel = document.createElement("a");
    attributionLabel.classList.add("attribution-label");
    attributionLabel.textContent = attribution[0].displayName;
    attributionLabel.href = attribution[0].uri;
    attributionLabel.target = "_blank;";
    return attributionLabel;
  }
}

init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.place-overview {
  width: 400px;
  height: 380px;
  overflow-x: auto;
  position: relative;
  margin-right: 20px;
}

#info {
  font-family: sans-serif;
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  padding-bottom: 10px;
}

#heading {
  width: 500px;
  font-size: x-large;
  margin-bottom: 20px;
}

#summary {
  width: 500px;
}

#gallery {
  display: flex;
}

#gallery img {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-top: 40px;
  border-radius: 10px;
  cursor: pointer;
}

#expanded-image {
  display: flex;
  height: 380px;
  overflow: hidden;
  background-color: #000;
}

#expanded-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.attribution-label {
  background-color: #fff;
  opacity: 0.7;
  font-size: 10px;
  font-family: sans-serif;
  margin: 2px;
  position: absolute;
}
style.css

HTML

<html>
  <head>
    <title>Place Photos</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="place-overview">
        <div id="info">
          <div id="heading"></div>
          <div id="summary"></div>
        </div>
        <div id="gallery"></div>
      </div>
      <div id="expanded-image"></div>
    </div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

تجربة العيّنة

JSFiddle.net Google Cloud Shell

الحصول على الصور

للحصول على صور لمكان معيّن، أدرِج الحقل photos في مَعلمات طلب fetchFields(). يحتوي مثيل "المكان" الناتج على مصفوفة تضم ما يصل إلى 10 عناصر Photo، يمكنك من خلالها الوصول إلى الصور ومعلومات تحديد المصدر المطلوبة. استخدِم الدالة getURI() لعرض معرّف الموارد المنتظم (URI) الخاص بالصورة المصدر، وذلك باستخدام PhotoOptions لضبط الحد الأقصى لارتفاع الصورة و/أو عرضها. إذا حدّدت قيمة لكل من maxHeight وmaxWidth، ستغيّر خدمة الصور حجم الصورة إلى الحجم الأصغر من الحجمَين، مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية.

يوضّح المثال التالي كيفية إرسال طلب "تفاصيل المكان" للحصول على صور، واستدعاء getURI() على مثيل صورة لعرض معرّف URI المصدر للصورة، ثم إضافة نتيجة الصورة الأولى إلى عنصر img (تم حذف بيانات المصدر لتوضيح المثال):

const { Place } = await google.maps.importLibrary('places');

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['photos'] });

// Add the first photo to an img element.
const photoImg = document.getElementById('image-container');
photoImg.src = place.photos[0].getURI({maxHeight: 400});

إحالات المؤلف

عند عرض صورة، يجب أيضًا عرض معلومات تحديد المصدر الخاصة بالمؤلف. استخدِم الفئة AuthorAttribution لعرض بيانات تحديد المصدر. يتضمّن مصدر الإسناد اسم المؤلف (displayName) ومعرّف موارد منتظم (URI) لملفه الشخصي على "خرائط Google" (uri) ومعرّف موارد منتظم (URI) لصورة المؤلف (photoURI). توضّح المقتطفة التالية كيفية عرض displayName وuri وphotoURI لصورة مكان.

  let name = place.photos[0].authorAttributions[0].displayName;
  let url = place.photos[0].authorAttributions[0].uri;
  let authorPhoto = place.photos[0].authorAttributions[0].photoURI;