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?
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.
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.
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?
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
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.
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.
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
This is truly a top-tier tutorial!
Reach combobox not supported with React 18 :/
Any alternative to this?
Did you find any alternative? I am also stuck here
@@yasserhy I suggest MaterialUI Autocomplete.
I would give Shadcn/ui's combobox a try.
Thank you! Video helped a lot!
Thank you so much
Thanks for the code it helped.
Do you have video how to get auto relocation for address that is typed in search field?
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?
hi guys. I have a question about google_api_key it is a public key and we can use it on SPA, correct?
love it !
thank you
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.
Amazing
KINGGG
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
you can use Shadcn ui command component instead
elaborate a bit?
@@amithanilgeorge4956
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....
can we make google map move on the location which we type
@reach/combobox --react18 does't support --😪
Why in my case combobox is appearing disabled?
Nice video, is there a way to add the Autocomplete component a restriction to only suggest address within US for example?
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.
react/combobox does not install with npm. problem with that.
npm i @reach/combobox --legacy-peer-deps
@@saibamir2211 its works but when deploy to vercel, its become error when npm install without legacy-peer-deeps. any suggestion?
Instead of Places, is it possible to make them cities?
how to add session token here
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?
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
@@GoogleMapsPlatform I hate this. Why should I create a "billing" account for a free API?
`This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError`, help me!!!!
Be sure to enable Places API for your project in the Console.
@Google Maps Platform, whats the name of the extension that shows the last change time please
Could you share the timestamp of the moment in the video when you are seeing a last change time?
Hi, I think its the GitLens extension
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.
Dropdown not working of places not working
Have you checked the console for errors?
Places API error: BillingNotEnabledMapError
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.
@@GoogleMapsPlatform thanks
Nice video ha
I try to enable Javascript API but Google said me that give me money)) Do you have free something??
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
You get $200 worth of API calls per month for free before it will charge you anything
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,
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)