Node Js Google Places API Autocomplete Address Search Tutorial

Last updated on: by Digamber

Node js Google address autocomplete example; If you don’t know how to build autocomplete address search in Node js.

This guide will take you on a coding journey where you will be using Google places API and creating an address autocomplete search bar in Node js.

Address Autocomplete is a web form functionality that displays street addresses to users when they type in an address within the form field.

An autocomplete feature helps the users in reducing the number of keystrokes which exponentially makes the form submission faster.

In this guide, we will cover nuances that are required to create autocomplete address search in Node js.

We will show you how to get Google places api, how to set up a brand new Node app from scratch, install external dependencies, and create the address search form using HTML and Bootstrap 5.

How to Implement Address Autocomplete in Node Js using Google Places API

  • Step 1: Retrieve Google API
  • Step 2: Build Node Project
  • Step 3: Install Dependencies in Node
  • Step 4: Create Autocomplete HTML Form
  • Step 5: Set Up Server File
  • Step 6: Run App on Browser

Retrieve Google API

In this step you have to go to Google Cloud Platform Console from here you can grab Google places api credentials.

You can either choose existing project or may choose to create a new project.

In the cloud dashboard click on ENABLE APIS AND SERVICES .

From the given options you have to select Places API.

As you select the option and enable it the places api will display on the dashboard.

We have to set the application restrictions.

You will be given None, HTTP referrers (web sites), IP addresses, Android apps, and iOS apps options.

From the suggested options, ensure that you choose HTTP referrers.

As you select this option in an input field your app serving url. We are developing this feature locally, make sure to add http://localhost/index.html.

Build Node Project

Run the suggested command to create a new directory for keeping project files.

mkdir node-google-autocomplete

After that get inside the app folder.

cd node-google-autocomplete

Every node based project required package.json file for storing the project metadata. You can create this file using the suggested command.

npm init

Install Dependencies in Node

Head over to terminal, on the terminal type the suggested command, invoke the command to install express, body-parser and nodemon dependencies through npm registry..

npm i express body-parser nodemon

Create Autocomplete HTML Form

Create and add the code in index.ejs file; in this file, you have to create an address autocomplete web form. We can import or add the bootstrap CDN link to create the address search form rapidly.

In order to invoke the google places api, make sure to add google maps api scripts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Autocomplete Address Example</title>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="mb-3">
        <label for="autocomplete"> Enter: City, Location, Address </label>
        <input
          type="text"
          class="form-control"
          id="addressSearch"
          name="autocomplete"
          placeholder="Choose location"
        />
      </div>
    </div>
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_PLACES_API_KEY&libraries=places&callback=setAutocomplete"
    ></script>
    <script type="text/javascript">
      function setAutocomplete() {
        autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */ (
            document.getElementById("addressSearch")
          ),
          { types: ["geocode"] }
        );
        autocomplete.addListener("place_changed", setAddress);
      }
      function setAddress() {
        var place = autocomplete.getPlace();
      }
    </script>
  </body>
</html>

Set Up Server File

Create the app.js server file at the root of node project.

In this file, we need to import the express, body-parser, and path packages.

The module we imported will create a route for showing the address autocomplete component, most importantly, define the port where the node app will run.

var createError = require('http-errors')
var bodyParser = require('body-parser')
var express = require('express')
var path = require('path')

var app = express()
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'))
})
app.listen(5000, function () {
  console.log('App serving on: 5000')
})
module.exports = app

Run App on Browser

Execute the suggested command to run the node app.

nodemon

You may test out the app with the help of the following url:

http://127.0.0.1:5000

Node Js Google Places API Autocomplete Address Search Tutorial

Conclusion

In this tutorial, we respectively revealed everything that helped us create the address autocomplete component in node js.

We learned how to configure and fetch the Google places API from the google cloud console.

Moreover, to build this functionality, we took the help of some packages that we downloaded from the node package manager (npm).

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.