Migrer vers la nouvelle fonctionnalité Place Photo

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

Les photos de lieux vous permettent 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 lieux dans la Place classe (nouvelle) et PlacesService (ancienne), et fournit quelques extraits de code à titre de comparaison.

  • PlacesService (ancienne) renvoie un tableau contenant jusqu'à 10 PlacePhoto objets 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 contenant jusqu'à 10 Photo objets dans une requête fetchFields() si le champ photos est spécifié dans la requête.

Le tableau suivant répertorie certaines des principales différences dans l'utilisation des photos de lieux entre la classe Place et PlacesService :

PlacesService (ancienne) Place (nouvelle)
PlacePhoto interface Photo classe
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 google.maps.places.PlacesServiceStatus réponse. Utilise des promesses et fonctionne de manière asynchrone.
Les méthodes nécessitent une vérification PlacesServiceStatus. Aucune vérification d'état requise, peut 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é partout où cela est nécessaire, 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 (ancienne)

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 de détails du lieu 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, 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

The PlacesService renvoie les attributions d'auteur requises sous forme de 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 (nouvelle)

L'extrait suivant montre comment utiliser la fetchFields() méthode pour renvoyer les détails du lieu, y compris le nom à afficher et les photos du lieu. Tout d'abord, un nouvel objet Place est instancié à l'aide d'un ID de lieu, suivi d'un appel à fetchFields() où les champs displayName et photos sont spécifiés. La première photo du lieu s'affiche ensuite 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 sous forme d'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 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