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