Place Details (nouveau)

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

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

Placer un objet

L'objet Place, qui contient des informations sur un lieu, est renvoyé de manière dynamique par Text Search, Nearby Search et Place Autocomplete. Vous pouvez également créer un objet Place à partir d'un ID de lieu ou d'un nom de ressource (le nom de ressource est l'ID de lieu précédé de places/). L'extrait de code suivant montre comment créer un objet Place à l'aide d'un ID de lieu :

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

Vous pouvez également créer un objet Place à partir du nom de ressource d'un lieu :

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

Pour en savoir plus, consultez PlaceOptions.

Champs de récupération

Si vous disposez déjà d'un objet Place, ou d'un ID de lieu ou d'un nom de ressource, 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 ("casse de chameau"). 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, puis ajoute un repère à la carte.

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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

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

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

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });
    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);
    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }
    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}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