Display Google Places API Data Using jQuery - google-places.js

google-places.js is a jQuery plugin which displays Google Places data (currently only reviews) on the page using Google Map's Places API.

Installation:

# NPM
$ npm install google-places-data --save

# Bower
$ bower install google-places-data

How to use it:

1. Load the necessary jQuery library and Google Places JavaScript API in the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>

2. Load the google-places.js plugin's files in the page.

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

3. Create a container to display the places data.

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

4. Initialize the plugin and insert the Google Place ID into the placeId parameter. To find Your Google Places ID just click Place ID Finder.

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

5. Set the minimum rating value.

$("#google-reviews").googlePlaces({
  placeId: 'ChIJa2uI-Nt4bIcR5cvnOxD4cFg',
  min_rating: 3
});

6. Set the maximum number of entries to display.

$("#google-reviews").googlePlaces({
  placeId: 'ChIJa2uI-Nt4bIcR5cvnOxD4cFg',
  max_rows: 10
});

7. Enable and disable the animation when rotating through reviews.

$("#google-reviews").googlePlaces({
  placeId: 'ChIJa2uI-Nt4bIcR5cvnOxD4cFg',
  rotateTime: false
});

8. Use shorten name or not.

$("#google-reviews").googlePlaces({
  placeId: 'ChIJa2uI-Nt4bIcR5cvnOxD4cFg',
  shorten_names: true
});

9. More customization options.

$("#google-reviews").googlePlaces({
  schema:{
    displayElement: '#schema', 
    type: 'Store', 
    beforeText: 'Google Users Have Rated', 
    middleText: 'based on', 
    afterText: 'ratings and reviews'
  }, 
  address:{
     displayElement: "#google-address"
  }, 
  phone:{
    displayElement: "#google-phone"
  }, 
  staticMap:{
    displayElement: "#google-static-map", 
    width: 512, 
    height: 512, 
    zoom: 17, 
    type: "roadmap"
  }, 
  hours:{
    displayElement: "#google-hours"
  }
});

Changelog:

2019-06-11

• Update schema to include address and telephone automatically and add options for image and price range

2018-08-06

• ADD new shorten name feature

2018-03-06

• Fix namespace is no defined issue

---

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