Тёмный

How to add Place Autocomplete input to a map in React 

Google Maps Platform
Подписаться 39 тыс.
Просмотров 82 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@likeabird5942
@likeabird5942 Год назад
Reach combobox not supported with React 18 :/
@chinonsoojoechem
@chinonsoojoechem Год назад
Any alternative to this?
@yasserhy
@yasserhy Год назад
Did you find any alternative? I am also stuck here
@carrymesenpai3276
@carrymesenpai3276 5 месяцев назад
@@yasserhy I suggest MaterialUI Autocomplete.
@jordanhunnicutt710
@jordanhunnicutt710 2 месяца назад
I would give Shadcn/ui's combobox a try.
@asta_dev
@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?
@UCI3VzXLNW9qW7IexEn
@UCI3VzXLNW9qW7IexEn 2 года назад
Do you have video how to get auto relocation for address that is typed in search field?
@MrEmgeomap
@MrEmgeomap 5 месяцев назад
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?
@igorkushnir4966
@igorkushnir4966 2 года назад
Thank you! Video helped a lot!
@g43s
@g43s 10 месяцев назад
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.
@khajamoddin
@khajamoddin 11 месяцев назад
Thanks for the code it helped.
@FargKlee
@FargKlee 2 года назад
Nice video, is there a way to add the Autocomplete component a restriction to only suggest address within US for example?
@GoogleMapsPlatform
@GoogleMapsPlatform 2 года назад
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.
@geraldoagohoue3132
@geraldoagohoue3132 Год назад
Why in my case combobox is appearing disabled?
@ushelloworld
@ushelloworld Год назад
Instead of Places, is it possible to make them cities?
@mariajosecastria5757
@mariajosecastria5757 2 года назад
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....
@pratikmahendra6552
@pratikmahendra6552 2 месяца назад
Thank you so much
@rajdeepjadav6263
@rajdeepjadav6263 Год назад
can we make google map move on the location which we type
@yasserhy
@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
@amithanilgeorge4956 Год назад
you can use Shadcn ui command component instead
@andrewslayton6350
@andrewslayton6350 Год назад
elaborate a bit? @@amithanilgeorge4956
@zamanEhsani
@zamanEhsani 2 года назад
react/combobox does not install with npm. problem with that.
@saibamir2211
@saibamir2211 Год назад
npm i @reach/combobox --legacy-peer-deps
@javandocalvin
@javandocalvin Год назад
​@@saibamir2211 its works but when deploy to vercel, its become error when npm install without legacy-peer-deeps. any suggestion?
@jamesong2012
@jamesong2012 2 года назад
love it !
@birukmengistu3653
@birukmengistu3653 Год назад
@reach/combobox --react18 does't support --😪
@adrianfernandez6038
@adrianfernandez6038 2 года назад
`This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError`, help me!!!!
@GoogleMapsPlatform
@GoogleMapsPlatform 2 года назад
Be sure to enable Places API for your project in the Console.
@abhishes
@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
@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
@abhishes Год назад
@@GoogleMapsPlatform I hate this. Why should I create a "billing" account for a free API?
@AdrianDubois-f7k
@AdrianDubois-f7k 9 месяцев назад
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.
@tuttubabukarna
@tuttubabukarna 2 года назад
Amazing
@epigie8369
@epigie8369 2 года назад
@Google Maps Platform, whats the name of the extension that shows the last change time please
@GoogleMapsPlatform
@GoogleMapsPlatform 2 года назад
Could you share the timestamp of the moment in the video when you are seeing a last change time?
@Sam-bo6nj
@Sam-bo6nj Год назад
Hi, I think its the GitLens extension
@kaluhathabrew9184
@kaluhathabrew9184 Год назад
thank you
@ZamirMubashir
@ZamirMubashir 2 года назад
KINGGG
@safwan9bbb
@safwan9bbb Год назад
how to add session token here
@richardbentil4070
@richardbentil4070 2 года назад
Dropdown not working of places not working
@GoogleMapsPlatform
@GoogleMapsPlatform 2 года назад
Have you checked the console for errors?
@AmeerHamza-cy6km
@AmeerHamza-cy6km 2 года назад
Places API error: BillingNotEnabledMapError
@GoogleMapsPlatform
@GoogleMapsPlatform 2 года назад
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
@AmeerHamza-cy6km 2 года назад
@@GoogleMapsPlatform thanks
@chienhoangquyet812
@chienhoangquyet812 9 месяцев назад
Nice video ha
@LearnITify
@LearnITify Год назад
I try to enable Javascript API but Google said me that give me money)) Do you have free something??
@GoogleMapsPlatform
@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
@UhhhhHi2 Год назад
You get $200 worth of API calls per month for free before it will charge you anything
@webtpoint8009
@webtpoint8009 11 месяцев назад
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
@kantcat 2 года назад
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)
Далее
How to show directions on a map in React
21:30
Просмотров 17 тыс.
Ilkinchi hotin oberasanmi deb o’ylabman🥹😄
00:26
РОК-СТРИМ без ФАНЕРЫ🤘
3:05:16
Просмотров 1,3 млн
Google Data Center 360° Tour
8:29
Просмотров 5 млн
I Rewrote This Entire Main File // Code Review
16:08
Просмотров 172 тыс.
No Code App Development is a Trap
9:31
Просмотров 280 тыс.
Coding a Web Server in 25 Lines - Computerphile
17:49
Просмотров 341 тыс.
React Native vs Flutter - Which should you use?
22:31
Have You Picked the Wrong AI Agent Framework?
13:10
Просмотров 74 тыс.
Using WebGL Overlay View in a React App (Basic)
26:36
Ilkinchi hotin oberasanmi deb o’ylabman🥹😄
00:26