React Places Autocomplete

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.

Demo

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

Features

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

Requisites

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 two APIs:

• Places API
• 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

Installation and Basic Example

  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}
      />
}

Props Reference

Parameter	Type	Description
gMapsKey	string	Required. Your API key
placeId	string	Id used to load an initial or stored place
onChange	func	Event triggered when user select a place or when user starts typing to search a place
onSelectPlace	func	Event triggered when user select a place
placeholder	string	Placeholder for input
searchTypes	array[string]	Limit the place types return in a search. See: https://developers.google.com/maps/documentation/places/web-service/supported_types
language	string	ISO code for map and results language. Default: "en"
disableMap	bool	Boolean to disable place Map. Default: false
mapExpanded	bool	If true, the map is always visible. Default: false
disabled	bool	Boolean to disable input
customStyles	object	Object to override styles of each element. See definitions

customStyles example

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