Display Reviews And Ratings Of A Place With jQuery And Google Maps

Display Reviews And Ratings Of A Place With jQuery And Google Maps

Google Reviews is a small and easy jQuery plugin which embeds Google reviews and ratings of a matched place into the webpage using Google Places API.

See also:

How to use it:

1. Load the necessary jQuery library and Google Places API in the document. DO NOT FORGET TO SET YOUR OWN API KEY! You can create an API key here.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YourGoogleAPIKeyHere"></script>

2. Load the jQuery google-reviews plugin's files in the document.

<script src="jquery-google-reviews.js" defer></script>
<link href="jquery-google-reviews.css" rel="stylesheet">

3. The plugin needs an id to interact with, best with an empty div.

<div id="google-reviews"></div>

4. Call the function on the DIV element and insert the placeId into the JavaScript as follow. You can find a placeID here.

$("#google-reviews").googlePlaces({
  placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ'
});

5. All configuration options to customize the Google reviews and ratings.

$("#google-reviews").googlePlaces({
  // place ID
  placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ',
  // header content
  header: "<h3>Google Reviews</h3>",
  // footer content
  footer: '',
  // maximum number of reviews
  max_rows: 6,
  // minimum number of ratings
  min_rating: 4,
  // localize month names
  months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  // break length
  text_break_length: "90",
  // shorten names
  shorten_names: true
  
});

This awesome jQuery plugin is developed by simonneutert. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.06.2018
  • Source