Pull Google Reviews and Rotate

Posted on: February 16th, 2014

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.

Tags:

previous post: 26 Questions next post: Dumb Hack to Get Google Places Reference Key