Created
January 27, 2020 09:39
-
-
Save DoubleMarv/6c34e18f3e360557954b6527fd32b6c4 to your computer and use it in GitHub Desktop.
Google reviews
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> .reviews-section{background: #f7f6f6;}.reviewcard{} .reviewcard .reviewtext{font-size: .85em; } .reviewcard .reviewauthor{border-top: 1px solid #d8c9d8; padding-top: 1em; margin-top: 1em; } .reviewcard .reviewauthor .authortitle{font-size: 1.1em; font-weight: 600; width: 100%; } .reviewcard .reviewauthor .authortitle a{font-size: .85em; font-weight: 300; color: #d8c9d8; float: right; } .stars span{color: #ffc633; font-size: 1.5em; } </style> | |
| <!-- ////////reviews////////// --> | |
| <section class="reviews-section doublemarvellous"> | |
| <div class="container"> | |
| <div id="reviews" class="columns is-marginless is-multiline"></div> | |
| <!-- /////////we're hiding this map///////// --> | |
| <div id="map"></div> | |
| <script async defer | |
| src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&libraries=places&callback=initReviews"> | |
| </script> | |
| <script> | |
| //doublemarvellous get google reviews show stars | |
| function initReviews() { | |
| const stargetter = function(starso){ | |
| if(starso === 5){ | |
| return '<span>★</span> <span>★</span> <span>★</span> <span>★</span> <span>★</span>' | |
| } else if (starso === 4){ | |
| return '<span>★</span> <span>★</span> <span>★</span> <span>★</span>' | |
| } else if (starso === 3){ | |
| return '<span>★</span> <span>★</span> <span>★</span>' | |
| } else if (starso === 2){ | |
| return '<span>★</span> <span>★</span>' | |
| } else if (starso === 1){ | |
| return '☆' | |
| } else if (starso === 0){ | |
| return ' ' | |
| } else { | |
| return | |
| } | |
| }; | |
| const reviewbox = document.getElementById('reviews'); | |
| const map = new google.maps.Map(document.getElementById('map'), { | |
| center: {lat: -33.866, lng: 151.196}, | |
| zoom: 15 | |
| }); | |
| // | |
| const request = { | |
| placeId: 'YOURPLACEIDHERE', | |
| fields: ['name', 'formatted_address', 'place_id', 'geometry', 'reviews'] | |
| }; | |
| // | |
| var service = new google.maps.places.PlacesService(map); | |
| // | |
| service.getDetails(request, function(place, status) { | |
| console.log(place.reviews); | |
| // | |
| let i; | |
| for (i = 0; i < place.reviews.length; i++) { | |
| reviewbox.innerHTML += '<div class="column is-one-third reviewcard"><div class="reviewtext matchy">'+place.reviews[i].text + '</div><div class="stars">'+ | |
| stargetter(place.reviews[i].rating) | |
| +'</div><div class="reviewauthor"><p class="authortitle">'+place.reviews[i].author_name + ' <a class="tag" href="'+place.reviews[i].author_url + '"><span>Read Review</span></a></p></div></div>'; | |
| } | |
| }); | |
| } | |
| </script> | |
| </div> | |
| </section> | |
| <!-- /////////end reviews///////// --> |
You're a lifesaver @DoubleMarv thank you so much, it's working perfectly. do you have a link so i can buy you a coffee or something alike?
Thanks, it works great :)
It works, but it shows the reviews in the wrong names :(
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey @Nectama I think this might solve your issue:
https://developers.google.com/maps/documentation/javascript/localization
Looks like something like this would do, line 13 updated ('es' should be spanish right?)
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&libraries=places&language=es&callback=initReviews">