###実現したいこと
Javascriptの処理でGoogle APIを利用して、
複数店舗の口コミのレートを1枚のページに表示させたい
###困っていること
一番目のPlace IDしか取得できず、
1つめの店舗のレーティングが他の場所にも複数表示されてしまいます。
###どうしたいか
2店舗目、3店舗目のPlace IDも
同一ページで実行するJavascriptで取得して
1枚のページに複数の店舗のレートを表示させたいです。
###該当コード
html
1<div class="js_review_wrap" data-place-id="1店舗目のPlace ID"> 2 <!-- 口コミレート表示エリア --> 3 <section class="js_review_over4"></section> 4 <!-- 口コミレート表示エリア --> 5</div> 6 7<div class="js_review_wrap" data-place-id="2店舗目のPlace ID"> 8 <!-- 口コミレート表示エリア --> 9 <section class="js_review_over4"></section> 10 <!-- 口コミレート表示エリア --> 11</div> 12 13<div class="js_review_wrap" data-place-id="3店舗目のPlace ID"> 14 <!-- 口コミレート表示エリア --> 15 <section class="js_review_over4"></section> 16 <!-- 口コミレート表示エリア --> 17</div> 18 19<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 20<script src="rating.js"></script>
Javascript
1jQuery(function($){ 2 const API_KEY = '自分のAPI KEY'; 3 4 $.getScript('https://maps.google.com/maps/api/js?key=' + API_KEY + '&libraries=places', function(){ 5 const service = new google.maps.places.PlacesService(document.createElement('div')); 6 7 // 全レビュー格納所 8 const allReview = []; 9 // プレイスIDを持つラッパー 10 const $review_wrap = $(".js_review_wrap"); 11 // 全レビュー出力場所 12 const $review_all = $(".js_review_all"); 13 // ☆4以上のレビュー出力場所 14 const $review_over4 = $(".js_review_over4"); 15 16 service.getDetails({ 17 // プレイスIDは投稿を想定しているためHTMLから取得 18 placeId: $review_wrap.data('place-id'), 19 fields: ['review'] 20 }, function(place, status) { 21 if (status == google.maps.places.PlacesServiceStatus.OK) { 22 $.each(place.reviews, function(){ 23 24 // レビューの氏名・レートを取得し格納 25 const reviewObj = {}; 26 reviewObj['name'] = this.author_name; 27 reviewObj['rate'] = this.rating; 28 29 // 全レビュー格納所へin 30 allReview.push(reviewObj); 31 }); 32 } 33 34 // 全クチコミを回す 35 for (const key in allReview) { 36 // 全クチコミ格納dl 37 const $dl = $('<dl class="list-review-output" data-rate="' + allReview[key].rate + '" />'); 38 // ☆4以上の口コミ格納dl 39 const $dl_rate_over4 = $('<div class="list-review-output" />'); 40 41 // レートが☆4以上なら 42 if (allReview[key].rate >= 4) { 43 $dl_rate_over4.append('<div class="namae">' + allReview[key].name + ' さん</div>'); 44 $dl_rate_over4.append('<div class="rate" data-rate="' + allReview[key].rate + '"></div>'); 45 46 // ☆4以上用のdlへ入れる 47 $review_over4.append($dl_rate_over4); 48 } 49 50 $dl.append('<dd class="namae">' + allReview[key].name + '</dd>'); 51 $dl.append('<dd class="data">' + allReview[key].content + '</dd>'); 52 // 全クチコミ用格納dlにどんどん追加する 53 $review_all.append($dl); 54 } 55 }); 56 }); 57});
あなたの回答
tips
プレビュー