I’ve found this embed code for google maps reviews
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
window.onload = function() {
initMap()
};
function initMap() {
const request = {
placeId: "ChIJ_4vLJxkLYogRbK4WPjuyimY",
// fields: ["name", "formatted_address", "place_id", "geometry"],
};
const infowindow = new google.maps.InfoWindow();
const service = new google.maps.places.PlacesService(map);
service.getDetails(request, (place, status) => {
var json = place
//document.getElementById('TotalGoogleReviews').innerHTML = json.result.user_ratings_total
// document.getElementById('TotalGoogelRatings').innerHTML = json.result.rating
$.each(json.reviews, function(i,v) {
var rating = v.rating;
if (rating == 5) {
var starRating = "<i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i>";
} else if (rating == 4) {
var starRating = "<i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i>";
}
else if (rating == 3) {
var starRating = "<i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i>";
}
else if (rating == 2) {
var starRating = "<i class='fa fa-star' aria-hidden='true'></i><i class='fa fa-star' aria-hidden='true'></i>";
}
else {
var starRating = "<i class='fa fa-star' aria-hidden='true'></i>";
}
if (rating == 5) {
$('#google-reviews').append("<div class='review-wrap'>"
+"<div class='author'>"
+"<img class='author-img' src='"+v.profile_photo_url+"' alt='"+v.author_name+"' />"
+"<div class='author-name'>"+v.author_name+"</div>"
+"<div class='rating d-flex'>"+starRating+" "+v.relative_time_description+"</div>"
+"</div>"
+"<div class='review'>"+v.text+"</div>"
+"<img class='googlerevirewimages' src='https://firebasestorage.googleapis.com/v0/b/aceso-webflow-project.appspot.com/o/Google-Review-Transparent.png?alt=media&token=bf57b74f-55eb-475e-91fc-096eb426d6aa' alt='"+v.author_name+"' />"
+"</div>");
}
});
});
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
html {
height: 100%;
}
body {
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #cccccc 1%, #aaaaaa 100%);
background: -webkit-radial-gradient(center, ellipse cover, #cccccc 1%,#aaaaaa 100%);
background: radial-gradient(ellipse at center, #cccccc 1%,#aaaaaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#aaaaaa',GradientType=1 );
font-family: 'Open Sans', sans-serif;
font-size: 12px;
}
.reviews-container {
background: rgba(0 0 0 0);
}
#google-reviews {
}
.review-wrap {
margin-bottom: 20px;
border-radius: 15px;
background-color: white;
padding: 25px;
}
.review-wrap:last-of-type {
margin-bottom: 0;
}
.author {
margin-bottom: 15px;
font-size: 15px;
}
.author-img {
float: left;
margin-right: 10px;
max-width: 40px;
transition: filter ease-in-out .3s;
margin-bottom: 10px;
}
.author-img:hover {
filter: brightness(1);
}
.author-name {
font-weight: 600;
}
.rating i {
color: gold;
padding-right: 2px;
}
.review {
clear: both;
font-size: 14px;
}
.googlerevirewimages {
max-width: 100px;
margin-bottom: -30px;
margin-top: -10px;
}
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABfsosG8UXgG7ZjJ2p_LXeCiZpqBFh67w&callback=initMap&libraries=places&v=weekly"
async
></script>
<div class="reviews-container">
<div id="google-reviews"></div>
</div>
but I can’t figure out why it’s showing 10 rows instead of the 5 that are anyway maximum provided by the google api.
I tried: “max_rows:5,” below the “placeId: “” part of the JS code but it doesn’t work. When I save it and refresh the codepen page it shows 10 again.
Any hint would be helpfull, thanks a lot in advance!