Avis sur les lieux

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

Les avis sur les établissements vous permettent d'accéder à des millions d'avis et de notes de qualité provenant de la base de données Places, et de les afficher sur vos pages Web.

Afficher l'exemple de code source complet

Cet exemple récupère les détails d'un lieu, y compris le premier avis, et affiche les informations dans une fenêtre d'informations.

TypeScript

let innerMap;
let infoWindow;
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

async function initMap() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }, { Place }] =
        await Promise.all([
            google.maps.importLibrary(
                'maps'
            ) as Promise<google.maps.MapsLibrary>,
            google.maps.importLibrary(
                'marker'
            ) as Promise<google.maps.MarkerLibrary>,
            google.maps.importLibrary(
                'places'
            ) as Promise<google.maps.PlacesLibrary>,
        ]);

    innerMap = mapElement.innerMap;

    // Create a new Place instance.
    const place = new Place({
        id: 'ChIJpyiwa4Zw44kRBQSGWKv4wgA', // Faneuil Hall Marketplace, Boston, MA
    });

    // Call fetchFields, passing 'reviews' and other needed fields.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location', 'reviews'],
    });

    // Create an HTML container.
    const content = document.createElement('div');
    const title = document.createElement('div');
    const rating = document.createElement('div');
    const address = document.createElement('div');
    const review = document.createElement('div');
    const authorLink = document.createElement('a');

    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
        // Get info for the first review.
        const reviewRating = place.reviews[0].rating;
        const reviewText = place.reviews[0].text;
        const authorName = place.reviews[0].authorAttribution!.displayName;
        const authorUri = place.reviews[0].authorAttribution!.uri;

        // Safely populate the HTML.
        title.textContent = place.displayName || '';
        address.textContent = place.formattedAddress || '';
        rating.textContent = `Rating: ${reviewRating} stars`;
        review.textContent = reviewText || '';
        authorLink.textContent = authorName;
        authorLink.href = authorUri || '';
        authorLink.target = '_blank';

        content.appendChild(title);
        content.appendChild(address);
        content.appendChild(rating);
        content.appendChild(review);
        content.appendChild(authorLink);
    } else {
        content.textContent =
            `No reviews were found for ${place.displayName}.`;
    }

    // Create an infowindow to display the review.
    infoWindow = new InfoWindow({
        content,
        ariaLabel: place.displayName,
    });

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

    innerMap.setCenter(place.location);

    // Show the info window.
    infoWindow.open({
        anchor: marker,
        map: innerMap,
    });
}

initMap();
index.ts

JavaScript

let innerMap;
let infoWindow;
const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }, { Place }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    innerMap = mapElement.innerMap;
    // Create a new Place instance.
    const place = new Place({
        id: 'ChIJpyiwa4Zw44kRBQSGWKv4wgA', // Faneuil Hall Marketplace, Boston, MA
    });
    // Call fetchFields, passing 'reviews' and other needed fields.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location', 'reviews'],
    });
    // Create an HTML container.
    const content = document.createElement('div');
    const title = document.createElement('div');
    const rating = document.createElement('div');
    const address = document.createElement('div');
    const review = document.createElement('div');
    const authorLink = document.createElement('a');
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
        // Get info for the first review.
        const reviewRating = place.reviews[0].rating;
        const reviewText = place.reviews[0].text;
        const authorName = place.reviews[0].authorAttribution.displayName;
        const authorUri = place.reviews[0].authorAttribution.uri;
        // Safely populate the HTML.
        title.textContent = place.displayName || '';
        address.textContent = place.formattedAddress || '';
        rating.textContent = `Rating: ${reviewRating} stars`;
        review.textContent = reviewText || '';
        authorLink.textContent = authorName;
        authorLink.href = authorUri || '';
        authorLink.target = '_blank';
        content.appendChild(title);
        content.appendChild(address);
        content.appendChild(rating);
        content.appendChild(review);
        content.appendChild(authorLink);
    }
    else {
        content.textContent =
            `No reviews were found for ${place.displayName}.`;
    }
    // Create an infowindow to display the review.
    infoWindow = new InfoWindow({
        content,
        ariaLabel: place.displayName,
    });
    // Add a marker.
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    innerMap.setCenter(place.location);
    // Show the info window.
    infoWindow.open({
        anchor: marker,
        map: innerMap,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

style.css

HTML

<html>
    <head>
        <title>Place Reviews</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="42.349134, -71.083184"
            zoom="14"
            map-id="4504f8b37365c3d0">
        </gmp-map>
    </body>
</html>
index.html

Essayer l'exemple

Obtenir des avis sur un lieu

Pour obtenir des données d'avis sur un lieu, incluez le champ reviews dans les paramètres de votre requête fetchFields(). L'instance Place résultante contient un tableau d'objets Review, à partir duquel vous pouvez accéder aux informations d'avis nécessaires.

L'exemple suivant montre comment effectuer une requête Place Details pour obtenir des avis. 

// Create a new Place instance.
const place = new Place({
    id: 'ChIJpyiwa4Zw44kRBQSGWKv4wgA', // Faneuil Hall Marketplace, Boston, MA
});
// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
    fields: ['displayName', 'formattedAddress', 'location', 'reviews'],
});
// Create an HTML container.
const content = document.createElement('div');
const title = document.createElement('div');
const rating = document.createElement('div');
const address = document.createElement('div');
const review = document.createElement('div');
const authorLink = document.createElement('a');
// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
    // Get info for the first review.
    const reviewRating = place.reviews[0].rating;
    const reviewText = place.reviews[0].text;
    const authorName = place.reviews[0].authorAttribution.displayName;
    const authorUri = place.reviews[0].authorAttribution.uri;
    // Safely populate the HTML.
    title.textContent = place.displayName || '';
    address.textContent = place.formattedAddress || '';
    rating.textContent = `Rating: ${reviewRating} stars`;
    review.textContent = reviewText || '';
    authorLink.textContent = authorName;
    authorLink.href = authorUri || '';
    authorLink.target = '_blank';
    content.appendChild(title);
    content.appendChild(address);
    content.appendChild(rating);
    content.appendChild(review);
    content.appendChild(authorLink);
}
else {
    content.textContent =
        `No reviews were found for ${place.displayName}.`;
}
// Create an infowindow to display the review.
infoWindow = new InfoWindow({
    content,
    ariaLabel: place.displayName,
});
index.js

L'instance Review contient les éléments suivants :

  • Une AuthorAttribution
  • rating fourni par l'utilisateur.
  • publishTime (date) et relativePublishTimeDescription (date de l'avis par rapport à la date actuelle, par exemple "il y a un mois").
  • L'examen text.
  • textLanguageCode indiquant la langue dans laquelle l'avis est rédigé.

Pour obtenir la note globale du lieu, utilisez la propriété Place.rating (vous devez demander le champ rating dans les paramètres de votre requête fetchFields()).

Attributions d'auteur

Lorsque vous affichez un avis, vous devez également afficher les informations sur l'auteur. Utilisez la classe AuthorAttribution pour renvoyer les attributions. Une attribution inclut le nom de l'auteur (displayName), l'URI de son profil Google Maps (uri) et l'URI de sa photo (photoURI). L'extrait suivant montre comment renvoyer displayName, uri et photoURI pour une attribution. 

  let authorName = place.reviews[0].authorAttribution!.displayName;
  let authorUri = place.reviews[0].authorAttribution!.uri;
  let authorPhoto = place.reviews[0].authorAttribution!.photoURI;