Component used as a field in a form to autocomplete a place, using the Google Maps API.

The place can be a city, a country, a street, or even an establishment.

https://react-places-autocomplete-demo.up.railway.app

• Map with the selected place
• Limit the type of places you want to retrieve
• Fully customizable

Version 2.0.0 migrates from the deprecated google.maps.places.AutocompleteService to the new google.maps.places.AutocompleteSuggestion API.

Required change in Google Cloud Console: you must enable the Places API (New) in addition to (or instead of) the legacy Places API. Without this, autocomplete suggestions will not work after upgrading.

See the official migration guide: https://developers.google.com/maps/documentation/javascript/places-migration-overview

To use this component, you will need a Google API key. Here is more information on how to obtain it: https://developers.google.com/maps/documentation/javascript/get-api-key

You will also need to enable these APIs in Google Cloud Console:

• Places API (New) ← required from v2.0.0
• Maps JavaScript API

Exposing your API key in the front-end code of your application can pose significant security risks. Unauthorized access to your API key may lead to unauthorized usage.

Is highly recommended to store it in a separate configuration file, such as the .env file.

Additionally, we strongly recommend that you restrict the usage of your API key using the available configuration options. https://developers.google.com/maps/api-security-best-practices#restrict_apikey

  npm install @tasiodev/react-places-autocomplete

import { useState } from 'react'
import PlacesPicker from '@tasiodev/react-places-autocomplete'

function App() {
  const [value, setValue] = useState(null)
  return  <PlacesPicker
        gMapsKey='*******************'
        placeId={value}
        onChange={setValue}
      />
}

{
    container: { backgroundColor: 'black' },
    fieldInput: { color: 'red' },
    searchResultsContainer: { marginTop: 12 },
    searchResult: { padding: 6 },
    gmapContainer: { padding: 8, height: 400 },
}