Place reviews lets you access millions of high-quality reviews and ratings from the Places database, and display them on your web pages.
See the complete example source code
This example retrieves place details including the first place review, and displays the information in an info window.
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 ; // Format the review using HTML. contentString = ` <div id="title"><b> ${ place . displayName } < /b></div> <div id="address"> ${ place . formattedAddress } < /div > <a href=" ${ authorUri } " target="_blank">Author: ${ authorName } < /a > <div id="rating">Rating: ${ reviewRating } stars</div> <div id="rating"><p>Review: ${ 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.location , title : place.displayName , }); // Show the info window. infoWindow . open ({ anchor : marker , map , }); } initMap ();
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" , "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 ; // Format the review using HTML. contentString = ` <div id="title"><b> ${ place . displayName } < /b></div> <div id="address"> ${ place . formattedAddress } < /div > <a href=" ${ authorUri } " target="_blank">Author: ${ authorName } < /a > <div id="rating">Rating: ${ reviewRating } stars</div> <div id="rating"><p>Review: ${ 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 . location , title : place . displayName , }); // Show the info window. infoWindow . open ({ anchor : marker , map , }); } initMap ();
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="module" src="./index.js"></script> </head> <body> <div id="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)=>{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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Try Sample
Get reviews for a place
To get review data for a place, include the reviews
field in your fetchFields()
request parameters. The resulting Place instance contains an array of Review
objects,
from which you may access the needed review information.
The following example shows making a Place Details request for reviews.
// 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 ; // Format the review using HTML. contentString = ` <div id="title"><b> ${ place . displayName } < /b></div> <div id="address"> ${ place . formattedAddress } < /div > <a href=" ${ authorUri } " target="_blank">Author: ${ authorName } < /a > <div id="rating">Rating: ${ reviewRating } stars</div> <div id="rating"><p>Review: ${ 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 , });
The Review
instance contains the following:
- An
AuthorAttribution - The
ratinggiven by the user. - The
publishTime(Date), andrelativePublishTimeDescription(review time relative to the current time for example "a month ago"). - The review
text. - The
textLanguageCodeindicating the language in which the review is written.
To get the overall rating for the place, use the Place.rating
property (you must
request the rating
field in your fetchFields()
request parameters).
Author attributions
When you display a review, you must also display the author attributions for the review. Use the AuthorAttribution
class to return attributions. An attribution includes the author's name
( displayName
), a URI for their Google Maps profile ( uri
), and a URI
for the author's photo ( photoURI
). The following snippet shows returning the displayName
, uri
, and photoURI
for an attribution.
let authorName = place . reviews [ 0 ]. authorAttribution ! . displayName ; let authorUri = place . reviews [ 0 ]. authorAttribution ! . uri ; let authorPhoto = place . reviews [ 0 ]. authorAttribution ! . photoURI ;
