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>
        (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 = '',

                // 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);

                    var contentHeight = $('.content-slider div.current').height();


            $(function() {


        //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
                // remove the class and add class to the next to fade in
              // 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;

            setInterval('cycleReviews()', 7000);

Some CSS that went along with this:

	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.

Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
Roy Mohan
Roy Mohan
6 years ago

reference key is replaced bij place_id……

How to change this script ?!

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

Would love your thoughts, please comment.x