Migrer vers les nouveaux détails sur un lieu

L'API Places peut renvoyer des informations détaillées sur un lieu spécifique. Cette page explique les différences entre les informations sur le lieu telles qu'elles sont utilisées dans la classe Place (nouvelle) et PlacesService (ancienne), et fournit des extraits de code à des fins de comparaison. Le tableau suivant présente certaines des principales différences d'utilisation des informations sur le lieu entre la classe Place et PlacesService:

PlacesService (ancienne) Place (nouveau)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
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.
Les champs de données de lieu sont mis en forme en snake case. Les champs de données de lieu sont mis en forme en Camel Case.
Limité à un ensemble fixe de types d'établissements et de champs de données sur les établissements. Fournit une sélection étendue de types de lieux et de champs de données de lieu régulièrement mis à jour.

Comparaison de code

Cette section compare deux extraits de code similaires pour illustrer les différences entre le service Places et la classe Place. Les extraits de code montrent le code requis sur chaque API respective pour envoyer une requête d'informations sur un lieu, puis utilisent les données de lieu obtenues pour ajouter un repère à la carte.

Service Places (ancien)

L'extrait de code condensé suivant montre comment effectuer une requête d'informations sur un lieu à l'aide de PlacesService. La requête utilise un rappel et inclut une vérification conditionnelle requise sur PlacesServiceStatus. Les champs de données de lieu nécessaires sont spécifiés dans le corps de la requête.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

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

En savoir plus

Classe Place (nouvelle)

L'extrait de code condensé suivant montre comment effectuer une requête d'informations sur un lieu à l'aide de la classe Place. La requête est asynchrone et n'inclut pas de vérification de l'état (le traitement des erreurs standard peut être utilisé). Un ID de lieu permet de créer une instance Place, qui est utilisée pour effectuer la requête (fetchFields()). Les champs de données de lieu nécessaires ne sont pas transmis tant que fetchFields() n'est pas appelé, ce qui offre une plus grande flexibilité. Étant donné que la méthode fetchFields() utilise l'opérateur await, elle ne peut être utilisée que dans une fonction async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

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

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

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

En savoir plus