Migrer vers les nouveaux détails sur un lieu

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

L'API Places peut renvoyer des informations détaillées sur un lieu spécifique. Cette page explique les différences entre les détails du lieu tels qu'ils sont utilisés dans les classes Place (nouvelle) et PlacesService (ancienne), et fournit des extraits de code à des fins de comparaison. Le tableau suivant liste certaines des principales différences dans l'utilisation des détails du 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 de l'état n'est requise. Vous pouvez utiliser la gestion des erreurs standard. En savoir plus
Les champs de données de lieu sont mis en forme à l'aide de la casse snake. Les champs de données de lieu sont mis en forme en camel case.
Limité à un ensemble fixe de types de lieux et de champs de données de lieux. Fournit une sélection élargie de types de lieux et de champs de données de lieux 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 effectuer une demande d'informations sur un lieu, puis utiliser les données de lieu résultantes pour ajouter un repère à la carte.

Service Places (ancienne version)

L'extrait de code condensé suivant montre comment effectuer une demande d'informations sur un lieu à l'aide de PlacesService. La requête utilise un rappel et inclut une vérification conditionnelle obligatoire 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 (nouveau)

L'extrait de code condensé suivant montre comment effectuer une demande 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 (la gestion des erreurs standard peut être utilisée). Un ID de lieu est utilisé pour 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