Pull Google Reviews and Rotate
Using the Google Places API is pretty simple in terms of maps etc. but the Place Details can be a tad trickier. I got a little help from Greg Green in outputting to the window, but added in a rotator script to rotate through each of the different reviews. Basically I’m putting this here to start a discussion about a cleaner way of doing this as I know it’s a bit sloppy and even Greg would be shaking his head in disappointment with me for making his code messy. Anyway, I couldn’t really find a good resource for this initially besides the Google documentation so hopefully this helps someone.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
(function($) {
function requestReviews() {
var map = new google.maps.Map(document.createElement("div"), {
center: new google.maps.LatLng(YOURlat, YOURlong),
zoom: 15
}),
placesService = new google.maps.places.PlacesService(map),
request = {
reference: 'place_YOUR_reference_key_here'
};
placesService.getDetails(request, buildAndPlaceReviews);
}
function buildAndPlaceReviews(place, status) {
var reviewsHtml = '',
review,
reviewsFrag,
i;
// double-check to see if the place name matches your place reviews
if (status === google.maps.places.PlacesServiceStatus.OK &&
place.name === 'YOUR PLACE NAME') {
reviewsHtml += '<div class="content-slider">';
for (i = 0; i < place.reviews.length; i++) {
review = place.reviews[i];
if ( i === 0 ) {
reviewsHtml += '<div class="fade current" >';
} else {
reviewsHtml += '<div class="fade" >';
}
reviewsHtml += '<span class="review-rating ' + review.rating + '"></span>';
reviewsHtml += '<p class="review-content">' + review.text + '</p>';
reviewsHtml += '<p class="review-reviewer">' + review.author_name + '</p>';
reviewsHtml += '</div>';
}
reviewsHtml += '</div>';
reviewsFrag = $(reviewsHtml);
$('#content').prepend(reviewsFrag);
var contentHeight = $('.content-slider div.current').height();
$('.content-slider').height(contentHeight);
}
}
$(function() {
requestReviews();
});
})(jQuery);
//modified from http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
function cycleReviews(){
// the current review
var $active = $('.content-slider .current');
// the next review to show, checks if there's a next, if not back to the beginning
var $next = ($active.next().length > 0) ? $active.next() : $('.content-slider div:first');
// the actual fading portion
$active.fadeOut(500,function(){
// remove the class and add class to the next to fade in
$(this).removeClass('current');
$next.fadeIn().addClass('current');
});
// variable height so you can place all absolutely in the top left then adjust the container height fluidly
var maxHeight = 0;
var tmpHeight = $next.height() + $next.position().top;
console.log('tmp' + tmpHeight);
if (tmpHeight > maxHeight) {
maxHeight = tmpHeight;
$('.content-slider').height(maxHeight);
}
}
$(document).ready(function(){
setInterval('cycleReviews()', 7000);
});
</script>
Some CSS that went along with this:
.content-slider{
position:relative;
clear: both;
/* transition the height nicely */
-webkit-transition: height 2s;
transition:height 2s;
}
.content-slider .fade{position:absolute;z-index:1; background: #fff; display: none;}
.content-slider .fade.current{z-index:3; display: block;}
So that’s pretty much it. All you need to know is your reference key from a standard place search. For more on a really dumb work around to find the reference key, click here.
reference key is replaced bij place_id……
How to change this script ?!