‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

תמונות של המקום

מפתחים באזור הכלכלי האירופי (EEA)

התכונה 'מיקום תמונות' מאפשרת לכם להוסיף תוכן צילומי באיכות גבוהה לדפי האינטרנט שלכם. אפשר לגשת למיליוני תמונות שמאוחסנות במסד הנתונים של מקומות, ולקבל תמונות שניתן לשנות את הגודל שלהן באמצעות חיפוש מקומות, חיפוש בקרבת מקום, חיפוש טקסט, השלמה אוטומטית ופרטי מקום.

קוד מקור מלא לדוגמה

קרוסלת התמונות הפשוטה הזו מציגה תמונות של המקום שצוין, כולל ייחוסים נדרשים ליוצרים (שמוצגים בפינה הימנית העליונה של התמונה).

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;