Google Reviews Ratings Place - Free Download Display Reviews And Ratings Of A Place With jQuery And Google Maps

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

By Posted on

This time I will share jQuery Plugin and tutorial about Display Reviews And Ratings Of A Place With jQuery And Google Maps, hope it will help you in programming stack.

Google Reviews Ratings Place - Free Download Display Reviews And Ratings Of A Place With jQuery And Google Maps
File Size: 16.3 KB
Views Total: 7013
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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.

view source
1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="https://<a href="https://www.jqueryscript.net/tags.php?/map/">map</a>s.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.

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

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

view source
1 <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.

view source
1 $("#google-reviews").googlePlaces({
2   placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ'
3 });

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

view source
01 $("#google-reviews").googlePlaces({
02  
03   // place ID
04   placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ',
05  
06   // header content
07   header: "<h3>Google Reviews</h3>",
08  
09   // footer content
10   footer: '',
11  
12   // maximum number of reviews
13   maxRows: 6,
14  
15   // minimum number of ratings
16   minRating: 4,
17  
18   // localize month names
19   months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
20  
21   // break length
22   text_break_length: "90",
23  
24   // shorten names
25   shorten_names: true,
26  
27   // more reviews button url
28   moreReviewsButtonUrl: '',
29    
30   // button label
31   moreReviewsButtonLabel: 'Show More Reviews',
32    
33   // write review button url
34   writeReviewButtonUrl: '',
35    
36   // button label
37   writeReviewButtonLabel: 'Write New Review',
38  
39   // show review datte
40   showReviewDate: false,
41    
42   // show profile picture
43   showProfilePicture: true
44    
45 });

Changelog:

v1.3.2 (2020-10-11)

  • fix: apply prettier rules

v1.3.1 (2020-05-29)

202-01-29

  • cleanup

2019-12-06

  • v1.3.0: added option to show profile picture

2019-07-13

  • v1.2.4: refactor

2019-07-10

  • adds sort by timestamp

2019-07-07

  • renders empty if no reviews found

2019-04-04

  • Updated for NPM

2019-04-01

  • Update with “show more reviews” and “write a review” feature

Related posts: