Get Google Review API and Display the Rating and Reviews on Your Website

Hanwen Zhang
4 min readJul 14, 2022

--

If you need information about anything? Google it!

While I was trying to get the rating and review data through Google Review APIs based on the documentation and tutorials that are available online, I initially thought it would be an easy task, but it actually took me much longer than expected. Below, I will share some information that helped me to get the data I needed, and hopefully, it will help you save time and energy when you implement the API.

The Google Places API introduced in this article will only return five reviews for a given place ID. In order to have access to more than 5 reviews with the Google API you have to purchase Premium data Access from Google.

However, you will be able to filter the review, please take a look at this doc: https://developers.google.com/maps/documentation/places/web-service/details#PlaceReview.

Where to get the Place ID?

Check this link: https://developers.google.com/maps/documentation/places/web-service/place-id

Go to this section — Find the ID of a particular place, and literally type the location that you need the Place ID for, and it shows up right there. EASY!

Type the place information in the input box where you need the Place ID for.

Where to find the Place Detail API?

Check this link: https://developers.google.com/maps/documentation/places/web-service/details#maps_http_places_details_fields-js

Walk Through an Example to use the Google API Link

  • Create a new project
  • Copy the code to your editor and modify the keys based on your needs

Here we are using the Google API to get the details of the place, please note that I deleted the data field limitation part, the place id is the location you would like to get the details of, and get your API key through Google Console, which you would need to create a project and get an API key for it.

Create your API Key from this page, and click “CREATE CREDENTIALS”
  • Then execute the file using node app.js to print data out on the console. (Sorry I know it is not prettified, but we are able to get the data we need)

Please use this link as a guide to understanding the JSON structure of the response data: https://developers.google.com/maps/documentation/places/web-service/details#PlaceDetailsResponses

Returned JSON data containing place rating and reviews data

CORS Issue

Cross-Origin Resource Sharing allows a server to indicate any origin (domain, scheme, or port) other than its own from which a browser should permit loading resources for the security implications. Read more:

try {
const url = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${ID}&key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}`;
fetch(url, {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
}
}).then(res => {
if (res.ok) {
return res.json();
}
});
} catch (e) {
console.log(e);
}

You may experience a CORS issue if you use the above API for client-side applications since Google Places API Web Service on the client side whereas it is designed for server-side applications.

Read more via this link:

I am pretty sure there are different ways that you can get the rating and reviews through Google, like this documentation Work with review data from Google, but I am still having a hard time getting the {accountId} to access the data. So, please share with the community if you find any other useful information.

Thank you for reading my article, hope the information helps. Happy Coding.

--

--

Hanwen Zhang
Hanwen Zhang

Written by Hanwen Zhang

Full-Stack Software Engineer at a Healthcare Tech Company | Document My Coding Journey | Improve My Knowledge | Share Coding Concepts in a Simple Way