Integrating Google Places API for Reviews and Ratings in Your App

Why Display Google Reviews?

Social proof drives conversions. Displaying your Google rating and review count on your website gives visitors immediate trust signals. But fetching and displaying this data requires understanding Google's Places API.

Places API (New) vs Legacy

Google launched the Places API (New) with a different pricing model and endpoint structure. Key differences:

• New API uses places.googleapis.com with field masks
• Legacy API uses maps.googleapis.com/maps/api/place
• New API is cheaper for basic lookups (Pay-as-you-go with SKU-based pricing)
• New API supports more fields and better review data

Setup

1. Enable the API

In Google Cloud Console:

• Enable "Places API (New)"
• Create an API key
• Restrict the key to your server IP or domain

2. Find Your Place ID

Every Google Business listing has a unique Place ID. Find yours:

async function findPlaceId(businessName, address) {
  const response = await fetch(
    'https://places.googleapis.com/v1/places:searchText',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Goog-Api-Key': process.env.GOOGLE_PLACES_API_KEY,
        'X-Goog-FieldMask': 'places.id,places.displayName'
      },
      body: JSON.stringify({
        textQuery: `${businessName} ${address}`
      })
    }
  );

  const data = await response.json();
  return data.places[0]?.id;
}

Fetching Review Data

Basic Rating and Count

async function getReviewSummary(placeId) {
  const response = await fetch(
    `https://places.googleapis.com/v1/places/${placeId}`,
    {
      headers: {
        'X-Goog-Api-Key': process.env.GOOGLE_PLACES_API_KEY,
        'X-Goog-FieldMask': 'rating,userRatingCount,googleMapsUri,displayName'
      }
    }
  );

  const data = await response.json();
  return {
    name: data.displayName?.text,
    rating: data.rating,
    totalReviews: data.userRatingCount,
    mapsUrl: data.googleMapsUri
  };
}

Fetching Individual Reviews

async function getReviews(placeId) {
  const response = await fetch(
    `https://places.googleapis.com/v1/places/${placeId}`,
    {
      headers: {
        'X-Goog-Api-Key': process.env.GOOGLE_PLACES_API_KEY,
        'X-Goog-FieldMask': 'reviews'
      }
    }
  );

  const data = await response.json();
  return data.reviews?.map(review => ({
    author: review.authorAttribution?.displayName,
    rating: review.rating,
    text: review.text?.text,
    time: review.relativePublishTimeDescription,
    profilePhoto: review.authorAttribution?.photoUri
  }));
}

Caching Strategy

Google Reviews don't change frequently. Cache aggressively to reduce API costs:

const NodeCache = require('node-cache');
const reviewCache = new NodeCache({ stdTTL: 3600 * 6 }); // 6 hours

async function getCachedReviews(placeId) {
  const cached = reviewCache.get(placeId);
  if (cached) return cached;

  const reviews = await getReviewSummary(placeId);
  reviewCache.set(placeId, reviews);
  return reviews;
}

For the LogoBadge Shopify app, we cache review data for 6 hours. This means:

• At most 4 API calls per day per store
• Review data stays fresh enough for display
• Monthly API cost stays well under $1 per store

Rendering a Review Badge

HTML/CSS Badge Component

<div class="google-badge">
  <svg class="google-icon" viewBox="0 0 24 24" width="18" height="18">
    <!-- Google G icon SVG path -->
  </svg>
  <span class="badge-rating">4.8</span>
  <span class="badge-stars">★★★★★</span>
  <span class="badge-count">(127 reviews)</span>
</div>

<style>
  .google-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: #333;
  }
  .badge-rating {
    font-weight: 600;
  }
  .badge-stars {
    color: #fbbc04;
    letter-spacing: -2px;
  }
  .badge-count {
    color: #666;
  }
</style>

Dynamic Star Rendering

function renderStars(rating) {
  const fullStars = Math.floor(rating);
  const hasHalf = rating % 1 >= 0.5;
  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
  
  return (
    '★'.repeat(fullStars) +
    (hasHalf ? '⯪' : '') +
    '☆'.repeat(emptyStars)
  );
}

API Pricing

The Places API (New) pricing for the fields we use:

• Place Details (Basic): $0 for ID and display name
• Place Details (Advanced): $0.025 per request for rating, review count
• Place Details (Preferred): $0.035 per request for full reviews

With 6-hour caching, a store making 4 calls/day costs about $3/month for advanced fields.

Common Pitfalls

1. Field masks are required — omitting the X-Goog-FieldMask header returns an error
2. Reviews are limited to 5 — the API returns at most 5 reviews per request
3. API key security — never expose your key in client-side code; proxy through your server
4. Terms of Service — Google requires a link back to Google Maps when displaying review data
5. Rate limits — 6,000 requests per minute per project (generous but be aware)

Conclusion

The Google Places API is the authoritative source for business review data. With proper caching and field masks, you can display real-time Google ratings on any website at minimal cost. For Shopify stores, wrapping this in an app like LogoBadge makes the integration zero-effort for merchants.