用 Google Places API 取得我的商家評論

因為公司的案子,所以研究了一下怎麼用 Google Places API 將我的商家中的評論,嵌入在網站當中。如果是用 WordPress 的話,只要透過外掛就能進行,但這次是放在一頁式網站上,所以自己必須從頭了解一次 Places API 的呼叫機制。

WordPress 的替代方案

比較簡單一點的作法,是直接使用 WordPress 外掛,例如 Widget for Google Reviews。

接著只要按照下列步驟取得 Google 的 API 憑證即可:

  1. 前往 GCP 的主控台。建立一個專案,並確定帳號已綁定付費方式。
  2. 選擇專案,並在左側的選單中點選 [API 和服務]。
  3. 點選上方的 [+啟用 API 和服務]。
  4. 搜尋 [Places API] 後點選並啟用 API。
  5. 點選 [API 和服務] 中的 [憑證] 後,點擊 [建立憑證] > [API 金鑰]。
  6. 頁面上會出現你的金鑰,可以點擊複製的圖示複製金鑰。但我強烈建議先點擊 [限制金鑰] 限制金鑰的存取權。
  7. [應用程式限制] 中,選擇 [HTTP 參照網址],並輸入你的網域名稱,如 huanyichuang.com/*,加入萬用字元 * 可以包含子路徑或子網域。
  8. [API 限制] 中,點選 [限制金鑰],並選擇 Places API。
  9. 最後將畫面右上角的 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 美元 (+評論)

參考資料

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124