React Places Autocomplete

7.3.0 · maintenance · verified Sun Apr 19

react-places-autocomplete is a React component designed to integrate Google Maps Places Autocomplete functionality into web applications, allowing users to easily select addresses. The current stable version is 7.3.0, released in January 2024. The library offers a highly customizable user interface, utility functions for geocoding addresses, and retrieving latitude and longitude coordinates using the Google Maps Geocoding API. Key differentiators include full control over rendering, mobile-friendly user experience, WAI-ARIA compliance, and support for asynchronous loading of the Google Maps JavaScript API. The project is actively seeking new maintainers, which may impact its long-term development cadence and responsiveness to new features or complex issues. Despite recent minor updates, significant feature development might be slow without additional community contributions.

Common errors

```
ReferenceError: Google is not defined
```
cause The Google Maps JavaScript API script has not been loaded, or it loaded after your React component tried to access `window.google`.

fix Ensure the Google Maps JavaScript API script is loaded synchronously in the `<head>` of your HTML with `defer` or `async` removed for initial load, or ensure it completes loading before your component mounts, as shown in the quickstart.
```
You must enable the 'places' library. Please see the Google Maps JavaScript API documentation.
```
cause The 'places' library was not included in the Google Maps JavaScript API script URL.

fix Add `&libraries=places` to your Google Maps script URL: `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>`.
```
ApiTargetBlockedMapError (often seen in console or Network tab)
```
cause Your Google Maps API key is restricted, or the Places API is not enabled for your project, or there are billing issues.

fix Verify your Google Cloud project's API key restrictions, ensure 'Places API' and 'Maps JavaScript API' are enabled, and check your billing account status.

Warnings

gotcha The Google Maps JavaScript API, including the 'places' library, must be loaded globally via a `<script>` tag in your HTML file before your React application initializes. This library does not automatically load the Google Maps script.
Fix: Add `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>` to your `index.html` or equivalent entry point, replacing `YOUR_API_KEY` with your actual Google API key.
gotcha The project is explicitly seeking new maintainers. While there have been recent releases, this indicates a potential for slower development, bug fixes, or new feature additions in the future if new maintainers are not found.
Fix: Be aware that long-term support and rapid evolution of the library may depend on community contributions. Consider contributing if you rely heavily on this library.
gotcha A valid Google Maps API Key is required for the Places API to function correctly. Ensure your API key is properly configured in the script URL and that the Places API is enabled for your Google Cloud project.
Fix: Obtain an API key from Google Cloud Console, enable 'Places API' and 'Maps JavaScript API', and include it in your script tag: `key=YOUR_API_KEY`.

Install

npm install react-places-autocomplete npm
yarn add react-places-autocomplete yarn
pnpm add react-places-autocomplete pnpm

Imports

PlacesAutocomplete

wrong:

import { PlacesAutocomplete } from 'react-places-autocomplete';

correct:

import PlacesAutocomplete from 'react-places-autocomplete';

This is the default export and main component.

geocodeByAddress

wrong:

import geocodeByAddress from 'react-places-autocomplete';

correct:

import { geocodeByAddress } from 'react-places-autocomplete';

Utility function for geocoding an address, a named export.

getLatLng

wrong:

const { getLatLng } = require('react-places-autocomplete');

correct:

import { getLatLng } from 'react-places-autocomplete';

Utility function to extract latitude and longitude from geocoding results, a named export.

geocodeByPlaceId

wrong:

import * as RPP from 'react-places-autocomplete'; RPP.geocodeByPlaceId(...);

correct:

import { geocodeByPlaceId } from 'react-places-autocomplete';

Utility function for geocoding by a Google Place ID, a named export.

Quickstart

This quickstart demonstrates a basic React class component that integrates `react-places-autocomplete`. It shows how to initialize the component, handle input changes, and process selected addresses to retrieve their latitude and longitude using the provided utility functions. It assumes the Google Maps JavaScript API is loaded externally.

import React from 'react';
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from 'react-places-autocomplete';

// Ensure you load Google Maps JavaScript API in your HTML:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success', latLng))
      .catch(error => console.error('Error during geocoding:', error));
  };

  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                  : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, { className, style })}
                    key={suggestion.placeId} // Key is important for React lists
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    );
  }
}

export default LocationSearchInput;

view raw JSON →