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 ?!