[SOLVED] Google Places API, how do I fetch the reviews?

Google Places API, how do I fetch the reviews?

A few people have asked this before but with no joy. But, it seems as though recently, google have offered the availability to fetch reviews from your google places via their api. https://developers.google.com/maps/documentation/javascript/places

I have the url that shows the json of the exact google place I want, however, I cannot see an example on how to fetch the reviews only from this and am completely stuck. Their example shows how to show the map, but not how to fetch the reviews only. Has anyone done this? If so, is there an example of how to do it? Thanks.

Solution

Once you have the id of a place you can do

  var request = {
    placeId: 'place-ID-here' // example: ChIJN1t_tDeuEmsRUsoyG83frY4
  };

  var service = new google.maps.places.PlacesService(map); // map is your map object

  service.getDetails(request, function(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      console.log(place.reviews);
    }
  });

Update with full working example (https://codepen.io/gpetrioli/pen/OmQyEE)

var map, service;

function initMap() {
  var central_park = new google.maps.LatLng(40.764243, -73.973049);

  map = new google.maps.Map(document.getElementById("map"), {
    center: central_park,
    zoom: 14
  });

  var request = {
    location: central_park,
    radius: "500",
    types: ["food"]
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, searchResult);
}

function searchResult(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    // show first result on map and request for details
    var place = results[0];
    var marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map,
      title: place.name
    });
    var infowindow = new google.maps.InfoWindow({
      content: place.name
    });
    infowindow.open(map, marker);

    service.getDetails({placeId: place.place_id}, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        let reviewEl = document.querySelector('.reviews');
        for (let review of place.reviews){
          let li = document.createElement('li');
          li.innerHTML = `<div>Author: ${review.author_name}</div>
                          <em>${review.text}</em>
                          <div>Rating: ${review.rating} star(s)</div>`;
          reviewEl.appendChild(li);
        }
      }
    });
  }
}

* {
  box-sizing: border-box;
}

#map {
  width: 500px;
  height: 400px;
}

.reviews {
  padding:0;
  list-style:none;
}

.reviews li+li {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid black;
}
.reviews em{display:block;margin:0.3em 0;}

<div id="map"></div>
<ul class="reviews"></ul>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbDfZUthAGL2BW3jg9xhWglf6HLpJQ1AU&callback=initMap&libraries=places"
    async defer></script>