How to add Place Autocomplete input to a map in React

Learn how to add a Place Autocomplete input field with React. In this Geocast, Leigh Halliday builds on his 5-minute quickstart to demonstrate using an open-source React component built on the Place Autocomplete service in Maps JavaScript API.

Chapters:
0:00 - Intro and code overview
1:18 - Defining the Place Autocomplete component
2:20 - Defining the Combobox element
5:44 - Handle user selection of a prediction from the list
7:09 - Geocode the selected place
8:05 - Generate a marker on the map at the selected place

#Geocasts #React

product: Maps Platform - General; fullname: _Not Listed;

[UCIVzXLNWqWIexEn]

Do you have video how to get auto relocation for address that is typed in search field?

[asta_dev]

hi guys. I have a question about google_api_key it is a public key and we can use it on SPA, correct?

[ushelloworld]

Instead of Places, is it possible to make them cities?

[mariajosecastria]

I followed the steps and it works fine. BUT when I select a place, the input is cleared, and it is required in my form....

[geraldoagohoue]

Why in my case combobox is appearing disabled?

[rajdeepjadav]

can we make google map move on the location which we type

[MrEmgeomap]

Hello. Could you please provide guidance on how to implement regional restriction for autocomplete suggestions in the Google Places API within the context of this React application?

[gs]

why do i need to add the initMaps function? i came across this video because i needed to implement the autocomplete for an adress field. but i have no use for google maps. it seems like such a waste of resources to enforce you to add it.

[FargKlee]

Nice video, is there a way to add the Autocomplete component a restriction to only suggest address within US for example?

[likeabird]

Reach combobox not supported with React 18 :/

[epigie]

@Google Maps Platform, whats the name of the extension that shows the last change time please

[adrianfernandez]

`This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError`, help me!!!!

[abhishes]

When I go to google credentials dashboard it's asking me to enter billing details .. credit card etc. why is this? I thought the google maps api was free? any way to follow the instructions of this tutorial without entering the credit card details?

[zamanEhsani]

react/combobox does not install with npm. problem with that.

[richardbentil]

Dropdown not working of places not working

[AmeerHamza-cykm]

Places API error: BillingNotEnabledMapError

[vpbwzou]

Nice viedio, but I have a question, isn't the api key public, and also you can't restrict the api key for geolocation api and places api so how do you protect yourself, because you also have to pay for every use.

[LearnITify]

I try to enable Javascript API but Google said me that give me money)) Do you have free something??

[webtpoint]

please don't do this please don't make this type of video you don't need to teach how to code, just show how you enabled google api? that's the issue,

[birukmengistu]

@reach/combobox --react18 does't support --😪