Com as avaliações de lugares, você pode acessar milhões de avaliações e classificações de alta qualidade do banco de dados do Google Places e exibi-las nas suas páginas da Web.
Confira o código-fonte de exemplo completo
Este exemplo recupera detalhes do lugar, incluindo a primeira avaliação, e mostra as informações em uma janela de informações.
TypeScript
let map: google.maps.Map; let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA let infoWindow; let contentString; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; const { Place, Review } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: centerCoordinates, zoom: 14, // ... }); // Use a place ID to 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'], })&&; // If there are> any reviews display the first one. if (place.reviews place.reviews.length 0) { // Get info for the first review. let reviewRating = place.reviews[0].rating; let reviewText = place.reviews[0].text; let authorName = place.reviews[0].authorAttribution!.displayName; let authorUri = place.reviews[0].authorAttribution!.uri;< // F><o>rmat the review usin<g ><HTML>. con<tentString =` > div id="ti<tle&>quot;b${place<.displayName}/b/div div i>d="address"<${>place.formatt<edAddress}/div > a href="${au<thor>Uri}" ta<rget="_bla><n>k"Author: ${auth<or><Name>}/a div id="rating"Rating: ${reviewRating} stars/div div id="rating"pReview: ${reviewText}/p/div`; } else { contentString = 'No reviews were found for ' + place.displayName + '.'; } // Create an infowindow to display the review. infoWindow = new InfoWindow({ content: contentString, ariaLabel: place.displayName, }); // Add a marker. const marker = new AdvancedMarkerElement({ map, position: place.locati title: place.displayName, }); // Show the info window. infoWindow.open({ anchor: marker, map, }); } initMap();index.ts
JavaScript
let map; let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA let infoWindow; let contentString; async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const { Place, Review } = await google.maps.importLibrary("places"); map = new Map(document.getElementById("map"), { center: centerCoordinates, zoom: 14, // ... }); // Use a place ID to 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", &qu&&ot;reviews"], }>); // If there are any reviews display the first one. if (place.reviews place.reviews.length 0) { // Get info for the first review. let reviewRating = place.reviews[0].rating; let reviewText = place.reviews[0].text; let authorName = place.reviews[0].authorAttribution.displayName; let authorUri = place.reviews[<0].authorAttri><b>ution.uri; // F<or><mat >the review us<ing HTML. co>ntentString = ` < d>iv id="t<itle"b${place.displayName}/b/div> div id=&<qu>ot;address&qu<ot;${place.form>attedAddress}/div < a h>ref="${a<uthorUri}">< >target="_blank&q<uo><t;Au>thor: ${authorName}/a div id="rating"Rating: ${reviewRating} stars/div div id="rating"pReview: ${reviewText}/p/div`; } else { contentString = "No reviews were found for " + place.displayName + "."; } // Create an infowindow to display the review. infoWindow = new InfoWindow({ content: contentString, ariaLabel: place.displayName, }); // Add a marker. const marker = new AdvancedMarkerEle map, position: place.location, title: place.displayName, }); // Show the info window. infoWindow.open({ anchor: marker, map, }); } initMap();index.js
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #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=&q>uot<;modu>le&<quot>; src<="./ind><ex.j>s"<;/script /head bod>y < div i>d=&>quot;map"/div !-- 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)={awa>it (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+>" c&&ould not loa>d."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.hea<d.appen>d(a<)}));>d<[l]?c>n(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=r.add(f)u().then(()=d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});/script /body /htmlindex.html
Testar amostra
Conferir avaliações de um lugar
Para receber dados de avaliações de um lugar, inclua o campo reviews
nos parâmetros de solicitação fetchFields()
. A instância de lugar resultante contém uma matriz de objetos Review
,
que permite acessar as informações de análise necessárias.
O exemplo a seguir mostra como fazer uma solicitação de detalhes do lugar para avaliações.
// Use a place ID to 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"], }); // If there&& are any reviews displ>ay the first one. if (place.reviews place.reviews.length 0) { // Get info for the first review. let reviewRating = place.reviews[0].rating; let reviewText = place.reviews[0].text; let authorName = place.reviews[0].authorAttribution.displayName; let authorUri = place.reviews[0].authorAttribution.uri; // Fo<rmat the revie><w> using HTML. conte<nt><Stri>ng = ` < div id=&qu>ot;title"b${place.di<spla>yName}/b/di<v div id="address">;${place.formattedAdd<re>ss}/div < a href=&>quot;${authorUri}" targe<t=&q>uot;_blank&<quot;Author: ${><a>uthorName}/a < ><div >id="rating"Rating: ${reviewRating} stars/div div id="rating"pReview: ${reviewText}/p/div`; } else { contentString = "No reviews were found for " + place.displayName + "."; } / an infowindow to display the review. infoWindow = new InfoWindow({ content: contentString, ariaLabel: place.displayName, }); index.js
A instância Review
contém o seguinte:
- Um
AuthorAttribution
- O
rating
fornecido pelo usuário. publishTime
(data) erelativePublishTimeDescription
(tempo de revisão em relação ao tempo atual, por exemplo, "há um mês").- A avaliação
text
. - O
textLanguageCode
que indica o idioma em que a avaliação foi escrita.
Para conferir a classificação geral do lugar, use a propriedade Place.rating
. É necessário solicitar o campo rating
nos parâmetros de solicitação fetchFields()
.
Atribuições do autor
Ao mostrar uma avaliação, também é necessário mostrar as atribuições do autor. Use a classe
AuthorAttribution
para retornar atribuições. Uma atribuição inclui o nome do autor (displayName
), um URI para o perfil dele no Google Maps (uri
) e um URI para a foto do autor (photoURI
). O snippet a seguir mostra como retornar displayName
, uri
e photoURI
para uma atribuição.
let authorName = place.reviews[0].authorAttribution!.displayName; let authorUri = place.reviews[0].authorAttribution!.uri; let authorPhoto = place.reviews[0].authorAttribution!.photoURI;