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

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

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

  • Publication date: 25.10.2017
  • Source