Display Google Places API Data Using jQuery - google-places.js
File Size: | 8.4 KB |
---|---|
Views Total: | 4342 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.