Recensioni dei luoghi

Sviluppatori dello Spazio economico europeo (SEE)

Le recensioni dei luoghi ti consentono di accedere a milioni di recensioni e valutazioni di alta qualità dal database di Places e di visualizzarle sulle tue pagine web.

Visualizza il codice sorgente di esempio completo

Questo esempio recupera i dettagli del luogo, inclusa la prima recensione, e visualizza le informazioni in una finestra informativa.

TypeScript

let innerMap: google.maps.Map;
let infoWindow: google.maps.InfoWindow;
const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // 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,
    });
}

void init();

JavaScript

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

async function init() {
    // 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,
    });
}

void init();

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;
}

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="42.349134, -71.083184"
            zoom="14"
            map-id="4504f8b37365c3d0">
        </gmp-map>
    </body>
</html>

Visualizzare le recensioni di un luogo

Per ottenere i dati delle recensioni di un luogo, includi il campo reviews nei parametri della richiesta fetchFields(). L'istanza di Place risultante contiene un array di Review oggetti, da cui puoi accedere alle informazioni sulle recensioni necessarie.

L'esempio seguente mostra come effettuare una richiesta di dettagli del luogo per le recensioni. 

// 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,
});

L'istanza di Review contiene quanto segue:

  • Un AuthorAttribution
  • La rating fornita dall'utente.
  • Il publishTime (data) e relativePublishTimeDescription (tempo di recensione rispetto all'ora attuale, ad esempio "un mese fa").
  • Il text della recensione.
  • Il textLanguageCode che indica la lingua in cui è scritta la recensione.

Per ottenere la valutazione complessiva del luogo, utilizza la Place.rating proprietà (devi richiedere il rating campo nei parametri della fetchFields() richiesta).

Attribuzioni dell'autore

Quando visualizzi una recensione, devi visualizzare anche le attribuzioni dell'autore. Utilizza la AuthorAttribution classe per restituire le attribuzioni. Un'attribuzione include il nome dell'autore (displayName), un URI per il suo profilo Google Maps (uri) e un URI per la foto dell'autore (photoURI). Lo snippet seguente mostra come restituire displayName, uri e photoURI per un'attribuzione. 

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