Tech with Faisal

How to set up Google Place search in React

Mohammad Faisal's photo
Mohammad Faisal
·

3 min read

Table of contents

Introduction

This guide will teach us how to set up Google Place Search in React.

Prerequisites

  • React
  • Google API Key

Get Google API Key

And you are good to go.

Getting Started

First create a new react app using create-react-app command.

npx create-react-app google-place-search

Now install the following dependencies.

yarn add react-google-places-autocomplete

Create GooglePlaceSearch Component

Create a new file GooglePlaceSearch.js, in src folder and add the following code.

import React, { useEffect, useState } from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const GOOGLE_API_KEY = "YOUR_GOOGLE_API_KEY"; // The api key that we copied earlier

const LocationSearch = () => {
  const [place, setPlace] = useState(null);
  const [placeId, setPlaceId] = useState("");

  useEffect(() => {
    if (value) {
      const { place_id } = value.value;

      // Set the place ID here
      setPlaceId(place_id);
    }
  }, [value]);

  return (
    <div>
      <GooglePlacesAutocomplete
        apiKey={GOOGLE_API_KEY}
        selectProps={{
          value,
          onChange: setPlace,
        }}
        autocompletionRequest={{
          componentRestrictions: {
            country: ["us"],
          },
        }}
        onLoadFailed={(error) =>
          console.error("Could not inject Google script", error)
        }
      />
    </div>
  );
};

export default LocationSearch;

Several things are happening here.

  • We are importing GooglePlacesAutocomplete from react-google-places-autocomplete which we will use to render the search box.

  • We are creating a GOOGLE_API_KEY constant and assigning the API key that we copied earlier.

  • We are rendering the GooglePlacesAutocomplete component and passing the following props.

    • apiKey - The API key that we copied earlier.
    • selectProps - The props that will be passed to the Select component.
    • autocompletionRequest - We are restricting the search to US only.
    • onLoadFailed - The callback will be called if the Google script fails to load.

It's that simple.

Now run the application using yarn start command and you should see the place search box on the screen.

Get location details

Getting the place_id is not enough. We might want more details sometimes.

The code so far gives us a search box where we can search for places. But we can use the geocodeByPlaceId function to get more details about this place.

We can add a new useEffect hook to get the location details. The updated code will look like this.

import { geocodeByPlaceId } from "react-google-places-autocomplete";

const LocationSearch = () => {
  // ... previous codes

  useEffect(() => {
    geocodeByPlaceId(placeId)
      .then((results) => {
        // Get the functions to get latitude and longitude
        const { lat, lng } = results[0].geometry.location;
        const latitude = lat();
        const longitude = lng();

        console.log(latitude, longitude);
      })
      .catch((error) => console.error(error));
  }, [placeId]);

  //... previous codes
};

In the above code we are importing geocodeByPlaceId from react-google-places-autocomplete which we will use to get the latitude and longitude of the selected place.

In fact we can use the results array to get other details like city, state, country, postal_code etc.

Conclusion

In this guide, we learned how to set up Google Place search in React. We also learned how to get the latitude and longitude of the selected place.

Hope you learned something new today. Have a great day.

Reference

Reactgoogle mapsNext.js