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

דף זה תורגם על ידי Cloud Translation API.

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

הצגת קוד המקור המלא של הדוגמה

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

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

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

ייבוא תמונות

כדי לקבל תמונות של מקום מסוים, צריך לכלול את השדה photos בפרמטרים של הבקשה fetchFields(). מופע המקום שנוצר מכיל מערך של עד 10 אובייקטים מסוג Photo, שמהם אפשר לגשת לתמונות ולפרטי השיוך הנדרשים שלהן. קוראים ל-getURI() כדי להחזיר את ה-URI של תמונת המקור, ומציינים את הגובה או הרוחב המקסימליים של התמונה. אם מציינים ערך גם ל-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;