How to add Place Autocomplete input to a map in React

[@likeabird5942]

Reach combobox not supported with React 18 :/

[@chinonsoojoechem]

Any alternative to this?

[@yasserhy]

Did you find any alternative? I am also stuck here

[@carrymesenpai3276]

@@yasserhy I suggest MaterialUI Autocomplete.

[@jordanhunnicutt710]

I would give Shadcn/ui's combobox a try.

[@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?

[@UCI3VzXLNW9qW7IexEn]

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?

[@igorkushnir4966]

Thank you! Video helped a lot!

[@g43s]

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.

[@yasserhy]

I am getting this errir while trying to install the combobox: Could not resolve dependency:
peer react@"^16.8.0 || 17.x" from @reach/combobox@0.18.0

[@amithanilgeorge4956]

you can use Shadcn ui command component instead

[@Lavaincantation]

elaborate a bit?
@@amithanilgeorge4956

[@rajdeepjadav6263]

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

[@khajamoddin]

Thanks for the code it helped.

[@birukmengistu3653]

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

[@geraldoagohoue3132]

Why in my case combobox is appearing disabled?

[@ushelloworld]

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

[@FargKlee]

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

[@GoogleMapsPlatform]

Yes, you can use componentRestrictions to restrict to a country. Documentation: developers.google.com/maps/documentation/javascript/places-autocomplete#restrict-predictions-to-a-specific-country You'll need to check the documentation of the React component used here to see what the corresponding syntax is for setting componentRestrictions in that component.

[@zamanEhsani]

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

[@saibamir2211]

npm i @reach/combobox --legacy-peer-deps

[@javandocalvin]

​@@saibamir2211 its works but when deploy to vercel, its become error when npm install without legacy-peer-deeps. any suggestion?

[@safwan9bbb]

how to add session token here

[@pratikmahendra6552]

Thank you so much

[@mariajosecastria5757]

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....

[@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?

[@GoogleMapsPlatform]

Using Google Maps Platform requires a billing account. Learn more about how billing works and the monthly credit here: developers.google.com/maps/billing-and-pricing/billing

[@abhishes]

@@GoogleMapsPlatform I hate this. Why should I create a "billing" account for a free API?

[@epigie8369]

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

[@GoogleMapsPlatform]

Could you share the timestamp of the moment in the video when you are seeing a last change time?

[@Sam-bo6nj]

Hi, I think its the GitLens extension

[@jamesong2012]

love it !

[@adrianfernandez6038]

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

[@GoogleMapsPlatform]

Be sure to enable Places API for your project in the Console.

[@AdrianDubois-f7k]

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.

[@kaluhathabrew9184]

thank you

[@tuttubabukarna]

Amazing

[@richardbentil4070]

Dropdown not working of places not working

[@GoogleMapsPlatform]

Have you checked the console for errors?

[@AmeerHamza-cy6km]

Places API error: BillingNotEnabledMapError

[@GoogleMapsPlatform]

Be sure to enable billing in your account with the instructions at developers.google.com/maps/documentation/javascript/cloud-setup. After that, if you get an ApiNotActivatedError you might also need to enable Maps JavaScript API and Places API for your project.

[@AmeerHamza-cy6km]

@@GoogleMapsPlatform thanks

[@ZamirMubashir]

KINGGG

[@chienhoangquyet812]

Nice video ha

[@LearnITify]

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

[@GoogleMapsPlatform]

Please see information about monthly credits that offset the cost of Maps JavaScript API for low usage volumes at developers.google.com/maps/billing-and-pricing/billing#assistance-from-google

[@UhhhhHi2]

You get $200 worth of API calls per month for free before it will charge you anything

[@webtpoint8009]

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,

[@kantcat]

I got these errors. ERROR in ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js 86:13-20
export 'useId' (imported as 'useId$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)