Как показать Google размещает отзывы на сайте, используя javascript - PullRequest
Новая
       5

Как показать Google размещает отзывы на сайте, используя javascript

1 голос
/ 26 марта 2020

Я пытаюсь показать все обзоры Google компании, в которой я работаю, на сайте, но я не могу заставить ее работать. Я попытался использовать следующий код для этого: 

<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>

Здесь я должен получить ответ, похожий на этот json файл: 

{
   "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"
}

и каждый раз, когда я получаю следующие 2 ошибки: 

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.

есть кто-нибудь, кто знает, как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Я сделал это по-другому, я создал файл с именем googleData. php, который я буду выполнять два раза в день, используя задание cron, со следующим кодом: 

<?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");
//$json = str_replace(array("\n", "\r"), ' ', $response);

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

this дал следующий ответ в файле googleData. json: 

  {
   "html_attributions" : [],
   "result" : {
      "name" : "name",
      "rating" : 4.7,
      "reviews" : [
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         }
      ]
   },
   "status" : "OK"
}

, который я мог бы затем использовать в другом файле с именем getreviews. php, который имел следующий код: 

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

с помощью которого я смог показать все значения json, которые я получил от Google.

для любопытных, это то, что я имел в конфигурации. php: 

<?php
    $config["apikey"] = "API_KEY";
    $config["locationId"] = "PLACE_ID";
?>
0 голосов
/ 26 марта 2020

Насколько я знаю, чтобы использовать Places Details через клиентское приложение, вы должны использовать Places Library в Maps JavaScript API. Вот документы: https://developers.google.com/maps/documentation/javascript/places

Итак, сначала вам нужно включить API Google Maps с включенной библиотекой мест и контейнером карты: 

<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>

А затем выполнить запрос : 

<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>

Вот пример: https://jsfiddle.net/scarabs/we541sqg/1/

...