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>
