reactjsnode.jsgoogle-apigoogle-places-apigoogle-reviews

Google places API reviews translated and not shown in original language


I am using the API to show reviews but for some reason even though they are originally in Slovak language they are translated to english when I try to fetch them as you can see here:




   author_name
   : 
   "Tomáš Uhliarik"
   author_url
   : 
   "https://www.google.com/maps/contrib/111631361301310521467/reviews"
   language
   : 
   "en-US"
   original_language
   : 
   "sk"
   text
   : 
   "Professional approach and quality work. I recommend"
   translated
   : 
   true



I have tried to as another person here to change the request link:

"https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJt1LeJK3BFUcRgvatv67YD3c&fields=reviews&reviews_no_translations=true&tranlated=false&key=${apiKey}"

and add the "reviews_no_translation=true", also "language=sk" but still everything I do its still fetching it translated.

Here is the node.js code for the fetch:




const express = require("express");
const axios = require("axios");
const cors = require("cors");

const app = express();
const port = 3000;

app.use(cors());

app.get("/reviews", async (req, res) => {
  const placeId = "ChIJt1LeJK3BFUcRgvatv67YD3c";
  const apiKey = ""; // There is a valid one

  try {
    const response = await axios.get(
      `https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJt1LeJK3BFUcRgvatv67YD3c&fields=reviews&reviews_no_translations=true&tranlated=false&key=${apiKey}&language=sk`
    );
    res.json(response.data.result.reviews);
  } catch (error) {
    console.error("Error fetching Google reviews:", error);
    res.status(500).send("Error fetching Google reviews");
  }
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});



And here is the tsx code used for displaying it just in case:


import { useEffect, useState } from "react";
import axios from "axios";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./Home.css";

const Home = () => {
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    const fetchReviews = async () => {
      console.log(reviews);
      try {
        const response = await axios.get("http://localhost:3000/reviews");
        setReviews(response.data);
      } catch (error) {
        console.error("Error fetching Google reviews:", error);
      }
    };

    fetchReviews();
  }, []);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <div className="home">
      <Slider {...settings}>
        {reviews.map((review) => (
          <div key={review.time}>
            <p>{review.rating}</p>
            <p>{review.author_name}</p>
            <p>{review.text}</p>
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default Home;



Solution

  • I had to just restart the node.js server when I made changes to it so in the end the google api is working. And also fix some typos in the api link so its now like this: https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJt1LeJK3BFUcRgvatv67YD3c&fields=reviews&reviews_no_translations=true&translated=false&key=${apiKey}