Place Details

Sélectionnez une plate-forme : Android iOS JavaScript Services Web

Champs de récupération

Si vous disposez déjà d'un objet Place ou d'un ID de lieu, utilisez la méthode Place.fetchFields() pour obtenir des informations sur ce lieu. Fournissez une liste séparée par une virgule des champs de données de lieu à renvoyer. Spécifiez les noms de champ en Camel Case. Utilisez l'objet Place renvoyé pour obtenir les données des champs demandés.

L'exemple suivant utilise un ID de lieu pour créer un Place, appelle Place.fetchFields() qui demande les champs displayName et formattedAddress, ajoute un repère à la carte et consigne certaines données dans la console.

TypeScript

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

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

Remarque:Consultez ce guide sur l'utilisation de TypeScript et Google Maps.

JavaScript

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

  // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}
index.js

Notez que Map et Place ont été déclarés avant cette fonction:

const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");

Voir l'exemple complet

Utiliser le composant "Vue d'ensemble du lieu"

Le composant "Vue d'ensemble du lieu" affiche des informations détaillées sur des millions d'établissements, y compris les horaires d'ouverture, les avis avec étoiles et les photos, ainsi que des itinéraires et d'autres actions dans une UI prédéfinie en cinq tailles et formats. Il fait partie de la bibliothèque de composants étendus de Google Maps Platform, un ensemble de composants Web qui aide les développeurs à créer de meilleures cartes et des éléments géographiques plus rapidement.

Utilisez le configurateur de vue d'ensemble des lieux pour créer du code intégré pour un composant de vue d'ensemble des lieux personnalisé, puis exportez-le pour l'utiliser avec des frameworks populaires tels que React et Angular, ou sans framework du tout.