Opiniones sobre lugares

Desarrolladores del Espacio Económico Europeo (EEE)

Las opiniones sobre lugares te permiten acceder a millones de opiniones y calificaciones de alta calidad de la base de datos de Places, y mostrarlas en tus páginas web.

Consulta el ejemplo de código fuente completo

En este ejemplo, se recuperan los detalles del lugar, incluida la primera opinión sobre el lugar, y se muestra la información en una ventana de información.

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

Prueba la muestra

Obtener opiniones sobre un lugar

Para obtener datos de opiniones sobre un lugar, incluye el campo reviews en los parámetros de la solicitud fetchFields(). La instancia de Place resultante contiene un array de objetos Review, desde los que puedes acceder a la información de opinión necesaria.

En el siguiente ejemplo, se muestra cómo realizar una solicitud de Place Details para obtener opiniones. 

// 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

La instancia de Review contiene lo siguiente:

  • Una AuthorAttribution
  • El rating que proporciona el usuario.
  • publishTime (fecha) y relativePublishTimeDescription (hora de la revisión en relación con la hora actual, por ejemplo, "hace un mes").
  • Es la revisión text.
  • Es el textLanguageCode que indica el idioma en el que se escribió la opinión.

Para obtener la calificación general del lugar, usa la propiedad Place.rating (debes solicitar el campo rating en los parámetros de la solicitud fetchFields()).

Atribuciones de autor

Cuando muestres una opinión, también debes mostrar las atribuciones del autor. Usa la clase AuthorAttribution para devolver las atribuciones. Una atribución incluye el nombre del autor (displayName), un URI para su perfil de Google Maps (uri) y un URI para la foto del autor (photoURI). El siguiente fragmento muestra cómo devolver displayName, uri y photoURI para una atribución. 

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