Google reviews

gistfile1.txt

<style> .reviews-section{background: #f7f6f6;}.reviewcard{} .reviewcard .reviewtext{font-size: .85em; } .reviewcard .reviewauthor{border-top: 1px solid #d8c9d8; padding-top: 1em; margin-top: 1em; } .reviewcard .reviewauthor .authortitle{font-size: 1.1em; font-weight: 600; width: 100%; } .reviewcard .reviewauthor .authortitle a{font-size: .85em; font-weight: 300; color: #d8c9d8; float: right; } .stars span{color: #ffc633; font-size: 1.5em; } </style>


<!-- ////////reviews////////// -->
<section class="reviews-section doublemarvellous">
  <div class="container">

<div id="reviews" class="columns is-marginless is-multiline"></div>
<!-- /////////we're hiding this map///////// -->
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&libraries=places&callback=initReviews">
</script>
<script>
//doublemarvellous get google reviews show stars
function initReviews() {

const stargetter = function(starso){
if(starso === 5){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 4){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 3){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 2){
return '<span>&#9733;</span>&nbsp;<span>&#9733;</span>'
} else if (starso === 1){
return '&#9734'
} else if (starso === 0){
return '&nbsp;'
} else {
return
}
};
const reviewbox = document.getElementById('reviews');
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.866, lng: 151.196},
zoom: 15
});
//
const request = {
placeId: 'YOURPLACEIDHERE',
fields: ['name', 'formatted_address', 'place_id', 'geometry', 'reviews']
};
//
var service = new google.maps.places.PlacesService(map);
//
service.getDetails(request, function(place, status) {
console.log(place.reviews);
//
let i;
for (i = 0; i < place.reviews.length; i++) {
reviewbox.innerHTML += '<div class="column is-one-third reviewcard"><div class="reviewtext matchy">'+place.reviews[i].text + '</div><div class="stars">'+
stargetter(place.reviews[i].rating)
+'</div><div class="reviewauthor"><p class="authortitle">'+place.reviews[i].author_name + ' <a class="tag" href="'+place.reviews[i].author_url + '"><span>Read Review</span></a></p></div></div>';
}
});
}
</script>

  </div>
</section>
<!-- /////////end reviews///////// -->

does it work right now?

Yep this still works, just make sure to add your PLACEID into line 43, and of course your api key to line 13.

The rest is just styling then...

slide show possible?

Yes just use something like swiper js...this is not tested but you can figure it out...you are just making each review a slide and wrapping it in the swiper wrapper, then initialising the slider. DOn't forget to call the swiper js and css...

https://swiperjs.com/swiper-api

Replace

"reviewbox.innerHTML += '

"

with

reviewbox.innerHTML += '

---

Then do a wrapper:

replaced with

Then you should call the swiper slider in your js at the end

const swiper = new Swiper('#reviews', {
speed: 400,
spaceBetween: 100,
});

Good luck!

i have enable Maps JavaScript API and gerenate new api.
but seems not working..

Do you have errors in the console? Have you enabled billing on the Map?
I just checked this myself and still works so it should be fine. Remember your places ID and API

@DoubleMarv Still works great! Thanks for sharing! How can I tweak this to pull in all my reviews? It's only returning 5 for me.

Hi. I've doubled checked my place ID and API key. The API is receiving requests; however, I've tried using three differnt environments, and none of them display anything. The page is blank. Any insight would be appreciated.

@randybaum
HI
The same. Somehow solved this problem?

Hello boys and girls, I believe that you need to be verified to get more than 5 reviews in, or pay for the api possibly (last comment)- have a look here: https://stackoverflow.com/questions/39223719/to-get-more-than-5-reviews-from-google-places-api

Sorry!

It's great! Thank you so much for this. I had a lot of problems with CORS to get the data from google and this solution solved it.

Hey there! first off thank you so much for this, it's super useful and easy to use.
I do have one issue i can't seem to solve by myself, whenever displaying the reviews they appear translated to English (the original language is Spanish) but i can't seem to find a config or property to disable this automatic translation.
I'm guessing it's linked to my google clouds account, but i'm asking just in case there's something i missed in the code you posted.

Hey @Nectama I think this might solve your issue:
https://developers.google.com/maps/documentation/javascript/localization

Looks like something like this would do, line 13 updated ('es' should be spanish right?)

src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&libraries=places&language=es&callback=initReviews">

You're a lifesaver @DoubleMarv thank you so much, it's working perfectly. do you have a link so i can buy you a coffee or something alike?

Thanks, it works great :)

It works, but it shows the reviews in the wrong names :(