Я использую плагин jQuery googlePlaces, который отображает отзывы Google, введя PlaceId и ключ API.
Он правильно отображает нормальные отзывы, но я хочу знать, как отображать отзывы с соответствующими фотографиями.
Я прошел через API, и кажется, что API предоставляет мне фотографии вроде:
"photos" : [
{
"height" : 1960,
"html_attributions" : [
"\u003ca href=\"https://maps.google.com/maps/contrib/108466408998685415628/photos\"\u003eBalaji Subramaniam\u003c/a\u003e"
],
"photo_reference" : "CmRaAAAAa0HfNUafmCo_nSl_rnAfhIrTi7jXbhwH_1cQXuF-NzmQPiGksdQUcoV72uIsfhjDq-Mn2Vaef67hCsnHvePd-ZrD_mc-FAlAn9ppcSc_ldUwXLBW_iE2v_YPHw69ULUYEhDUGNFKJUiON0JbnoJiLEOMGhRhHoZ_S_IFcVVHbXFwAhb3felibw",
"width" : 4032
},
....
],
Вот мой код:
<section class="content-wrapper-outer content-wrapper-b clearfix latest-news-section">
<div >
<h3 class="center-title">Google Reviews</h3>
<div id="gs" class="title-block2"></div>
<div id="kryesore" style="height:400px;overflow-y: scroll;">
<div id="google-reviews"></div>
</div>
<link rel="stylesheet" href="static/css/googleReviews.css" async>
<script src="https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js" async></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAgIApjP8qpCCXs5DwOpNSno96HO0Xg4A0"
type="text/javascript" aync></script>
<style>
.review-author {
text-transform: capitalize;
font-weight: bold;
font:black;
}
.review-text {
line-height: 1.55;
text-align: left;
max-width: 32em;
margin: auto;
padding: 10px;
border-radius: 2px;
}
.review-item {
border: solid 1px rgba(190,190,190,.35) !important;
border-radius:2px!important;
margin: 0 auto;
margin-right:2px!important;
display:block;
color:black;
padding: 1em;
font-family:'Montserrat', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
flex: 1 1 20%;
}
.review-stars ul {
display: inline-block;
list-style: none !important;
margin: 0;
padding: 0;
}
.review-stars ul li{
list-style-type: none !important;
}
.review-stars {
text-align: center;
font-size: 115%;
list-style-type: none !important;
}
@media (max-width: 450px){
.review-item {
margin-top: 0.3%!important;
}
.review-author {
text-transform: capitalize;
font-weight: bold;
font:black;
}
.review-text {
line-height: 1.55;
text-align: left;
max-width: 32em;
margin: auto;
padding: 10px;
border-radius: 2px;
}
.review-item {
border: solid 1px rgba(190,190,190,.35) !important;
border-radius:2px!important;
margin: 0 auto;
margin-right:2px!important;
display:block;
color:black;
padding: 1em;
font-family:'Montserrat', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
flex: 1 1 50%;
}
.review-stars ul {
display: inline-block;
list-style: none !important;
margin: 0;
padding: 0;
}
.review-stars ul li{
list-style-type: none !important;
}
.review-stars {
text-align: center;
font-size: 115%;
list-style-type: none !important;
}}
</style>
<script>
$(document).ready(function() {
try{
setTimeout(function(){
$("#google-reviews").googlePlaces({
placeId: 'ChIJjYRZfPHvDDkR8PWD4_H2SOk' //Find placeID @: https://developers.google.com/places/place-id
, render: ['reviews']
, min_rating: 4
, max_rows: 4
, schema: {
displayElement: '#schema' // optional, will use "#schema" by default
, beforeText: 'Googlers rated'
, middleText: 'based on'
, afterText: 'awesome reviewers.'
, type: 'Hostel'
, image: 'https://via.placeholder.com/150'
, priceRange: '$$'
}
});
}, 300);
}
catch(e){
console.log("error in loading google reviews"+e.message);
}
});
</script>
<a style="float:right;color:blue;" target="_blank"
href="https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,"><u><b>Read
all Reviews</b></u></a>
<!--https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,-->
<!-- END .content-wrapper-outer -->
</div>
</section>
<!--Test Schema HTML-->
<span itemscope="" itemtype="http://schema.org/Hostel">
<meta itemprop="image" content="https://via.placeholder.com/150">
<meta itemprop="priceRange" content="$$">
<meta itemprop="url" content="https://example.org">
<meta itemprop="telephone" content="(303) 954-0962">
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" style="display: none;">
<span class="street-address" itemprop="streetAddress">1217 20th St</span>,
<span class="locality" itemprop="addressLocality">Denver</span>,
<span class="region" itemprop="addressRegion">CO</span>
<span class="postal-code" itemprop="postalCode">80202</span>,
<span class="country-name" itemprop="addressCountry">USA</span>
</div>
Google Users Have Rated
<span itemprop="name">Hostel Fish</span>
<span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.80</span>/<span itemprop="bestRating">5</span>
based on <span itemprop="ratingCount">5</span>
ratings and reviews
</span>
</span>
Я хочу знать, как отображать Обзоры Google с соответствующими фотографиями.