Migrer vers la nouvelle fonctionnalité Place Photo

Développeurs de l'Espace économique européen (EEE)

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

  • PlacesService (ancienne méthode) renvoie un tableau contenant jusqu'à 10 objets PlacePhoto 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 photo de la première place est renvoyée par défaut si elle est disponible.
  • La classe Place renvoie un tableau contenant jusqu'à 10 objets Photo dans une requête fetchFields() si le champ photos est spécifié dans la requête.

Le tableau suivant liste certaines des principales différences dans l'utilisation des photos de lieux 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 de l'état n'est requise. Vous pouvez utiliser la gestion des erreurs standard. En savoir plus
PlacesService doit être instancié à l'aide d'une carte ou d'un élément div. Place peut être instancié où que ce soit, sans référence à une carte ni à un élément de page.

Comparaison de code

Cette section compare le code des photos de lieux 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 sur chaque API respective.

Service Places (ancien)

L'extrait suivant montre comment renvoyer des photos à l'aide de PlacesService et afficher le premier résultat photo 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 ensuite sur la page après vérification de l'état du service. Lors de l'instanciation de PlacesService, un élément de carte ou 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});
    }
  });
}

Attribution des auteurs 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 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 (nouveau)

L'extrait suivant montre comment utiliser la méthode fetchFields() pour renvoyer les détails d'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 de la première place 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, y compris 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