Implementing Google Places reviews on a website with the help of JavaScript

Question

Implementing Google Places reviews on a website with the help of JavaScript

Struggling to display the Google reviews for my company on our website, I can't seem to make it work. I've attempted to use this code:

<script>
    $(function() {
        var people = [];
        $.getJSON('https://maps.googleapis.com/maps/api/place/details/json?placeid=<?php echo $placeId ?>&key=<?php echo $api_key ?>', function(data) {
            $.each(data.reviews, function(i, f) {
                var tblRow = "<tr>" + "<td>" + f.author_name + "</td>" +
                "<td>" + f.rating + "</td>" + "<td>" + f.relative_time_description + "</td>" + "<td>" + f.text + "</td>" + "</tr>"
                $(tblRow).appendTo("#google-reviews");
            });
        });
    });
</script>

I'm looking to receive a response similar to this json file:

{
   "html_attributions" : [],
   "result" : {
      ...
      "rating" : 4.5,
      "reference" : "CmRSAAAAjiEr2_A4yI-DyqGcfsceTv-IBJXHB5-W3ckmGk9QAYk4USgeV8ihBcGBEK5Z1w4ajRZNVAfSbROiKbbuniq0c9rIq_xqkrf_3HpZzX-pFJuJY3cBtG68LSAHzWXB8UzwEhAx04rgN0_WieYLfVp4K0duGhTU58LFaqwcaex73Kcyy0ghYOQTkg",
      "reviews" : [
         {
            "author_name" : "Robert Ardill",
            "author_url" : "https://www.google.com/maps/contrib/106422854611155436041/reviews",
            "language" : "en",
            "profile_photo_url" : "https://lh3.googleusercontent.com/-T47KxWuAoJU/AAAAAAAAAAI/AAAAAAAAAZo/BDmyI12BZAs/s128-c0x00000000-cc-rp-mo-ba1/photo.jpg",
            "rating" : 5,
            "relative_time_description" : "a month ago",
            "text" : "Awesome offices. Great facilities, location and views. Staff are great hosts",
            "time" : 1491144016
         }
      ],
      "types" : [ "point_of_interest", "establishment" ],
      "url" : "https://maps.google.com/?cid=10281119596374313554",
      "utc_offset" : 600,
      "vicinity" : "5, 48 Pirrama Road, Pyrmont",
      "website" : "https://www.google.com.au/about/careers/locations/sydney/"
   },
   "status" : "OK"
}

However, I keep encountering two errors:

https://maps.googleapis.com/maps/api/place/details/json?placeid={placeid}&key={apikey} net::ERR_FAILED
Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/details/json?placeid={placeid}&key={apikey}' from origin '{the site I work on}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Anyone have a solution for this issue?

javascript json google-places-api

Answer 1

Answer №1

When using Places Details through a client-side application, it's necessary to utilize the Places Library in Maps JavaScript API. You can find more information in the following docs: https://developers.google.com/maps/documentation/javascript/places

Firstly, you need to include the Google Maps API with the Places library enabled and set up the map container:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<body>
    <div id="map"></div>
    <div id="google-reviews"></div>
</body>

Next, execute the request:

<script>
var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(place);
        $.each(place.reviews, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.author_name + "</td>" +
        "<td>" + f.rating + "</td>" + "<td>" + f.relative_time_description + "</td>" + "<td>" + f.text + "</td>" + "</tr>"
        $(tblRow).appendTo("#google-reviews");
    });

  }
}
</script>

For an example, check out this link: https://jsfiddle.net/scarabs/we541sqg/1/

Answer 2

When using Places Details through a client-side application, it's necessary to utilize the Places Library in Maps JavaScript API. You can find more information in the following docs: https://developers.google.com/maps/documentation/javascript/places

Firstly, you need to include the Google Maps API with the Places library enabled and set up the map container:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<body>
    <div id="map"></div>
    <div id="google-reviews"></div>
</body>

Next, execute the request:

<script>
var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(place);
        $.each(place.reviews, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.author_name + "</td>" +
        "<td>" + f.rating + "</td>" + "<td>" + f.relative_time_description + "</td>" + "<td>" + f.text + "</td>" + "</tr>"
        $(tblRow).appendTo("#google-reviews");
    });

  }
}
</script>

For an example, check out this link: https://jsfiddle.net/scarabs/we541sqg/1/

Answer 3

Answer №2

I took a unique approach by creating a file named googleData.php which I scheduled to run twice daily using a cron job. Here is the code snippet:

<?php 
include 'config.php';
$api_key = $config["apikey"];
$placeId = $config["locationId"];
$response = file_get_contents("https://maps.googleapis.com/maps/api/place/details/json?placeid=$placeId&fields=name,rating,reviews&key=$api_key");

$fp = fopen('googleData.json', 'w');
fwrite($fp, $response);
fclose($fp);
?>

This script generated the following JSON response in the file googleData.json:

 {
   "html_attributions" : [],
   "result" : {
      "name" : "Google Place",
      "rating" : 4.7,
      "reviews" : [
         {
            "author_name" : "John Doe",
            "author_url" : "example.com/johndoe",
            "language" : "en",
            "profile_photo_url" : "example.com/johndoepic",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         { 
            // Additional review objects omitted for brevity
         }
      ]
   },
   "status" : "OK"
}

Using this data, I created another file called getreviews.php with the following code:

var json = $.getJSON("googleData.json", function(response) {
    var result = response.result;
})

This allowed me to access and display each value from the Google API response.

If anyone is interested, here is what was stored in the config.php file:

<?php
    $config["apikey"] = "YOUR_API_KEY";
    $config["locationId"] = "YOUR_PLACE_ID";
?>

Answer 4

I took a unique approach by creating a file named googleData.php which I scheduled to run twice daily using a cron job. Here is the code snippet:

<?php 
include 'config.php';
$api_key = $config["apikey"];
$placeId = $config["locationId"];
$response = file_get_contents("https://maps.googleapis.com/maps/api/place/details/json?placeid=$placeId&fields=name,rating,reviews&key=$api_key");

$fp = fopen('googleData.json', 'w');
fwrite($fp, $response);
fclose($fp);
?>

This script generated the following JSON response in the file googleData.json:

 {
   "html_attributions" : [],
   "result" : {
      "name" : "Google Place",
      "rating" : 4.7,
      "reviews" : [
         {
            "author_name" : "John Doe",
            "author_url" : "example.com/johndoe",
            "language" : "en",
            "profile_photo_url" : "example.com/johndoepic",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         { 
            // Additional review objects omitted for brevity
         }
      ]
   },
   "status" : "OK"
}

Using this data, I created another file called getreviews.php with the following code:

var json = $.getJSON("googleData.json", function(response) {
    var result = response.result;
})

This allowed me to access and display each value from the Google API response.

If anyone is interested, here is what was stored in the config.php file:

<?php
    $config["apikey"] = "YOUR_API_KEY";
    $config["locationId"] = "YOUR_PLACE_ID";
?>

Implementing Google Places reviews on a website with the help of JavaScript

Answer №1

Answer №2

Similar questions

Implement a timeout feature for npm clickhouse queries

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Tips for ensuring that a THREE.Group is always displayed in front of other objects

Sharing properties across various components with Next.js

Guide on utilizing the JSON string to update and obtain fresh information

Unclear outcomes from iterative loops

Initialize data only when the Nuxt.js application is first loaded

Executing all promises later in Node.js using Promise.all

Is Vue js converting nested objects into strings before returning them?

Gathering information from mapped objects when they are clicked in a React application

Tips for saving the web address and breaking down each word

An exploration on integrating a controller into an Angular directive class using Typescript

Is it possible to resize an image in a single direction?

NodeJS sqs-consumer continuously triggers the function to execute

The deployed MVC code encountered an unexpected token "u" in the JSON at position 0

Ensuring the cookie remains active throughout various subdomains

Is there a problem encountered when attempting to pass an array value as a string using props in Vue.js?

Accessing WCF REST endpoint using Ajax and transmitting data in JSON format

Step-by-step guide to creating a transition effect when the input changes

The button I have controls two spans with distinct identifiers