Migrer vers la nouvelle fonctionnalité Place Photo

Place Photos vous permet d'ajouter du contenu photographique de qualité supérieure à vos pages Web. Cette page explique les différences entre les fonctionnalités de photos de lieu dans la classe Place (nouvelle) et PlacesService (ancienne), et fournit des extraits de code à des fins de comparaison.

  • PlacesService (ancien) renvoie un tableau d'objets PlacePhoto pouvant comporter jusqu'à 10 éléments dans l'objet PlaceResult pour toute requête getDetails() si le champ photos est spécifié dans la requête. Dans le cas de textSearch() et nearbySearch(), la première photo de lieu est renvoyée par défaut, si elle est disponible.
  • La classe Place renvoie un tableau d'objets Photo pouvant comporter jusqu'à 10 éléments dans une requête fetchFields() si le champ photos est spécifié dans la requête.

Le tableau suivant présente certaines des principales différences d'utilisation des photos de lieu entre la classe Place et PlacesService:

PlacesService (ancienne) Place (nouveau)
Interface PlacePhoto Classe Photo
PlacePhoto renvoie html_attributions sous forme de chaîne. Photo renvoie une instance AuthorAttribution.
Les méthodes nécessitent l'utilisation d'un rappel pour gérer l'objet de résultats et la réponse google.maps.places.PlacesServiceStatus. Utilise des promesses et fonctionne de manière asynchrone.
Les méthodes nécessitent une vérification PlacesServiceStatus. Aucune vérification d'état requise. Vous pouvez utiliser la gestion des erreurs standard.
PlacesService doit être instancié à l'aide d'une carte ou d'un élément div. Place peut être instancié partout où cela est nécessaire, sans référence à un élément de carte ou de page.

Comparaison de code

Cette section compare le code des photos de lieu pour illustrer les différences entre le service Places et la classe Place. Les extraits de code montrent le code requis pour demander des photos de lieux dans chaque API respective.

Service Places (ancien)

L'extrait de code suivant montre comment renvoyer des photos à l'aide de PlacesService et afficher le premier résultat de recherche de photos sur la page. Dans cet exemple, la requête Place Details spécifie un ID de lieu, ainsi que les champs name et photos. La première photo s'affiche alors sur la page après vérification de l'état du service. Lors de l'instanciation de PlacesService, une carte ou un élément div doit être spécifié. Comme cet exemple ne comporte pas de carte, un élément div est utilisé.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Attributions d'auteur dans PlacesService

PlacesService renvoie les attributions d'auteur requises sous la forme d'une chaîne html_attributions contenant une URL pointant vers la page de profil Google de l'auteur. L'extrait de code suivant montre comment récupérer les données d'attribution pour le premier résultat photo.

let attributionUrl = place.photos[0].html_attributions;

En savoir plus

Classe Place (nouvelle)

L'extrait de code suivant montre comment utiliser la méthode fetchFields() pour renvoyer les informations sur un lieu, y compris son nom à afficher et ses photos. Un nouvel objet Place est d'abord instancié à l'aide d'un ID de lieu, suivi d'un appel à fetchFields() où les champs displayName et photos sont spécifiés. La photo du premier lieu s'affiche alors sur la page. Il n'est pas nécessaire de vérifier l'état du service lorsque vous utilisez la classe Place, car cela est géré automatiquement.

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

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

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

Attributions d'auteur dans la classe Place

La classe Place renvoie les attributions d'auteur en tant qu'instance AuthorAttribution incluant le nom de l'auteur, un URI pour la page de profil Google de l'auteur et un URI pour la photo de profil de l'auteur. L'extrait de code suivant montre comment récupérer les données d'attribution pour le premier résultat photo.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

En savoir plus