How to Build Google Places Autocomplete Address in Node Js

In this tutorial, we will teach you how to integrate google places autocomplete address in the Node js application without using a map example.

We will create the autocomplete address search using the Google Places API; therefore, we will also explain how to get the Google places key.

Address Autocomplete is a web form feature that indicates street addresses to users as they start typing an address into a search field. It makes address searching faster and more reliable.

The autocomplete service can match on full words and substrings, resolving place names, addresses, and codes. It gives your applications the type-ahead-search behaviour of the Google Maps search field.

Node Js Autocomplete Address using Google Places Search API Example

  • Step 1: Set Up Node App
  • Step 2: Add Modules in Node
  • Step 3: Get Google Places API
  • Step 4: Build Autocomplete Address HTML Form
  • Step 5: Configure Node Server File
  • Step 6: Run Node Server

Set Up Node App

By executing the following command we will generate a new empty directory.

mkdir node-places

Enter into the app’s folder:

cd node-places

Add the provided command on the terminal, and then run the suggested command. It will create the package.json file in your app folder.

npm init

Add Modules in Node

On the command prompt, just type the given command. The following command will install the express and body-parser packages in our node project.

npm install body-parser express

Get Google Places API

To get the Google places ai key, you have to visit Google Cloud Platform Console.

In the dashboard area, you have to create a new project, you may also select an existing project.

In the google cloud dashboard, at the top part, you will see ENABLE APIS AND SERVICES; make sure to click on this link.

Next, you have to look for the Places API, ensure that you choose it from the given options.

Once found, choose ENABLE. As soon as the process completes, the Places API manifests in the list of APIs on the Dashboard.

For the places API, make sure to add application restrictions.

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

In our case, we have to select HTTP referrers and, in the input box, add the http://localhost/index.html.

Build Autocomplete Address HTML Form

In your node project folder, you have to create the index.ejs file. In this file, we have to use the latest version of bootstrap for creating autocomplete address search.

On the other hand, we have to create the script which fills the address in autocomplete, make sure to add your google api key in the script section (GOOGLE_PLACES_KEY).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Address Autocomplete with Google Search API 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 mt-4">
      <div class="mb-3">
        <label for="autocomplete"> Enter: City, Location, Address </label>
        <input
          type="text"
          name="autocomplete"
          id="addressAutocomplete"
          class="form-control"
          placeholder="Choose location"
        />
      </div>
    </div>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_PLACES_KEY&libraries=places&callback=initAutocomplete"
      async
      defer
    ></script>

    <script type="text/javascript">
      function initAutocomplete() {
        autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */ (
            document.getElementById("addressAutocomplete")
          ),
          { types: ["geocode"] }
        );

        autocomplete.addListener("place_changed", setAddress);
      }

      function setAddress() {
        var place = autocomplete.getPlace();
      }
    </script>
  </body>
</html>

Configure Node Server File

Open the app.js file; first, you have to import the express, path, and body-parser modules.

Create the app instance using the express method.

Using the app instance, you can create the route to access the index.html file where the google autocomplete address code is located.

Furthermore, the app instance defines the port on which the node app will run.

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

var app = express()

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'))
})

app.listen(4000, function () {
  console.log('Node app connected on port: 4000')
})

module.exports = app

Run Node Server

The time has come to test the address based on the feature we built using the google places search api.

Without further ado, type and run the given command on the terminal.

nodemon

You can view the app by adding the given URL on the browser’s address bar:

http://127.0.0.1:4000

How to Build Google Places Autocomplete Address in Node Js

Summary

In this step by step guide, we have found out how to build google places autocomplete address using google places api in node using express js.

We also ascertained how to get the places api key and implemented the Google places autocomplete without using the map example.