In this blog, we will walk through the process of integrating the Google Places API into a Node.js backend and an Angular frontend to fetch and display testimonials (reviews) for a specific place. This can be useful for businesses that want to showcase customer reviews from Google directly on their website.

Table of Contents

1. Introduction to Google Places API

2. Setting Up Google Cloud Platform (GCP)

3. Creating a Node.js Backend

4. Building an Angular Frontend

5. Fetching and Displaying Testimonials

6. Conclusion

1. Introduction to Google Places API

The Google Places API allows developers to access detailed information about places, including reviews, ratings, photos, and more. In this tutorial, we will focus on fetching reviews (testimonials) for a specific place using the Places API.

Key Features:

• Place Details: Get detailed information about a place, including reviews.

• Place Photos: Access photos of the place.

• Autocomplete: Implement autocomplete for place search.

Prerequisites:

• Basic knowledge of Node.js and Angular.

• A Google Cloud Platform (GCP) account.

2. Setting Up Google Cloud Platform (GCP)

Before we start coding, we need to set up the Google Places API in the Google Cloud Platform.

Steps:

1. Create a Project:

• Go to the Google Cloud Console.

• Create a new project or select an existing one.

2. Enable the Places API:

• Navigate to the “API & Services” dashboard.

• Click on “Enable APIs and Services”.

• Search for “Places API” and enable it.

3. Create API Key:

• Go to the “Credentials” tab.

• Click on “Create Credentials” and select “API Key”.

• Copy the generated API key; we will use it in our Node.js backend.

3. Creating a Node.js Backend

The Node.js backend will act as a middleware to fetch place details from the Google Places API. We will use the axios library to make HTTP requests.

Steps:

1. Initialize a Node.js Project:

mkdir google-places-backend
cd google-places-backend
npm init -y

2. Install Required Packages:

npm install express axios cors

3.Create the Server:
Create a file named server.js and add the following code:

const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
const PORT = 3000;

app.use(cors());

const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY;
const PLACE_ID = process.env.PLACE_ID;

// Google Places API se reviews fetch karne ka endpoint
app.get('/reviews', async (req, res) => {
    try {
        const googleApiUrl = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${PLACE_ID}&fields=reviews&key=${GOOGLE_API_KEY}`;

        const response = await axios.get(googleApiUrl);

        if (response.data.result && response.data.result.reviews) {
            res.json(response.data.result.reviews);
        } else {
            res.status(404).json({ message: 'No reviews found' });
        }
    } catch (error) {
        console.error('Error fetching Google Reviews:', error.message);
        res.status(500).json({ message: 'Internal Server Error', error: error.message });
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4. Run the Server:

node server.js

4. Building an Angular Frontend

Now, let’s create an Angular application to display the testimonials fetched from the Node.js backend.

Steps:

1. Install Angular CLI (if not already installed):

npm install -g @angular/cli

2. Create a New Angular Project:

ng new google-places-frontend
cd google-places-frontend

3. Generate a Component for Testimonials:

ng generate component testimonials

4. Update the testimonials.component.ts:
Open src/app/testimonials/testimonials.component.ts and add the following code:

import { Component, OnInit } from '@angular/core';
import { GoogleReviewsService } from '../service/google-reviews.service';

@Component({
    selector: 'app-testimonials',
    templateUrl: './testimonials.component.html',
    styleUrls: ['./testimonials.component.css']
})
export class TestimonialsComponent implements OnInit {
   reviews: any[] = [];
  visibleReviews: any[] = [];
  currentIndex = 0;
  itemsToShow = 4;

  constructor(private googleReviewsService: GoogleReviewsService) {}

  ngOnInit(): void {
    this.googleReviewsService.getGoogleReviews().subscribe({
      next: (response) => {
        this.reviews = response.map((review: any) => ({...review,isExpanded: false}));
        console.log('Google Reviews:', this.reviews);
        this.updateVisibleReviews();
      },
      error: (error) => {
        console.error('Error fetching Google Reviews:', error);
      }
    });
  }

  toggleReadMore(review: any): void {
    review.isExpanded = !review.isExpanded;
  }

  needsReadMore(text: string): boolean {
    const words = text.split(' ').length;
    return words > 30;
  }

  nextSlide(): void {
    if (this.currentIndex + this.itemsToShow < this.reviews.length) {
      this.currentIndex++;
      this.updateVisibleReviews();
    }
  }

  prevSlide(): void {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      this.updateVisibleReviews();
    }
  }

  private updateVisibleReviews(): void {
    this.visibleReviews = this.reviews.slice(
      this.currentIndex,
      this.currentIndex + this.itemsToShow
    );
  }
}

Also create a service file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class GoogleReviewsService {
  private apiUrl = environment.apiUrl + 'google_review/reviews';

  constructor(private http: HttpClient) { }

  getGoogleReviews(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

5. Update the testimonials.component.html:
Open src/app/testimonials/testimonials.component.html and add the following code:

<section class="testimonial-section">
  <h2 class="testimonial-title">See what others are achieving through learning</h2>

  <div class="testimonial-carousel">
    <button 
      class="carousel-btn left" 
      (click)="prevSlide()" 
      [disabled]="currentIndex === 0">
      <i class="fa fa-chevron-left"></i>
    </button>

    <div class="testimonial-container">
      <div class="testimonial-card" *ngFor="let review of visibleReviews">
        <blockquote class="testimonial-text">
          "{{ review.text }}"
        </blockquote>

        <div class="testimonial-footer">
          <div class="user-avatar">
            <img 
              [src]="review.profile_photo_url" 
              [alt]="review.author_name"
              loading="lazy">
          </div>
          <div class="user-info">
            <p class="user-name">{{ review.author_name }}</p>
            <p class="user-title">{{ review.designation || 'Student' }}</p>
          </div>
        </div>

        <a 
          class="read-more" 
          [href]="review.author_url" 
          target="_blank"
          rel="noopener noreferrer">
          Read full review 
          <i class="fa fa-arrow-right"></i>
        </a>
      </div>
    </div>

    <button 
      class="carousel-btn right" 
      (click)="nextSlide()" 
      [disabled]="currentIndex + itemsToShow >= reviews.length">
      <i class="fa fa-chevron-right"></i>
    </button>
  </div>
</section>

6. Update the app.module.ts:
Make sure to import HttpClientModule in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { TestimonialsComponent } from './testimonials/testimonials.component';

@NgModule({
    declarations: [
        AppComponent,
        TestimonialsComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

7. Run the Angular Application:

ng serve

Your Angular application will be running on http://localhost:4200.

5. Fetching and Displaying Testimonials

Once your Angular application is running, navigate to http://localhost:4200. You should see the testimonials (reviews) fetched from the Google Places API displayed on the page.

6. Conclusion

In this blog, we successfully integrated the Google Places API into a Node.js backend and an Angular frontend to fetch and display testimonials (reviews) for a specific place. This setup can be extended to include more features like place photos, autocomplete search, and more.

• Implement pagination for reviews.

• Add a search bar to find different places.

• Style the testimonials component to match your website’s design.

By following this guide, you can easily showcase customer reviews from Google on your website, enhancing your business’s credibility and user engagement.