Place Details (nouveau)

Sélectionnez une plate-forme : Android iOS JavaScript Services Web
Développeurs de l'Espace économique européen (EEE)

Champs de récupération

Si vous disposez déjà d'un objet Place ou de l'ID d'un lieu, utilisez la méthode Place.fetchFields() pour obtenir des informations sur ce lieu. Fournissez une liste de champs de données de lieu séparés par une virgule à renvoyer. Spécifiez les noms de champs 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

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 Place Overview

Le composant "Aperçu du lieu" affiche des informations détaillées sur des millions d'établissements, y compris les horaires d'ouverture, les notes et les photos, ainsi que l'itinéraire 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 fonctionnalités de localisation plus rapidement.

Utilisez le configurateur d'aperçu du lieu pour créer du code intégrable pour un composant d'aperçu du lieu personnalisé, puis exportez-le pour l'utiliser avec des frameworks populaires tels que React et Angular, ou sans aucun framework.