Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
用 Google Places API 取得我的商家評論
因為公司的案子，所以研究了一下怎麼用 Google Places API 將我的商家中的評論，嵌入在網站當中。如果是用 WordPress 的話，只要透過外掛就能進行，但這次是放在一頁式網站上，所以自己必須從頭了解一次 Places API 的呼叫機制。
內容目錄
WordPress 的替代方案
比較簡單一點的作法，是直接使用 WordPress 外掛，例如 Widget for Google Reviews。
接著只要按照下列步驟取得 Google 的 API 憑證即可：
- 前往 GCP 的主控台。建立一個專案，並確定帳號已綁定付費方式。
- 選擇專案，並在左側的選單中點選 [API 和服務]。
- 點選上方的 [+啟用 API 和服務]。
- 搜尋 [Places API] 後點選並啟用 API。
- 點選 [API 和服務] 中的 [憑證] 後，點擊 [建立憑證] > [API 金鑰]。
- 頁面上會出現你的金鑰，可以點擊複製的圖示複製金鑰。但我強烈建議先點擊 [限制金鑰] 限制金鑰的存取權。
- [應用程式限制] 中，選擇 [HTTP 參照網址]，並輸入你的網域名稱，如
huanyichuang.com/*，加入萬用字元*可以包含子路徑或子網域。 - [API 限制] 中，點選 [限制金鑰]，並選擇 Places API。
- 最後將畫面右上角的 API Key 複製貼上到外掛設定頁即可。
手動嵌入
以下的程式碼片段，是參考開發人員手冊的作法。這個作法中，需要啟用 Places API 與 Google Maps JavaScript API。
首先，先在你的 <script> 區段，或是 JavaScript 檔案中加入以下程式碼：
/**
* Google Map
*/
function initMap() {
const map = new google.maps.Map( document.getElementById( 'map' ), {
center: { // 經緯度
lat: 25.0,
lng: 121.5
},
zoom: 15,
} ),request = { // 設定要查詢的欄位
placeId: '', // 可於 https://developers.google.com/places/web-service/place-id 查詢
fields: [ 'name', 'url', 'reviews' ]
},
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if ( status == google.maps.places.PlacesServiceStatus.OK ) {
const reviews = place.reviews;
let html = '<div class="reviews">';
reviews.forEach( ( review ) => {
let content = review.text;
html += `<div class="review">
<div class="thumbnail"><img src="${review.profile_photo_url}" onerror="if(this.src!=='${review.profile_photo_url}.jpg')this.src='${review.profile_photo_url}.jpg'"/></div>
<div class="info">
<div class="review-author-name">${review.author_name}</div>
<div class="relative-time">${review.relative_time_description}</div>
<div class="stars" style="--star:${review.rating}"></div>
<div class="review-content">${content}</div>
</div></div>`;
} );
html += '</div>';
document.getElementById( 'post-reviews' ).innerHTML = html;
}
}
}
接著，在 </body> 之前加入以下的 HTML 代碼：
<script defer
src="https://maps.googleapis.com/maps/api/js?key={{你的 API 金鑰}}&libraries=places&callback=initMap">
</script>樣式方面，這裡使用了 .stars 這個類別屬性來製作評論的星星：
#reviews .stars {
--percent: calc( var(--star) / 5 * 100%);
display: inline-block;
font-size: 16px;
font-family: Times; /* make sure ★ appears correctly */
line-height: 1;
}
#reviews .stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg, #fc0 var(--percent), #fff var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#reviews .review {
display: grid;
grid-template-columns: 20% auto;
grid-gap: 1em;
margin-bottom: 1em;
}
#reviews .review .info {
background: #fff;
max-height: 5em;
overflow: scroll;
padding: 0.5em 1em;
}
#reviews .review:nth-child(even) .info {
background: #eee;
}不顯示 Google Maps 的方法
如果是要從前端存取 Google Maps 的資料，那必須要建立一個 map 物件 (也就是需要多一次的 Google Maps JavaScript 請求)。不過如果實在不想要在前端顯示地圖，只想顯示評論的話，則可以改用這種方法：
const map = new google.maps.Map( document.createElement( 'div' ) );
Places API 使用條款
根據 Places API Policies，如果你的頁面中沒有使用 Google Maps，你仍然需要展示 Powered By Google 的 logo。此外，你的網頁也需要有隱私權政策以及其他使用者資料保護的條款。
跨來源存取 (Cross Origin Request Sharing)
根據 Google Maps GitHub 專案中的討論，如果是在前端執行的話，是不能透過 https://maps.googleapis.com/maps/api/place/details/json?place_id={{PLACE ID}}&key={{API_KEY}}&fields=reviews 的方式直接存取評論的，因為這中間會有跨來源請求的問題。
計費方式
Google Maps Platform 的 API 是需要付費的。
雖然說要付費，但每個帳號可以有每個月 200 元美金的免費額度，因此可以先估算一下目前專案中的流量是否會超過免費額度。
根據 Google Maps Platform 的〈定價與方案〉，我使用過的三種 API 計費方式分別如下：
| API | 功能 | 費用 (每 1,000 次請求) |
|---|---|---|
| Google Maps Embed API | 用 iframe 嵌入的簡單互動地圖。 | 免費 |
| Google Maps JavaScript API | 用 JavaScript 呼叫的互動地圖，可以自訂樣式。 | 7 美元 |
| Google Places API | 載入地點的相關資料，如評分、評論與用餐氛圍等。 | 17 美元 22 美元 (+評論) |
參考資料
