This project uses React.js to display Google reviews for a specific location using the Google Places API. It is set up with Vite.js for quick starts and efficient development.
The GoogleReviews.jsx file is the main component that uses the Google Places API to fetch and display reviews for a specific location. For instance, we are using the place ID for the Eiffel Tower in Paris, France.
- Fetches and displays Google reviews for a specific location.
- Shows the author's name, rating, and text of each review.
- Displays user profile pictures and photos associated with each review.
- Displays the name of the location along with the corresponding reviews.
- Manages request errors and HTTP status codes with specific error messages.
- Offers a test review simulation for development purposes without the need for a place ID.
- Allows for the simulation of reviews using static data when reviews are not available or in the absence of a valid place ID.
- Supports handling reviews in multiple languages through the integration of the
languageoption. - Includes a referrer policy for images to enhance user privacy.
- Provides additional details about reviews such as the original language, the review text, and the relative time description.
- [In Development] Manages translated reviews and offers options for sorting reviews.
-
Vite.js:
- Make sure you have Vite.js installed on your machine.
- You can create a new Vite project with React by running the following command:
npm init vite@latest
- Follow the prompts and select
reactas the project template.
-
Google Maps API:
- Go to the Google Cloud Console, create a new project, and enable the Google Maps JavaScript API and Places API.
- Create a new API key and take note of it; you will need it to configure your project.
-
PlaceID:
- To obtain a place ID, visit the Google documentation that explains how to find or generate the place ID for reviews.
- Clone this repository onto your local machine.
- Install the dependencies by running the following command in the project directory:
npm install
- Open the
GoogleReviews.jsxorAdvancedGoogleReviews.jsxfile and replaceYOUR_API_KEYwith your Google Maps API key. - Replace the place ID with the ID of the location you want to fetch reviews for.
-
New Component Choice Script A new feature has been added to allow developers to choose between the standard
GoogleReviewscomponent and the advancedAdvancedGoogleReviewsversion before starting the development server. To do this, run:npm run dev
And follow the instructions in the terminal to select the component you want to use.
-
Open your browser and navigate to
http://localhost:3000to see the application in action.
-
Do not forget to update
YOUR_API_KEYwith your actual API key and adjust the instructions as necessary to match the exact setup of your project. -
Please be aware that access to review images may be restricted and result in 403 (Forbidden) errors. It may be necessary to check your Google API settings and ensure that all necessary permissions are properly configured or add
referrerPolicy="no-referrer"to<img/>. -
To leverage the full spectrum of Google API's capabilities and access more than the standard limit of five reviews, a subscription to Google's Premium Plan is required. This plan unlocks a wealth of additional data points, enriching the dataset at your disposal. However, it's important to consider the associated costs before opting in.
-
Business owners aiming to aggregate all customer feedback via the API will need to undergo a verification process. This is facilitated through the Google MyBusiness API, which offers a streamlined path to authentication and data retrieval. For a comprehensive guide to verification and Premium data access, please refer to the official Google My Business API documentation.
For any questions or issues, feel free to open an issue on GitHub or contact Google support.