桓桓鄉寇

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

Eric Chuang

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

WordPress 的替代方案

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

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 美元 (+評論)

參考資料

Exit mobile version