מעבר לממשק החדש של ביקורות על מקומות

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

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

  • הפונקציה PlacesService (מדור קודם) מחזירה מערך של מופעי PlaceReview כחלק מהאובייקט PlaceResult לכל בקשת getDetails(), אם השדה reviews צוין בבקשה.
  • הפונקציה Place (חדשה) מחזירה מערך של מופעי Review כחלק מבקשת fetchFields() אם השדה reviews צוין בבקשה.

בטבלה הבאה מפורטים כמה מההבדלים העיקריים בשימוש בביקורות על מקומות בין המחלקה Place לבין PlacesService:

‫PlacesService (השיטה הקודמת) Place (חדש)
ממשק PlaceReview כיתה Review
השיטות דורשות שימוש בקריאה חוזרת (callback) כדי לטפל באובייקט התוצאות ובתגובה של google.maps.places.PlacesServiceStatus. משתמש ב-Promises ופועל באופן אסינכרוני.
השיטות דורשות בדיקת PlacesServiceStatus. אין בדיקת סטטוס נדרשת, אפשר להשתמש בטיפול בשגיאות רגילות. מידע נוסף
צריך ליצור מופע של PlacesService באמצעות מפה או רכיב div. אפשר ליצור מופע של Place בכל מקום שצריך, בלי הפניה למפה או לרכיב בדף.
‫PlaceReview מחזיר נתוני שיוך (Attribution) של הביקורת באמצעות השדות author_name,‏ author_url ו-profile_photo_url. הפונקציה Review מחזירה נתוני שיוך (Attribution) של הביקורת באמצעות מופע של AuthorAttribution.

השוואת קודים

בקטע הזה אנחנו משווים בין קוד של שיטות לחיפוש טקסט כדי להמחיש את ההבדלים בין ביקורות על מקומות במחלקה הקודמת PlacesService לבין המחלקה החדשה יותר Place.

שירות Places (מדור קודם)

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

const request = {
  placeId: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  fields: ["name", "formatted_address", "geometry", "reviews"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].author_name;
      let authorUri = place.reviews[0].author_url;

      // Format the review using HTML.
      contentString =`
            <div id="title"><b>${place.name}</b></div>
            <div id="address">${place.formatted_address}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
      contentString = `No reviews were found for ${place.name}`;
    }

    const infowindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
    });

    // Show the info window.
    infowindow.open({
      anchor: marker,
      map,
    });
  }
});

סיווג המקום (חדש)

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

// Use a place ID to create a new Place instance.
const place = new google.maps.places.Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});

// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString =`
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = `No reviews were found for ${place.displayName}`;
}

// Create an infowindow to display the review.
infoWindow = new google.maps.InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});

// Add a marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: place.location,
  title: place.displayName,
});

// Show the info window.
infoWindow.open({
  anchor: marker,
  map,
});