Get Google Review API and Display the Rating and Reviews on Your Website
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!
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.
- 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
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.
