Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Place Reviews

Spark icon

Page Summary

This example demonstrates how to retrieve place details, including the first review, using the Google Maps JavaScript API.
It displays the retrieved information (place name, address, review, rating, and author) within an info window on the map, anchored to a marker at the place's location.
If no reviews are found, the info window indicates this with a message.
The provided code snippets include TypeScript, JavaScript, CSS, and HTML for implementing this functionality.
Users can interact with the example through a live JSFiddle or by cloning and running the sample code locally.

This example retrieves place details including the first place review, and displays the information in an info window.

Read the documentation.

[フレーム]

TypeScript

letmap:google.maps.Map;
letcenterCoordinates={lat:42.349134,lng:-71.083184};// Boston, MA
letinfoWindow;
letcontentString;
asyncfunctioninitMap(){
const{Map,InfoWindow}=awaitgoogle.maps.importLibrary('maps')asgoogle.maps.MapsLibrary;
const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary('marker')asgoogle.maps.MarkerLibrary;
const{Place,Review}=awaitgoogle.maps.importLibrary('places')asgoogle.maps.PlacesLibrary;
map=newMap(document.getElementById('map')asHTMLElement,{
center:centerCoordinates,
zoom:14,
// ...
});
// Use a place ID to create a new Place instance.
constplace=newPlace({
id:'ChIJpyiwa4Zw44kRBQSGWKv4wgA',// Faneuil Hall Marketplace, Boston, MA
});
// Call fetchFields, passing 'reviews' and other needed fields.
awaitplace.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.
letreviewRating=place.reviews[0].rating;
letreviewText=place.reviews[0].text;
letauthorName=place.reviews[0].authorAttribution!.displayName;
letauthorUri=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=newInfoWindow({
content:contentString,
ariaLabel:place.displayName,
});
// Add a marker.
constmarker=newAdvancedMarkerElement({
map,
position:place.location,
title:place.displayName,
});
// Show the info window.
infoWindow.open({
anchor:marker,
map,
});
}
initMap();index.ts

JavaScript

letmap;
letcenterCoordinates={lat:42.349134,lng:-71.083184};// Boston, MA
letinfoWindow;
letcontentString;
asyncfunctioninitMap(){
const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps");
const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");
const{Place,Review}=awaitgoogle.maps.importLibrary("places");
map=newMap(document.getElementById("map"),{
center:centerCoordinates,
zoom:14,
// ...
});
// Use a place ID to create a new Place instance.
constplace=newPlace({
id:"ChIJpyiwa4Zw44kRBQSGWKv4wgA",// Faneuil Hall Marketplace, Boston, MA
});
// Call fetchFields, passing 'reviews' and other needed fields.
awaitplace.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.
letreviewRating=place.reviews[0].rating;
letreviewText=place.reviews[0].text;
letauthorName=place.reviews[0].authorAttribution.displayName;
letauthorUri=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=newInfoWindow({
content:contentString,
ariaLabel:place.displayName,
});
// Add a marker.
constmarker=newAdvancedMarkerElement({
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;
}
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>
 </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>index.html

Try Sample

JSFiddle.net Google Cloud Shell

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclone-bsample-place-reviewshttps://github.com/googlemaps/js-samples.git
cdjs-samples
npmi
npmstart

Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.

gitcheckoutsample-SAMPLE_NAME
npmi
npmstart